大家好，我是宝哥
数组是JavaScript开发中常见的数据结构之一。ES14新增了6个数组实例方法，不仅方便我们操作和查询数组，也避免修改原数组。本文将详细解释这些新方法的语法和作用，并通过示例代码帮助你上手使用。
一、排序方法
toSorted()
语法:
arr.toSorted([compareFunction])
作用:根据compareFunction排序数组元素，返回一个新的排好序的数组,不修改原数组。
示例:
const numbers = [5, 4, 2, 3, 1];
const sortedNums = numbers.toSorted((a, b) => a - b);
console.log(sortedNums); // [1, 2, 3, 4, 5]
此例按数值从小到大升序排列数组元素，返回新数组而不改变原数组numbers。
toReversed()
语法:
arr.toReversed()
作用:反转数组元素顺序,返回一个新的反转数组。
示例:
const arr = [1, 2, 3];
const reversedArr = arr.toReversed();
console.log(reversedArr); // [3, 2, 1]
反转数组而不修改原数组arr。
二、修改方法
with()
语法:
arr.with(index, newValue)
作用:用新值替换指定索引位置的元素，返回一个新的数组。
示例:
const colors = ['red', 'blue', 'green'];
const newColors = colors.with(1, 'yellow');
console.log(newColors); // ['red', 'yellow', 'green']
用’yellow’替换索引1位置的’blue’，返回新数组而不改变原数组colors。
三、查询方法
findLast()
语法:
arr.findLast(callback[, thisArg])
作用:从后向前查询符合条件的最后一个元素。
示例:
const nums = [1, 5, 3, 4, 2];
const lastEven = nums.findLast(n => n % 2 === 0);
console.log(lastEven); // 2
查找最后一个偶数。
2:支持传递thisArg来设置匹配函数的this上下文。
复杂示例:
// 定义一个对象
const obj = {
testValue: 10
};
// 使用对象作为thisArg
const nums = [5, 15, 10, 20];
const lastMatch = nums.findLast(function(num) {
return num % this.testValue === 0;
}, obj);
console.log(lastMatch); // 20
在这个例子中,我们定义了一个对象obj，其中有一个属性testValue的值为10。 然后将obj作为thisArg传入findLast()方法，这样在匹配函数内部,this就指向obj对象，所以能够直接通过this.testValue来使用对象属性作为匹配标准，找到数组最后一个可以整除testValue的值10的元素。
findLastIndex()
语法:
arr.findLastIndex(callback[, thisArg])
作用:从后向前查找匹配元素的索引，而不是元素本身。
示例:
const nums = [1, 5, 3, 4, 2];
const lastEvenIndex = nums.findLastIndex(n => n % 2 === 0);
console.log(lastEvenIndex); // 4
此例通过匹配函数n%2===0，返回数组最后一个偶数元素的索引4。
findLastIndex()与findLast()功能相似，但前者返回匹配元素的索引，后者返回匹配元素本身。
四、拼接方法
toSpliced()
语法:
arr.toSpliced(start, deleteCount, ...items)
作用:在指定位置插入/删除元素，返回新的数组。
示例:
const colors = ['red', 'green', 'blue'];
// 在索引1位置插入'yellow','pink'
const newColors = colors.toSpliced(1, 0, 'yellow', 'pink');
console.log(newColors);
// ['red', 'yellow', 'pink', 'green', 'blue']
此例在colors数组索引1位置插入两个新元素，并返回结果而不修改原数组。
五、shebang支持
ES14正式支持shebang，这将方便在Node.js环境下用JS编写可执行脚本。
语法:
#!/usr/bin/env node
在JS文件起始位置增加上述shebang语句，告诉系统使用node来运行该脚本。
示例:
#!/usr/bin/env node
console.log('Hello World');
保存为hello.js后，在命令行直接运行./hello.js即可执行输出。
六、WeakMap键扩展
ES14允许Symbol作为WeakMap的键类型之一。
示例:
const map = new WeakMap();
map.set(Symbol(), 'value');
以上就是ES14中对数组新增的一些常用方法，相信通过示例代码你已经对这些新方法有了初步的了解。希望本教程能帮助你快速上手利用这些方法开发更高效的JavaScript应用。
