ES10里面的那些好用的小东西（falt，faltMap，trim）

简介

在ES10里面又增加了很多的一些API，有些是数组的，有些字符串的（正则），还有一些是Object的，这里我想聊的几个是我感觉比较好用，也用的比较多的几个小东西。

拍平数组不再烦恼了！！

在我们日常开发的过程中，经常会遇到有数组嵌套了很多层的那种情况，然后在运用的过程中需要把这些个数组给它拍平了。

例如电子书的目录，就会有一级目录，二级目录，三级目录等，而我们把这些渲染到目录里面的时候，是需要它只有一维的。

在ES10以前，想要把数组拍平，方法有很多，我比较常用的一个就是reduce配合递归来使用。

let data = [1,2,3,[4,5,[6,7]]]
function flat(arr) {
    let data =  arr.reduce((a,b)=>Array.isArray(b)?[...a,...flat(b)]:[...a,b],[])
    return data
}
console.log(flat(data)) 
// [1,2,3,4,5,6,7]

这个虽然也可以用，但是其实写起来挺麻烦的，还要用到递归。

但是，在ES10之后就不会有这个烦恼了，只需要使用一个数组新的API—— flat 就可以了，非常的方便！！

let data = [1,2,3,[4,5,[6,7]]]

let arr = data.flat(2)
console.log(arr);
//[1,2,3,4,5,6,7]

这就一句话的事，再看一下我之前那个递归…

这里需要说明flat的语法，它内部需要传入一个参数，也就是需要拍平的数组的深度，就好像我上面这个例子，有两层嵌套，也就是数组深度为2，那就直接传入2就可以了。

如果传入的深度大于或者小于需要拍平的数组深度的时候会怎么样呢

let data = [1,2,3,[4,5,[6,7]]]

console.log(data.flat(1));
console.log(data.flat(99));

得到的结果是这个

我想结果已经不用我说了吧！

如果实在不知道它的深度是多少，可以传入参数 Infinity，就是不管你的数组深度多少，都可以给你拍平了。

小小扩展

在ES10里面还有一个挺好同的的API就是——flatMap

它的作用有点类似于将Map和flat的一个组合使用，效果也是杠杠的。

它会对数组先进行map操作，然后再进行flat操作。但是这里的flat不能自己设置深度，而是有一个固定值1。

let arr = ['a','b','c']

let data1 = arr.map((item)=>{
    return item.split()
})

let data = arr.flatMap((item)=>{
    return item.split()
})
console.log(data1);
console.log(data);

这个也就是使用flatMap的一个方便之处了。

去首尾空格的好方法！！

在以前的时候，想要去除字符串的首尾空格，一般情况是使用正则的方式来去除，在ES10以后，去除字符串的首尾空格同样只需要一句话搞定，也就是—— trim

如果只是想删除头部的空格，可以使用 trimStart 或者 trimLeft ，效果都是一样的。

如果想要删除尾部的空格，可以使用 trimEnd 或者 trimRight 可以达到想要的效果。

如果首尾的空格一起去除的话，那就直接使用 trim 就可以了。

let data = '   data    '
console.log(data);
console.log(data.trimStart());
console.log(data.trimLeft());
console.log(data.trimEnd());
console.log(data.trimRight());
console.log(data.trim());

最后

ES10里面其实还有其它好玩东西增加了，只是我太菜了，不知道那些东西的运用场景，如果你有什么好的建议，欢迎评论区里面补充指正，如果感觉这篇文章对你有所帮助，点个赞吧！！