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 也可以使用。2Array.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()的写法都可以被它替代。3Array.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()构造函数参数语义不一致的问题。4find()作用查找数组中第一个满足条件的元素找到就返回该元素否则返回undefined。const arr [1, 2, 3, 4] const res arr.find(item item 2) console.log(res) // 3面试时可以顺带区分find()返回的是元素值filter()返回的是所有符合条件的数组5findIndex()作用查找数组中第一个满足条件的元素下标找不到返回-1。const arr [10, 20, 30] const index arr.findIndex(item item 20) console.log(index) // 1面试加分点find()和findIndex()很适合“找到就停止”的场景语义上比for循环更清晰。6fill()作用用一个固定值填充数组。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}]这个点说出来很加分。7copyWithin()作用在当前数组内部将指定位置的成员复制到其他位置会修改原数组。语法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 比较熟。8entries()、keys()、values()这三个方法用于返回数组的迭代器对象。keys()返回索引的迭代器const arr [a, b, c] for (let key of arr.keys()) { console.log(key) } // 0 1 2values()返回值的迭代器for (let value of arr.values()) { console.log(value) } // a b centries()返回键值对的迭代器for (let [index, value] of arr.entries()) { console.log(index, value) } // 0 a // 1 b // 2 c面试亮点这些方法体现了 ES6 对迭代器和for...of的统一支持数组不再只是“下标访问”也可以通过迭代协议来遍历。9includes()严格来说它是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 对数组遍历方式的增强这个部分单独说会让答案更丰满。1for...ofES6 新增了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 对数组的增强主要是让数组操作更统一、更语义化也让数组更好地融入了迭代器体系。六、如果想答得更高级可以补充这些点1Array.from()和扩展运算符的区别都能把一些结构转成数组但Array.from()更适合处理类数组对象...更适合处理可迭代对象例如const nodeList document.querySelectorAll(div) Array.from(nodeList)并且Array.from()还能直接带映射函数。2find()和filter()的区别find()找到第一个就返回返回元素本身filter()找出所有满足条件的元素返回新数组3includes()不是 ES6如果面试官故意考察细节这点能体现你比较严谨。七、对比总结表扩展作用说明...展开数组合并、拷贝、传参常用Array.from()类数组/可迭代对象转数组可带映射函数Array.of()将参数转成数组解决Array()语义不统一find()找第一个符合条件的元素返回元素findIndex()找第一个符合条件的下标返回索引fill()用固定值填充数组会修改原数组copyWithin()数组内部复制会修改原数组keys()返回索引迭代器配合for...ofvalues()返回值迭代器配合for...ofentries()返回键值对迭代器配合解构使用for...of遍历数组值基于迭代器includes()判断是否包含某值实际是 ES7八、精简版面试回答如果时间比较短可以这样说ES6 对数组的扩展主要有Array.from()用于把类数组或可迭代对象转成真正数组Array.of()用于更统一地创建数组find()和findIndex()用于查找元素和下标fill()和copyWithin()用于数组内容填充和内部复制keys()、values()、entries()用于返回数组迭代器另外还有扩展运算符...常用于数组合并、拷贝和传参。我觉得 ES6 对数组的增强核心是让数组操作更语义化也让数组更好地支持迭代器和for...of。九、一句话总结面试官真正想听的是你是否知道ES6 新增了哪些数组能力你能不能按分类来回答而不是零散背 API你是否理解这些扩展背后的设计意义你能不能顺带说出几个实际开发中的高频用法