在面试中被问到“ES6中数组新增了哪些扩展？”这种问题，一开始我总以为是考基本功，但仔细一想，这些扩展功能其实有助于提升代码质量和开发效率。这篇文章我们就深入解读一下ES6新增的数组扩展，挖掘其在实际开发中的亮点。
扩展运算符 ...
ES6带来了一个特别实用的工具——扩展运算符...。它的作用是把数组转换成用逗号分隔的参数序列，非常便于在函数调用和数组操作中简化代码。例如：
console.log(...[1, 2, 3]); // 输出：1 2 3
扩展运算符可以帮助我们把数组直接展开，甚至还可以将数组内容直接传入函数。试想一下，如果没有这个特性，我们可能需要手动遍历数组，实在是麻烦。扩展运算符一出，轻松解决了这个痛点。
比如，把一个数组传入加法函数：
function add(x, y) {
return x + y;
}
const numbers = [4, 38];
console.log(add(...numbers)); // 输出：42
这种操作不仅简洁而且直观，尤其在需要动态调整参数时非常有用。此外，扩展运算符还能用于数组的复制和合并：
const arr1 = [1, 2];
const arr2 = [...arr1]; // 复制arr1
console.log(arr2); // 输出：[1, 2]
用扩展运算符合并数组同样是个简单粗暴的好办法：
const a = [1, 2];
const b = [3, 4];
const c = [...a, ...b];
console.log(c); // 输出：[1, 2, 3, 4]
需要注意的是，扩展运算符实现的是浅拷贝，修改引用类型的数据时会反映在所有浅拷贝的数组中。
Array.from() 和 Array.of()
ES6为我们带来了Array.from()和Array.of()两个新的构造方法，用来更灵活地处理类数组对象和其他数据。
首先，Array.from()可以将类数组对象或可迭代对象转化为真正的数组，简直是解救开发者的福音：
let arrayLike = {
0: 'a',
1: 'b',
2: 'c',
length: 3
};
let arr = Array.from(arrayLike); // 输出：['a', 'b', 'c']
Array.from()还可以带一个回调函数参数，用来处理每个元素，非常灵活：
let squared = Array.from([1, 2, 3], x => x * x);
console.log(squared); // 输出：[1, 4, 9]
而Array.of()则是为了解决Array()构造函数的混乱表现。Array.of()让我们创建一个包含指定值的新数组：
Array.of(7); // 输出：[7]
Array.of(1, 2, 3); // 输出：[1, 2, 3]
新增的实例方法
ES6还为数组实例添加了很多实用的方法，让我们在日常操作中更加得心应手。
find() 和 findIndex()
find()方法返回数组中第一个符合条件的元素，而findIndex()则返回符合条件的元素的索引，没找到返回-1。比如我们想找出数组中第一个大于9的值：
const arr = [1, 5, 10, 15];
console.log(arr.find(x => x > 9)); // 输出：10
console.log(arr.findIndex(x => x > 9)); // 输出：2
这两个方法也支持this绑定参数，让代码更灵活。
fill()
fill()方法可以给数组指定范围的元素赋予相同的值，是处理数组的一大利器：
const arr = new Array(3).fill(7);
console.log(arr); // 输出：[7, 7, 7]
这在初始化一个值相同的数组时非常省事，也可以指定填充的起止位置：
const arr = ['a', 'b', 'c'];
arr.fill(7, 1, 2);
console.log(arr); // 输出：['a', 7, 'c']
值得注意的是，fill()也是浅拷贝。
entries()，keys()，values()
entries()，keys()，values()这三个方法分别用于遍历数组的键值对、键名和键值，非常适合用于循环：
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem); // 输出：0 'a' 和 1 'b'
}
includes()
includes()方法可以判断数组中是否包含某个值，用法简单明了：
const arr = [1, 2, 3];
console.log(arr.includes(2)); // 输出：true
console.log(arr.includes(4)); // 输出：false
flat() 和 flatMap()
flat()和flatMap()用于数组的扁平化操作，尤其适合处理嵌套数组。flat()默认拉平一层，想要多层可以指定层数：
const arr = [1, [2, [3, 4]]];
console.log(arr.flat(2)); // 输出：[1, 2, 3, 4]
flatMap()既可以扁平化又能映射元素，非常高效：
console.log([2, 3, 4].flatMap(x => [x, x * 2])); // 输出：[2, 4, 3, 6, 4, 8]
空位和排序稳定性
ES6对数组的空位（数组中的“空元素”）进行了优化处理，许多数组方法都会将空位当成undefined处理。比如Array.from()、copyWithin()、fill()等方法会将空位填充为undefined。
最后，ES6还确保了sort()方法的排序稳定性。在我们处理排序操作时，尤其是需要保持元素的原始相对位置时，这个特性相当有用。
如果面试官问：“ES6中数组新增了哪些扩展？”你可以这样回答：
ES6对数组扩展的内容相当丰富，主要包括以下几点：
**扩展运算符 ...**：可以将数组转换为参数序列，支持数组的复制和合并操作。Array.from() 和 **Array.of()**： Array.from()将类数组或可遍历对象转为数组，Array.of()用于根据参数创建数组，避免了Array()的混乱行为。新增的实例方法：包括 find()、findIndex()、fill()、entries()、keys()、values()和includes()，简化了数组的操作。**flat() 和 flatMap()**：用于数组扁平化处理。 空位处理和排序稳定性：ES6对数组的空位处理更为合理，同时保证了 sort()的稳定性。
目前，对编程、职场感兴趣的同学，大家可以联系我微信：golang404，拉你进入“程序员交流群”。
虎哥私藏精品 热门推荐 虎哥作为一名老码农，整理了全网最全《前端资料合集》。
