js-es10

ES10 还只是一个草案。但是除了 Object.fromEntries 之外，Chrome 的大多数功能都已经实现了，为什么不早点开始探索呢?当所有浏览器都开始支持它时，你将走在前面，这只是时间问题。

虽然有关Array有两个新的特性，不过今天不讲那么多，只来谈谈 flat。

  • Array.flat()
  • Array.flatMap()

Array.flat()

这是一个扁平化多维数组的新特性。

1
2
3
4
5
let arr = [1, [2, [3]]];
arr.flat();         /*[1, 2, Array(1)]*/
arr.flat().flat();  /*[1, 2, 3]*/
arr.flat(2);        /*[1, 2, 3]*/
arr.flat(Infinity); /*[1, 2, 3]*/

语法：Array.flat(n)，n 表示维度，当 n 值为 Infinity 时维度为无限大。

很棒的 api，不过作为 es10 的新特性，拜托！都9012年了，怎么会有人关注兼容性问题。俗话说得好，搞技术的怎么能知其然，而不知其所以然呢？盘它！（谁还记得是哪位老人家说的）

Es5写法

开始篇

1
2
3
4
5
6
7
8
9
let arr = [1,[2,[3]]];

function flat(arr){
  let temp = arr.toString();
  temp = temp.split(',');
  return(temp);
}

flat(arr);  /*['1', '2', '3']*/

使用 toString 方法将数组转化为字符串，在使用 split 对字符串进行裁剪，获得一个拉平之后的数组。

但这种方法存在缺陷，数组内的数据类型改变了。一般情况下肯定是希望将数组拉平的同时，其中的数据类型不变。

进阶篇

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

function flat(arr){
  for(let i = 0; i < arr.length; i++){
    Array.isArray(arr[i]) ? flat(arr[i]) : newArr.push(arr[i]);
  }
}

flat(arr);

newArr;     /*[1, 2, 3]*/

这样，使用递归来拉平数组，获得的新数组内数据类型将不发生改变。

好了 es5 写法就搞这么多，再来看看 es6 写法。

Es6写法

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

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

flat(arr);    /*[1, 2, 3]*/

本质是利用递归与数组合并方法 concat 实现扁平化。