数组扁平化

2022-03-19 03:50:38

概念：数组扁平化是指将一个多维数组变为一维数组

[1, [2, 3, [4, 5]]]  ------>    [1, 2, 3, 4, 5]

方法一：通过concat将二维数组转化为一维数组

原理：通过将扩展运算符，将数组内部展开，并通过concat连接两个字符串的方式返回一个新的数组

let a = [12, 3, 45, [6, 7, 8]]
 console.log(a)   // [12, 3, 45, Array(3)]
 console.log([].concat(...a))  // [12, 3, 45, 6, 7, 8]

方法二：使用数组方法join和字符串方法split进行数组扁平化

原理：通过join方法将数组转化为以点隔开的字符串，在使用split把转化的字符串转化成字符串数组，通过。map方法将内部字符串转化数字类型的

let a = [4, 1, 2, 3, 6, [7, 8, [3, 9, 10, [4, 6, 11]]]];
let b = a.join(‘,‘).split(‘,‘).map(Number)
console.log(b) // [4, 1, 2, 3, 6, 7, 8, 3, 9, 10, 4, 6, 11]

方法三：通过正则方法和JSON.stringify方法和数组方法

原理：首先将数组转化为字符串使用字符串匹配正则规则替换所有的 ‘[‘ ‘]‘ 和方法二类似 split 主要是讲字符串转化为数组，map将字符串数组转化为数字

let a = [4, 1, 2, 3, 6, [7, 8, [3, 9, 10, [4, 6, 11]]]];
let c = JSON.stringify(a).replace(/\[|\]/g, ‘‘).split(‘,‘).map(Number);
console.log(c) // [4, 1, 2, 3, 6, 7, 8, 3, 9, 10, 4, 6, 11]

方法四：函数递归

原理：判断获取的当前值是不是数组，是数组就递归调用

let d = [];
let fn = arr => {
   for (let i = 0; i < arr.length; i++) {
     if (Array.isArray(arr[i])) {
         fn(arr[i]);
          } else {
            d.push(arr[i]);
          }
        }
     }
fn(a)
console.log(d) // [4, 1, 2, 3, 6, 7, 8, 3, 9, 10, 4, 6, 11]

方法五：通过reduce方法进行数组扁平化

原理：主要是通过reduce的依次执行，判断当前拿到的对象是不是数组，是数组就进行一次函数递归将内部所有数组扁平化（与方法四类似）

let a = [4, 1, 2, 3, 6, [7, 8, [3, 9, 10, [4, 6, 11]]]]; 
function flatten(arr) {
      return arr.reduce((result, item) => {
          console.log(result, item); // 查看结果你会发现，把每个数组进行拆分并取出
          return result.concat(Array.isArray(item) ? flatten(item) : item); 
        }, []);
     };
console.log(flatten(a)) // [4, 1, 2, 3, 6, 7, 8, 3, 9, 10, 4, 6, 11]

方法六：ES6新增方法flat()

let a = [4, 1, 2, 3, 6, [7, 8, [3, 9, 10, [4, 6, 11]]]]; 
let e = a.flat()   // 不传参的时候 表示将二维数组转一维数组
console.log(e)     // [4, 1, 2, 3, 6, 7, 8, Array(4)]
let f = a.flat(2)  // 传入2 表示将两层嵌套数组 转化为一维数组
console.log(f)     // [4, 1, 2, 3, 6, 7, 8, 3, 9, 10, Array(3)]
let g = a.flat(Infinity) // Infinity 使用这个关键字可以将所包含的所谓数组转化为一维数组
console.log(g)     // [4, 1, 2, 3, 6, 7, 8, 3, 9, 10, 4, 6, 11]