ES6对array数组类型做的常用升级优化
ES6 对数组类型进行了多项升级和优化，引入了许多新特性，使得数组操作更加方便和强大。以下是 ES6 对数组类型的常用升级和优化：
- 扩展运算符（Spread Operator）
- 使用
...可以将数组展开为逗号分隔的序列。 - 常用于数组的复制、合并、函数参数传递等场景。
示例：
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
// 复制数组
const copy = [...arr1];
console.log(copy); // 输出：[1, 2, 3]
// 合并数组
const merged = [...arr1, ...arr2];
console.log(merged); // 输出：[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 = new Array(3); // 创建一个长度为 3 的空数组
const arr2 = Array.of(3); // 创建一个包含单个元素 3 的数组
console.log(arr1); // 输出：[ , , ]
console.log(arr2); // 输出：[3]
- 新增数组方法
ES6 为数组添加了一些实用的方法，简化了常见操作。
find()
- 返回数组中第一个满足条件的元素，如果没有找到则返回
undefined。
示例：
const arr = [1, 2, 3, 4, 5];
const result = arr.find(item => item > 3);
console.log(result); // 输出：4
findIndex()
- 返回数组中第一个满足条件的元素的索引，如果没有找到则返回
-1。
示例：
const arr = [1, 2, 3, 4, 5];
const index = arr.findIndex(item => item > 3);
console.log(index); // 输出：3
fill()
- 用指定的值填充数组。
示例：
const arr = [1, 2, 3];
arr.fill(0); // 将数组填充为 [0, 0, 0]
console.log(arr);
includes()
- 判断数组是否包含指定的值，返回布尔值。
示例：
const arr = [1, 2, 3];
console.log(arr.includes(2)); // 输出：true
flat()
- 将嵌套数组“拉平”，返回新数组。默认拉平一层，可以通过参数指定拉平的层数。
示例：
const arr = [1, [2, [3, [4]]]];
console.log(arr.flat()); // 输出：[1, 2, [3, [4]]]
console.log(arr.flat(2)); // 输出：[1, 2, 3, [4]]
console.log(arr.flat(Infinity)); // 输出：[1, 2, 3, 4]
flatMap()
- 先对数组中的每个元素执行映射操作，然后将结果“拉平”一层。
示例：
const arr = [1, 2, 3];
const result = arr.flatMap(x => [x, x * 2]);
console.log(result); // 输出：[1, 2, 2, 4, 3, 6]
- 数组解构
ES6 支持对数组进行解构赋值，方便提取数组中的元素。
示例：
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a, b, c); // 输出：1 2 3
// 跳过某些元素
const [x, , z] = arr;
console.log(x, z); // 输出：1 3
// 默认值
const [p, q, r = 10] = [1, 2];
console.log(p, q, r); // 输出：1 2 10
for...of循环
- 用于遍历数组中的元素，比传统的
for循环更简洁。
示例：
const arr = [1, 2, 3];
for (const item of arr) {
console.log(item); // 依次输出：1, 2, 3
}
Array.prototype.keys()、values()和entries()
- 返回数组的键、值或键值对的迭代器。
示例：
const arr = ["a", "b", "c"];
// 获取键
for (const key of arr.keys()) {
console.log(key); // 依次输出：0, 1, 2
}
// 获取值
for (const value of arr.values()) {
console.log(value); // 依次输出：a, b, c
}
// 获取键值对
for (const [index, value] of arr.entries()) {
console.log(index, value); // 依次输出：0 a, 1 b, 2 c
}
Array.prototype.copyWithin()
- 将数组的一部分复制到同一数组的另一位置，覆盖原有元素。
示例：
const arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3); // 将索引 3 到末尾的元素复制到索引 0 开始的位置
console.log(arr); // 输出：[4, 5, 3, 4, 5]
总结
ES6 对数组的升级和优化使得数组操作更加方便和强大，主要包括：
- 扩展运算符（
...）用于数组的复制、合并和函数参数传递。 Array.from()和Array.of()用于创建数组。- 新增方法（
find()、findIndex()、fill()、includes()、flat()、flatMap()等）。 - 数组解构赋值。
for...of循环用于遍历数组。keys()、values()和entries()用于获取数组的键、值和键值对。copyWithin()用于数组内部的复制。
这些特性极大地提升了 JavaScript 中数组的处理能力，使代码更简洁、更易读。
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
