ES10 中新增 Array 的方法实战：Array.flat()、Array.flatMap()、Array.at()
ES10 是 ECMAScript 的最新标准版本，也是 JavaScript 中的最新标准版本。随着开发人员的需求不断变化，JavaScript 中的新特性和新方法正在不断增加。在这个版本中，增加了三个新的数组方法：Array.flat()、Array.flatMap()、Array.at()。
这三种方法都是针对数组元素的操作。通过了解这些新方法的特点和使用方法，我们可以更好地使用 JavaScript，提高代码的效率。
一、Array.flat()
Array.flat() 方法可以将多维数组转换成一维数组。这个方法很实用，因为我们时常需要对嵌套数组进行展开操作，避免使用 for 循环嵌套遍历数组，节省代码的复杂性。
下面是 Array.flat() 的基本用法：
const arr = [ [1, 2], [[3, 4], 5], [6] ]; const flatArr = arr.flat(); console.log(flatArr); // [1, 2, [3, 4], 5, 6]
这段代码中，我们创建了一个嵌套了多层的数组，并使用 flat() 方法将其展开成了一维数组。
Array.flat() 方法同样支持设置展开的嵌套深度。我们可以传入一个数字参数，告诉该方法需要展开嵌套的层数。如果不传值，则默认为 1。
-- -------------------- ---- ------- ----- --- - - --- --- --- ----- --- --- - -- ------------------------ -- --- -- --- --- -- -- -- ------------------------- -- --- --- --- ---- -- -- -- ------------------------- -- --- -- --- --- -- -- -- ------------------------- -- --- -- -- -- -- -- --
在这个例子中，我们对一个多维数组进行了展开操作。我们使用 flat() 方法在默认深度下展开了数组，并在后面传入了一个数字参数表示需要展开的层数。最终得到了不同深度下的展开结果。
二、Array.flatMap()
Array.flatMap() 方法可以将数组中的每个元素都进行一个映射操作后，得到一个新的数组，然后将这个新数组进行展开，最终得到一个新的一维数组。这个方法既实用又方便，能够很好地解决在对数组中的每个元素进行映射计算后，需要对新数组再次进行操作的需求。
下面是 Array.flatMap() 的基本使用方法：
const arr = [1, 2, 3, 4, 5]; const newArr = arr.flatMap(x => [x * 2]); console.log(newArr); // [2, 4, 6, 8, 10]
在这段代码中，我们使用 flatMap() 方法对数组进行映射计算，并得到了一个新的数组，最后将新数组进行展开，得到最终的一维数组。
三、Array.at()
Array.at() 方法可以用于获取数组中指定位置的元素。这个方法的功能比较简单，在处理一些数组操作时也比较有用。借助 Array.at() 方法，我们可以更方便、快速地获取数组中的指定元素。
这是 Array.at() 的基本使用方法：
const arr = [1, 2, 3, 4, 5]; console.log(arr.at(2)); // 3 console.log(arr.at(-1)); // 5
在这个例子中，我们使用 at() 方法获取了数组中索引为 2 和 -1 的元素，得到了它们对应的值。
需要注意的是，在获取的位置不存在时，at() 方法会返回 undefined。如果我们传入的参数是一个不合法的索引，at() 方法同样会返回 undefined。
const arr = [1, 2, 3, 4, 5]; console.log(arr.at(6)); // undefined console.log(arr.at(-6)); // undefined
总结
在这篇文章中，我们讲解了 ES10 中的三种新数组方法：Array.flat()、Array.flatMap()、Array.at()。这些方法都非常实用，能够方便地解决数组操作的一些问题。熟练掌握它们能够提高我们的编程效率。
以上内容我们希望能够对你有所帮助，如果你觉得这篇文章对你有所启发，欢迎点赞、分享！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64619c43968c7c53b02f697a