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

282 阅读1分钟

1. 普通递归实现

function flatten(arr) {
  let result = [];

  for(let i = 0, len = arr.length; i < len; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flatten(arr[i]));
    } else {
      result.push(arr[i]);
    }
  }

  return result;
}

var a = [1, [2, [3, 4, 5]]];
console.log(flatten(a)) //  [1, 2, 3, 4,5]

2. 利用 reduce 函数迭代

function flatten(arr) {
  return arr.reduce((prev, next) => (
    prev.concat(
      Array.isArray(next) ? flatten(next) : next
    )
  ), [])
}

3. 扩展运算符实现

function flatten(arr) {
  while (arr.some(item => Array.isArray(item))) {
    arr = [].concat(...arr);
  }

  return arr;
}

先用数组的 some 方法把数组中仍然是组数的项过滤出来,然后执行 concat 操作,利用 ES6 的展开运算符,将其拼接到原数组中,最后返回原数组


4. splittoString 共同处理

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

5. 调用 ES6 中的 flat

arr.flat([depth]):其中 depth 是 flat 的参数,depth 是可以传递数组的展开深度(默认不填、数值是 1),即展开一层数组

function flatten(arr) {
  return arr.flat(Infinity);
}

6. 正则和 JSON 方法共同处理

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

  return JSON.parse(str); 
}

其中先把传入的数组转换成字符串,然后通过正则表达式的方式把括号过滤掉

通过这个在线网站 regexper.com/ 可以把正则分析成容易理解的可视化的逻辑脑图。其中我们可以看到,匹配规则是:全局匹配(g)左括号或者右括号,将它们替换成空格,最后返回处理后的结果。之后拿着正则处理好的结果重新在外层包裹括号,最后通过 JSON.parse 转换成数组返回


7. 总结

方法实现难度编码思路
递归实现递归实现,返回新数组
reduce实现reduce进行累计操作
扩展运算符实现筛选出数组进行连接
splittoString转成字符串再转数组
flat方法特定功能方法直接操作
正则和 JSON 方法JSON方法转成字符串转回过程中正则处理