在 JavaScript 开发中,数组扁平化(flatten)是一项非常基础且重要的操作。扁平化可能涉及到将多维数组转化为一维数组,或者将一个数组中的嵌套数组展开成一个新的数组。在 ECMAScript 2020 中,引入了一些新的扁平化方法,本文将详细讲解它们的用法和效果,并为读者带来一些学习和指导意义。
什么是数组扁平化?
在 JavaScript 中,数组扁平化是指将多维数组合并成一维数组的操作。下面是一些扁平化前后的数组示例:
----- ---- - --- -- --- ---- ----- ---- - --- --- --- ----- ----- ---- - --- --- --- ------- -------------- -- --- -- -- -- -------------- -- --- -- -- -- -------------- -- --- -- -- --
数组扁平化在实际开发中非常常见,特别是在处理数据的时候。
ES2020 中的数组扁平化方法
在 ECMAScript 2020 中,有三种新的数组扁平化方法,它们分别是:
Array.prototype.flat()
Array.prototype.flatMap()
Array.prototype.at()
下面我们会逐一对它们进行讲解。
Array.prototype.flat()
Array.prototype.flat()
方法用于将多维数组扁平化成一维数组。这个方法接受一个可选参数,可以指定扁平化的深度。默认深度为 1
。
下面是一个简单的示例:
----- --- - ---- --- --- ---- ----- --------- - ----------- ----------------------- -- --- -- -- --
可以看到,在上面的代码中,arr.flat()
扁平化了 arr
数组并返回一个新的一维数组 flattened
。
我们也可以指定深度参数:
----- --- - ----- -- --- ---- ------------ -- --- -- -- -- ------------ -- --- -- -- --
在上面的例子中,第一个 flat
方法使用了默认的深度 1
,第二个 flat
方法使用了深度 2
。
需要注意的是,flat()
返回一个新的一维数组,并不会修改原数组。
Array.prototype.flatMap()
Array.prototype.flatMap()
方法其实是 map
和 flat
两个方法的结合,它将每个元素先进行映射,然后再将结果扁平化成一个新的数组。
下面是一些 examples:
----- --- - --- -- --- ----- ------ - ----------- -- -- - ---- -------------------- -- ----- ---- ---- ----- --------- - --------------- -- -- - ---- ----------------------- -- --- -- --
在上面的代码中,flatMap()
先将每个元素 [1, 2, 3]
都进行了乘 2
的操作,得到了一个嵌套的数组 [[2], [4], [6]]
,然后使用 flat()
方法将其扁平化成了一个一维数组 [2, 4, 6]
。
同样的,flatMap()
方法也可以接受深度参数,用法和 flat()
方法一致。
Array.prototype.at()
Array.prototype.at()
是 ECMAScript 2020 中最后一个新增的数组方法。它允许我们基于数组索引访问数组中的元素,可以说是一个更加安全的访问方式,不会产生异常。
它不同于常用的索引访问方式,常用的索引访问方式访问不存在的索引时,将返回 undefined
:
----- --- - --- -- --- -------------------- -- ---------
但是,使用 Array.prototype.at()
访问不存在的索引时,将会抛出一个 RangeError
:
----- --- - --- -- --- ----------------------- -- -- ---------- --
同样的,at()
方法也可以设定负数索引。例如:
----- --- - --- -- --- ----- -------- - ----------- -- -
需要注意的是,如果使用了不是数字类型的索引,at()
也会抛出 TypeError
错误。
总结
ECMAScript 2020 中新增了三个数组扁平化方法:
Array.prototype.flat()
用于将多维数组扁平化成一维数组。Array.prototype.flatMap()
用于将数组的每个元素做映射,然后将结果扁平化成新的一维数组。Array.prototype.at()
允许我们基于数组索引访问数组中的元素,避免了访问不存在索引的异常。
当然,这些方法不仅仅只是扁平化,了解它们的原理和用法对于我们在日常开发,特别是处理数据的时候会非常有用。希望这篇文章对你有所帮助。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6461ea44968c7c53b033fd0a