2. ES6中数组新增了哪些扩展？

一、先给面试官一个总览

如果面试官问“ES6 中数组新增了哪些扩展？”，不要一上来就零散背 API。
更好的答法是先分层：

ES6 对数组的扩展，我一般会从创建方式、实例方法、遍历方式、类数组转换、查找能力、迭代器支持这几个方面来回答。
比较常见的有Array.from()、Array.of()、find()、findIndex()、fill()、copyWithin()、entries()、keys()、values()，以及扩展运算符...在数组中的应用。

这样开头会显得你很有条理。

二、ES6 中数组新增了哪些扩展？

1）扩展运算符...

这个虽然不算“数组原型方法”，但它是 ES6 中数组最常用的扩展之一。

作用

可以把数组“展开”。

const arr = [1, 2, 3] console.log(...arr) // 1 2 3

常见用途

（1）数组合并

const a = [1, 2] const b = [3, 4] const c = [...a, ...b] console.log(c) // [1, 2, 3, 4]

（2）数组拷贝

const arr1 = [1, 2, 3] const arr2 = [...arr1]

（3）配合函数传参

const nums = [1, 2, 3] console.log(Math.max(...nums))

面试加分点

扩展运算符本质上是基于可迭代对象（Iterator）展开的，所以不只是数组，像字符串、Set 也可以使用。

2）Array.from()

作用

把类数组对象或可迭代对象转换成真正的数组。

示例 1：将类数组转数组

const arrayLike = { 0: 'a', 1: 'b', length: 2 } const arr = Array.from(arrayLike) console.log(arr) // ['a', 'b']

示例 2：将 NodeList 转数组

const divs = document.querySelectorAll('div') const arr = Array.from(divs)

示例 3：第二个参数做映射

const arr = Array.from([1, 2, 3], x => x * 2) console.log(arr) // [2, 4, 6]

面试亮点

Array.from()很重要，因为它统一了类数组和可迭代对象转数组的方式，很多以前依赖slice.call()的写法都可以被它替代。

3）Array.of()

作用

用于将一组值转换成数组。

Array.of(1, 2, 3) // [1, 2, 3]

为什么需要它？

因为Array()构造函数在参数个数不同时行为不一致。

Array(3) // [empty × 3] Array(1, 2) // [1, 2]

而Array.of()更统一：

Array.of(3) // [3]

面试加分说法

Array.of()主要是为了解决Array()构造函数参数语义不一致的问题。

4）find()

作用

查找数组中第一个满足条件的元素，找到就返回该元素，否则返回undefined。

const arr = [1, 2, 3, 4] const res = arr.find(item => item > 2) console.log(res) // 3

面试时可以顺带区分

• find()返回的是元素值
• filter()返回的是所有符合条件的数组

5）findIndex()

作用

查找数组中第一个满足条件的元素下标，找不到返回-1。

const arr = [10, 20, 30] const index = arr.findIndex(item => item === 20) console.log(index) // 1

面试加分点

find()和findIndex()很适合“找到就停止”的场景，语义上比for循环更清晰。

6）fill()

作用

用一个固定值填充数组。

const arr = new Array(3).fill(0) console.log(arr) // [0, 0, 0]

也可以指定起始和结束位置

const arr = [1, 2, 3, 4] arr.fill(9, 1, 3) console.log(arr) // [1, 9, 9, 4]

注意点

如果填充的是引用类型，要注意共享引用问题。

const arr = new Array(3).fill({}) arr[0].name = 'Tom' console.log(arr) // [{name:'Tom'}, {name:'Tom'}, {name:'Tom'}]

这个点说出来很加分。

7）copyWithin()

作用

在当前数组内部，将指定位置的成员复制到其他位置，会修改原数组。

语法

arr.copyWithin(target, start, end)

示例

const arr = [1, 2, 3, 4, 5] arr.copyWithin(0, 3) console.log(arr) // [4, 5, 3, 4, 5]

理解

把从索引3开始的内容，复制到索引0的位置。

面试建议

这个方法实际业务中用得不算特别多，但知道它说明你对 ES6 数组 API 比较熟。

8）entries()、keys()、values()

这三个方法用于返回数组的迭代器对象。

keys()

返回索引的迭代器

const arr = ['a', 'b', 'c'] for (let key of arr.keys()) { console.log(key) } // 0 1 2

values()

返回值的迭代器

for (let value of arr.values()) { console.log(value) } // a b c

entries()

返回键值对的迭代器

for (let [index, value] of arr.entries()) { console.log(index, value) } // 0 'a' // 1 'b' // 2 'c'

面试亮点

这些方法体现了 ES6 对迭代器和for...of的统一支持，数组不再只是“下标访问”，也可以通过迭代协议来遍历。

9）includes()

严格来说它是ES7的内容，不是 ES6。
但面试中经常会被放在一起问，你最好主动说明。

作用

判断数组是否包含某个值。

const arr = [1, 2, 3] console.log(arr.includes(2)) // true

为什么比indexOf()更好？

[NaN].indexOf(NaN) // -1 [NaN].includes(NaN) // true

面试加分说法

includes()虽然不是 ES6，而是 ES7，但实际面试里常会一起问。它比indexOf()语义更清晰，而且能正确判断NaN。

三、ES6 对数组遍历方式的增强

这个部分单独说，会让答案更丰满。

1）for...of

ES6 新增了for...of，可以直接遍历数组值。

const arr = [10, 20, 30] for (const item of arr) { console.log(item) }

与for...in的区别

• for...in：遍历键名/索引
• for...of：遍历值

面试加分点

遍历数组时，一般更推荐for...of而不是for...in，因为for...in更适合遍历对象属性。

四、面试时怎么回答更精彩？

你不要只是背 API，要体现“为什么有这些扩展”。

可以这样说：

ES6 对数组的增强，核心目标是让数组操作更统一、更语义化。
比如Array.from()解决了类数组转数组的问题，Array.of()解决了数组构造语义不统一的问题；
find()、findIndex()提供了更直接的查找方式；
fill()和copyWithin()增强了数组内容处理能力；
entries()、keys()、values()以及for...of则让数组更好地融入迭代器体系；
扩展运算符...也让数组拷贝、合并、传参这些操作变得更加简洁。

这段是“总结升华”，面试官会觉得你不是在背文档。

五、标准版面试回答

ES6 对数组主要新增了几类扩展。
第一类是创建和转换相关，比如Array.from()可以把类数组和可迭代对象转成真正数组，Array.of()可以更统一地根据参数创建数组。
第二类是实例方法，比如find()、findIndex()、fill()、copyWithin()。其中find()用来找第一个满足条件的元素，findIndex()返回对应下标，fill()可以批量填充值。
第三类是迭代相关的方法，比如keys()、values()、entries()，配合for...of可以更方便地遍历数组。
另外，扩展运算符...虽然不属于数组原型方法，但也是 ES6 中数组使用体验提升非常明显的一个特性，常用于数组拷贝、合并和函数传参。

如果从设计角度看，我觉得 ES6 对数组的增强主要是让数组操作更统一、更语义化，也让数组更好地融入了迭代器体系。

六、如果想答得更高级，可以补充这些点

1）Array.from()和扩展运算符的区别

都能把一些结构转成数组，但：

• Array.from()更适合处理类数组对象
• ...更适合处理可迭代对象

例如：

const nodeList = document.querySelectorAll('div') Array.from(nodeList)

并且Array.from()还能直接带映射函数。

2）find()和filter()的区别

• find()：找到第一个就返回，返回元素本身
• filter()：找出所有满足条件的元素，返回新数组

3）includes()不是 ES6

如果面试官故意考察细节，这点能体现你比较严谨。

七、对比总结表

八、精简版面试回答

如果时间比较短，可以这样说：

ES6 对数组的扩展主要有：
Array.from()，用于把类数组或可迭代对象转成真正数组；
Array.of()，用于更统一地创建数组；
find()和findIndex()，用于查找元素和下标；
fill()和copyWithin()，用于数组内容填充和内部复制；
keys()、values()、entries()，用于返回数组迭代器；
另外还有扩展运算符...，常用于数组合并、拷贝和传参。

我觉得 ES6 对数组的增强，核心是让数组操作更语义化，也让数组更好地支持迭代器和for...of。

九、一句话总结

面试官真正想听的是：

• 你是否知道ES6 新增了哪些数组能力
• 你能不能按分类来回答，而不是零散背 API
• 你是否理解这些扩展背后的设计意义
• 你能不能顺带说出几个实际开发中的高频用法