随着 Web 技术的不断升级，前端开发也在持续发展。其中，ES6 （ECMAScript 6）是一种新的 JavaScript 标准，引入了一些新的语法和特性来加强 JavaScript 的能力。本文将介绍 ES6 中的数组扩展方法，包括使用方式、例子、以及指导意义。
ES6 前的数组方法
在 ES6 之前，JavaScript 提供了已经非常完整的数组方法，主要有以下几个：
- push/pop：在数组的末尾添加/删除一个元素；
- shift/unshift：在数组的开头添加/删除一个元素；
- splice：替换、删除或添加任意位置的元素；
- slice：截取数组中的一部分；
- concat：合并多个数组或值到一个新数组；
- reverse：反转数组；
- sort：排序数组。
这些方法都是非常常用的，大家都应该非常熟练掌握。
ES6 中新增的数组方法
在 ES6 中，数组的功能得到了更多的扩展，新增了以下几个方法，它们会在我们的实际开发中发挥出极大的作用。
1. Array.from()
这个方法可以把一个类数组对象或可迭代对象（比如 Set、Map）转化为一个数组，并且在转化过程中可以进行一些操作（比如筛选、映射等）。
let s = new Set([1, 2, 3]); let arr = Array.from(s, x => x * x); console.log(arr); // [1, 4, 9]
2. Array.of()
这个方法可以创建一个由任意数量参数组成的新数组。
let arr = Array.of(1, 2, 3); console.log(arr); // [1, 2, 3]
3. find() 和 findIndex()
这两个方法在数组中查找符合条件的元素，并返回它的值或索引。它们采用相同的参数——一个回调函数，用于判断每个元素是否符合条件。
let arr = [1, 2, 3, 4, 5]; let result = arr.find(x => x > 3); // 返回第一个大于 3 的元素（4） let index = arr.findIndex(x => x > 3); // 返回第一个大于 3 的元素的索引（3） console.log(result, index);
4. fill()
这个方法可以用指定的值填充数组。
let arr = [1, 2, 3, 4, 5]; arr.fill(0); // [0, 0, 0, 0, 0]
5. copyWithin()
这个方法用来在数组内部复制一部分数据到另一个位置。
let arr = [1, 2, 3, 4, 5]; arr.copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]
6. entries()、keys() 和 values()
这三个方法用于遍历数组。它们返回一个数组迭代器，可以使用 for...of 循环遍历。
-- -------------------- ---- ------- --- --- - ----- ---- ----- --- ---- ---- -- -------------- - ------------------ -- --- -------- -------- ---- - --- ---- ---- -- ----------- - ------------------ -- ----- - --- ---- ---- -- ------------- - ------------------ -- ----------- -
总结
ES6 中的数组扩展方法，一定程度上增加了 JavaScript 数组的功能和灵活性，尤其是在开发过程中会遇到很多各种问题，这些数组扩展方法可以帮助我们更好地解决这些问题。熟练掌握这些方法，可以提高开发效率，降低开发成本，以及提升代码的可读性。
打造更好的 Web 世界，让我们一起加油！
示例代码
完整示例代码如下：
-- -------------------- ---- ------- -- ------------ --- - - --- ------- -- ---- --- --- - ------------- - -- - - --- ----------------- -- --- -- -- -- ---------- --- --- - ----------- -- --- ----------------- -- --- -- -- -- ------ - ----------- --- --- - --- -- -- -- --- --- ------ - ---------- -- - - --- -- ------- - ------ --- ----- - --------------- -- - - --- -- ------- - --------- ------------------- ------- -- ------ --- --- - --- -- -- -- --- ------------ -- --- -- -- -- -- -- ------------ --- --- - --- -- -- -- --- ----------------- -- --- -- --- -- -- -- -- -- ---------------- - -------- --- --- - ----- ---- ----- --- ---- ---- -- -------------- - ------------------ -- --- -------- -------- ---- - --- ---- ---- -- ----------- - ------------------ -- ----- - --- ---- ---- -- ------------- - ------------------ -- ----------- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653aec3e7d4982a6eb540615