ES10 为 JavaScript 数组新增了三个方法，分别是 Array.prototype.flat()、Array.prototype.flatMap() 和 Array.prototype.at()。这些新方法可以大大简化前端开发中复杂数组操作的问题。本文将详细介绍这三个方法的功能和用法，并为读者提供实用的示例代码和实践建议。
flat()
Array.prototype.flat() 可以将一个多维数组“压扁”为一维数组。在 JavaScript 中，数组是可以嵌套的，即数组的元素还可以是数组，这样就形成了多维数组。使用 flat() 方法可以将多维数组的所有元素打散，并返回一个一维数组。flat() 方法接受一个参数，表示“压扁”的层数。
语法
var newArray = arr.flat([depth]);
其中：
newArray是“压扁”得到的一维数组。arr是原始数组，可以是任意维度。depth是可选参数，表示“压扁”的层数，默认为 1。
示例
-- -------------------- ---- ------- -- ---- --- ---- - --- -- --- ---- --- ---- - --- -- --- --- ----- -- -- ------ -- --- ------- - ------------ --- ------- - ------------- --------------------- -- --- -- -- -- --------------------- -- --- -- -- -- --
上面的示例中，arr1 是一个二维数组，arr2 是一个三维数组。使用 flat() 方法将它们“压扁”为一维数组。
flatMap()
Array.prototype.flatMap() 方法与 flatMap() 方法类似，但是它在“压扁”多维数组的同时还可以对数组中的每个元素执行一个映射函数，实现更强大的数组操作。
语法
var newMappedArray = arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])
其中：
newMappedArray是映射得到的新数组。arr是原始数组。callback是一个函数，表示在“压扁”数组的同时，对每个元素执行的映射函数。该函数接受三个参数：currentValue：表示当前元素的值。index：表示当前元素的索引。array：表示原始数组。
thisArg是可选参数，表示在callback中使用的this值。
示例
-- -------------------- ---- ------- -- ---- --- --- - --- -- --- -- -- --------- -- --- -------------- - ----------------------------- - ------ ------- - -- --- ---------------------------- -- --- -- --
上面的示例中，callback 函数返回每个元素的两倍，最终得到新数组。
at()
Array.prototype.at() 方法可以返回数组指定位置的元素。该方法接受一个参数 index，表示需要返回的元素在数组中的索引。如果 index 为负数，表示从数组末尾开始算起。
语法
var element = arr.at(index);
其中：
element是指定位置的数组元素。arr是原始数组。index是需要返回的元素在数组中的索引。
示例
-- -------------------- ---- ------- -- ---- --- --- - --- -- -- -- --- -- -- ---- -- --- -------- - ---------- -- - - ------ - --- -------- - ----------- -- --- - ------ - ---------------------- ----------------------
上面的示例中，使用 at() 方法返回了数组的指定元素。
结论
在前端开发中，数组操作是非常常见的问题。ES10 中新增的 flat()、flatMap() 和 at() 方法可以大大简化复杂数组操作问题。使用这些新方法，可以使代码更加简洁、易读。同时，开发者还应该注意遵循最佳实践，谨慎使用 ES10 中的新特性，以确保代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f29385a44b36ee57666d7d