ES6中数组新增了哪些扩展
ES6（ECMAScript 2015）为数组引入了许多新的扩展和方法，使得数组的操作更加方便和强大。以下是 ES6 中数组的主要扩展：
- 扩展运算符（Spread Operator）
扩展运算符 (...) 可以将数组展开为单独的元素，常用于函数调用、数组拼接等场景。
示例：
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // 合并数组
console.log(combined); // 输出: [1, 2, 3, 4, 5, 6]
function sum(a, b, c) {
return a + b + c;
}
console.log(sum(...arr1)); // 输出: 6（展开数组作为参数）
Array.from()
将类数组对象（如 arguments、NodeList）或可迭代对象（如 Set、Map）转换为真正的数组。
示例：
const nodeList = document.querySelectorAll('div');
const arr = Array.from(nodeList); // 将 NodeList 转换为数组
console.log(arr);
Array.of()
创建一个包含任意数量参数的新数组，解决了 new Array() 的行为不一致问题。
示例：
const arr1 = Array.of(1, 2, 3); // 创建数组 [1, 2, 3]
const arr2 = new Array(3); // 创建长度为 3 的空数组
console.log(arr1); // 输出: [1, 2, 3]
console.log(arr2); // 输出: [empty × 3]
- 数组实例的新方法
ES6 为数组实例添加了许多实用的方法：
(1) find()
查找数组中第一个满足条件的元素，返回该元素；如果没有找到，返回 undefined。
示例：
const arr = [1, 2, 3, 4];
const result = arr.find(item => item > 2);
console.log(result); // 输出: 3
(2) findIndex()
查找数组中第一个满足条件的元素的索引，返回该索引；如果没有找到，返回 -1。
示例：
const arr = [1, 2, 3, 4];
const index = arr.findIndex(item => item > 2);
console.log(index); // 输出: 2
(3) fill()
用指定的值填充数组。
示例：
const arr = [1, 2, 3];
arr.fill(0); // 填充为 [0, 0, 0]
console.log(arr);
(4) includes()
判断数组是否包含某个值，返回布尔值。
示例：
const arr = [1, 2, 3];
console.log(arr.includes(2)); // 输出: true
console.log(arr.includes(4)); // 输出: false
(5) flat()
将嵌套数组“拉平”，返回一个新数组。默认拉平一层，可以通过参数指定拉平的层数。
示例：
const arr = [1, [2, [3]]];
console.log(arr.flat()); // 输出: [1, 2, [3]]
console.log(arr.flat(2)); // 输出: [1, 2, 3]
(6) flatMap()
先对数组中的每个元素执行映射操作，然后将结果拉平一层。
示例：
const arr = [1, 2, 3];
const result = arr.flatMap(x => [x * 2]);
console.log(result); // 输出: [2, 4, 6]
for...of循环
for...of 是遍历数组的新方式，直接获取数组的值（而不是索引）。
示例：
const arr = [1, 2, 3];
for (const value of arr) {
console.log(value); // 依次输出: 1, 2, 3
}
entries()、keys()和values()
这些方法返回数组的迭代器对象，分别用于获取数组的键值对、键或值。
示例：
const arr = ['a', 'b', 'c'];
// entries() 返回键值对
for (const [index, value] of arr.entries()) {
console.log(index, value); // 输出: 0 'a', 1 'b', 2 'c'
}
// keys() 返回键
for (const key of arr.keys()) {
console.log(key); // 输出: 0, 1, 2
}
// values() 返回值
for (const value of arr.values()) {
console.log(value); // 输出: 'a', 'b', 'c'
}
copyWithin()
将数组的一部分复制到同一数组的另一位置，并返回修改后的数组。
示例：
const arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3); // 从索引 3 开始复制到索引 0
console.log(arr); // 输出: [4, 5, 3, 4, 5]
Array.prototype[Symbol.iterator]
数组默认实现了迭代器协议，可以通过 Symbol.iterator 获取数组的迭代器。
示例：
const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();
console.log(iterator.next()); // 输出: { value: 1, done: false }
总结
ES6 为数组提供了许多强大的扩展和方法，包括：
- 扩展运算符 (
...) Array.from()和Array.of()- 新方法：
find()、findIndex()、fill()、includes()、flat()、flatMap()、copyWithin() - 新的遍历方式：
for...of、entries()、keys()、values()
这些扩展使得数组的操作更加简洁和高效，是现代 JavaScript 开发中不可或缺的工具。
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
