JS实现数组扁平化的几种常见方式

文章目录

• ​​1. 利用es6新方法​​
• ​​2. 利用递归​​

• ​​2.1 利用 some 递归​​
• ​​2.2 利用 map 递归​​
• ​​2.3 利用 reduce 递归​​

• ​​3. 利用 toString​​
• ​​4. 利用 join​​
• ​​5. 利用正则​​
• ​​总结​​

数组扁平化也叫数组降维是指将一个多维数组变为一维数组

1. 利用es6新方法

es6 提供的新方法 ​​flat(depth)​​，参数depth为数组的纬度：

var arr = [[1, 2], 3, [4, 5, [6, 7, [8, 9, [10, 11]]]]];

a.flat(); // [1, 2, 3, 4, 5, Array(3)]
a.flat(4); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

其实还有一种更简单的办法，无需知道数组的维度，直接将目标数组变成1维数组。 depth的值设置为​​Infinity​​：

var arr = [[1, 2], 3, [4, 5, [6, 7, [8, 9, [10, 11]]]]];

arr.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

2. 利用递归

遍历数组每一项，若值为数组则递归遍历，否则 ​​concat ​​：

2.1 利用 some 递归

// 方法一：
function flatten (arr) {
  const isDeep = arr.some(item => Array.isArray(item));

  if (!isDeep) {
    return arr
  }
  const res = [].concat(...arr);
  // 等价于
  //const res = Array.prototype.concat.apply([], arr);
  
  return flatten(res);
}

2.2 利用 map 递归

// 方法二：
function flatten(arr) {
    var res = [];
    arr.map(item => {
        if (Array.isArray(item)) {
            res = res.concat(flatten(item));
        } else {
            res.push(item);
        }
    });
    return res;
}

2.3 利用 reduce 递归

// 方法三：
function flatten(arr) {  
    return arr.reduce((result,)=> {
        return result.concat(Array.isArray(item) ? flatten(item) : item);
    }, []);
}

3. 利用 toString

调用数组的toString方法，将数组变为字符串然后再用split分割还原为数组

function flatten(arr) {
    return arr.toString().split(',').map(function(item) {
        return Number(item);
    })
}

4. 利用 join

和上面的toString一样，join也可以将数组转换为字符串

function flatten(arr) {
    return arr.join(',').split(',').map(function(item) {
        return parseInt(item);
    })
}

5. 利用正则

利用正则去掉中间所有的 ​​[​​​ ​​]​​，直接粗暴

function flatten(arr) {
  let str = JSON.stringify(arr);
  str = str.replace(/(\[|\])/g, '');
  str = '[' + str + ']';
  return JSON.parse(str); 
};

总结

虽然说写了好几种方法，但是核心也只有一个：

遍历数组 arr，若 ​​arr[i]​​ 为数组则递归遍历，直至 ​​arr[i]​​ 不为数组然后与之前的结果 ​​concat​​