快速了解 JavaScript ES2019 的五个新增特性之flat与flatMap(搬运)

ES2019 规范是对 JavaScript 的一个较小的补充,但它仍然带来了一些有用的功能。本文将向你展示五个 ES2019 新增的特性,这些特性或许可以让你的编程轻松一点。这些特性包括 trimStart()trimEnd()flat()flatMap()Object.fromEntries() 等。

flat() 方法

第一个是 flat(),中文可以理解为展开或扁平化的意思。它的作用是把多维数组扁平化为一维数组。默认情况下,flat() 只会展开第一层。如果你需要扁平化更多的层数或深度,你可以指定一个层数或深度值,作为参数传递。如果你不确定多少层,你也可以使用 Infinity,表示有多少层展开多少展。

// 创建一个数组:
const myArray = ['JavaScript', ['C', 'C++', ['Assembly', ['Bytecode']]]]

// 展开数组第一层
let myFlatArray = myArray.flat(1)
console.log(myFlatArray)
// Output:
// [ 'JavaScript', 'C', 'C++', [ 'Assembly', [ 'Bytecode' ] ] ]

// 有多少层展开多少层
let myInfiniteFlatArray = myArray.flat(Infinity)
console.log(myInfiniteFlatArray)
// Output:
// [ 'JavaScript', 'C', 'C++', 'Assembly', 'Bytecode' ]

flatMap() 方法

除了 flat() 方法外,还有 flatMap() 方法。你可以把这个方法看作是 flat() 的高级版本。不同的是,flatMap() 方法结合了 flat()map() 方法。当你扁平化一个数组时,你可以调用一个回调函数。这允许你在扁平化的过程中对原数组内部的单个元素进行处理。当你想扁平化一个数组,但同时又想修改内容时,这就很方便了。

// 创建一个数组:
const myArray = ['One word', 'Two words', 'Three words']

// 将数组中的字符串使用空格分隔
// 注意:这会创建一个二维数组
const myMappedWordArray = myArray.map((str) => str.split(' '))
console.log(myMappedWordArray)
// Output:
// [ [ 'One', 'word' ], [ 'Two', 'words' ], [ 'Three', 'words' ] ]

// flatMap() 示例
const myArray = ['One word', 'Two words', 'Three words']

// 将数组中的字符串使用空格分隔
const myFlatWordArray = myArray.flatMap((str) => str.split(' '))
console.log(myFlatWordArray)
// Output:
// [ 'One', 'word', 'Two', 'words', 'Three', 'words' ]

摘自:https://juejin.cn/post/6949767145953689631

posted @ 2021-06-03 09:59  几何柒期  阅读(288)  评论(0编辑  收藏  举报