javascript 之 将数组降维(即扁平化)

263 阅读1分钟

待试验数组:

const initArr = [1,2,3,4,5,[6,7,[8,9,10,[11,12,13]]]];
let arr0 = [
    {name:'北京'},
    [{name:'天津'},{name:'河北'}],
    [
        {name:'山东'},
        {name:'江苏'},
        {name:'安徽'},
        [
            {name:'西藏'},
            {name:'新疆'}
        ]
    ]
]

1. 递归:注意这个不兼容IE【★★★★】

function arrReduce(someArr){
    let newArr = [];
    for( let i = 0; i < someArr.length;i++ ){
        if(Array.isArray(someArr[i])){
           arrReduce(someArr[i])
           newArr = [...newArr,... arrReduce(someArr[i])]
        }else{
            newArr.push(someArr[i])
        }
    }
    return newArr;
}
console.log(arrReduce(initArr));

2. reduce 方法【★★★★★】

const reduceFlat = (arr)=>arr.reduce((prev,cur)=> prev.concat(Array.isArray(cur) ? reduceFlat(cur):cur),[]);
console.log('reduce:',reduceFlat(initArr));
console.log('reduce:',reduceFlat(arr0));

3. 数组的join方法【有局限性,只能针对简单类型,像对象是没法扁平化的】

function joinFlat(arr){
    let newArray = new Array();
    // let newArray = [];
    for(let item of arr.join().split(",")){
        newArray.push(Number(item));
   }
   return newArray;
}
console.log('join方法:',joinFlat(initArr));
console.log('join方法:',joinFlat(arr0)); //  [ NaN, NaN, NaN, NaN, NaN, NaN ]

4. 数组的toString方法【有局限性,只能针对简单类型,像对象是没法扁平化的】

function toStringFlat(arr){
    let newArray = new Array();
    // let newArray = [];
    for(let item of arr.toString().split(",")){
        newArray.push(Number(item));
   }
   return newArray;
}
console.log('toStringFlat方法:',toStringFlat(initArr));
console.log('toStringFlat方法:',toStringFlat(arr0)); //  [ NaN, NaN, NaN, NaN, NaN, NaN ]

5. ES6的flat(n) : n非必填项,n默认是1,表示扁平化深度【★★★】

验证后,证明也是有局限性

console.log('flat()',arr0.flat());
flat() [
  { name: '北京' },
  { name: '天津' },
  { name: '河北' },
  { name: '山东' },
  { name: '江苏' },
  { name: '安徽' },
  [ { name: '西藏' }, { name: '新疆' } ]
]
console.log('flat(1)',arr0.flat(1));
flat(1) [
  { name: '北京' },
  { name: '天津' },
  { name: '河北' },
  { name: '山东' },
  { name: '江苏' },
  { name: '安徽' },
  [ { name: '西藏' }, { name: '新疆' } ]
]
console.log('flat(2)',arr0.flat(2));
flat(2) [
  { name: '北京' },
  { name: '天津' },
  { name: '河北' },
  { name: '山东' },
  { name: '江苏' },
  { name: '安徽' },
  { name: '西藏' },
  { name: '新疆' }
]

console.log('flat(3)',arr0.flat(3));
flat(3) [
  { name: '北京' },
  { name: '天津' },
  { name: '河北' },
  { name: '山东' },
  { name: '江苏' },
  { name: '安徽' },
  { name: '西藏' },
  { name: '新疆' }
]