js中数组扁平化几种方式

数组扁平化概念

扁平化:其实就是将多层数组展开，平摊成为一维数组

> let arr1=[[1],[2,3],[4]];
> //扁平化后--> [1, 2, 3, 4]

实现扁平化方式

1. ES6新增加方法–>Array​.prototype​.flat() + Infinity作为参数

数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维数组。该方法返回一个新数组，对原数据没有影响

//flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1
[[1], [2, 3], [4]].flat()
//[1, 2, 3, 4]

[[1, [2, 3], 4], 5].flat()
//[1, [2, 3], 4, 5]

[[1, [2, 3], 4], 5].flat(2)
//[1, 2, 3, 4, 5]

//...依次类推

//使用Infinity代表参数，不管多少层都可以扁平化
[[1, [2, 3], 4], 5].flat(Infinity)
//[1, 2, 3, 4, 5]

2. 循环+扩展运算符. . .

let arr= [ [1, [2, 3], 4], 5 ];
function flat(arr) {
	while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
     }
    return arr;
 }
console.log(flat(arr));

3. toString/join转换为字符串，然后使用split分割为数组，再通过遍历将字符串转换为数字类型

let arr1 = [ [1, [2, 3], 4], 5 ];

//-----------toString-------------
let res = arr1.toString().split(',').map(item => Number(item));
console.log(res);//[1, 2, 3, 4, 5]

//-----------join-------------
let res = arr1.join().split(',').map(item => Number(item));
console.log(res);//[1, 2, 3, 4, 5]

4. 循环+递归

let arr = [ [1, [2, 3], 4], 5 ];
 function flat(arr) {
   let result = [];
   arr.map(item => {
     if (Array.isArray(item)) {
       result = result.concat(flat(item));
     } else {
       result.push(item);
     }
   });
   return result;
 }
 console.log(flat(arr));

往期精彩文章

• 一篇文章带你揭秘现代浏览器原理
• 带你深入理解什么叫js闭包
• 使用Object.defineProperty进行数据劫持,实现响应式原理-剖析vue2.0
• 前端性能优化之rel=“prefetch“预/懒加载功能
• 前端唤起相机的方法H5+JS
• docker下YApi部署教程-支持swagger数据导入