实用的 ECMAScript 2021 Array.prototype 属性介绍

JavaScript 是一种动态、弱类型语言，它在不断地发展和完善。ECMAScript 是 JavaScript 的标准化版本，它每年都会发布新的版本，为开发者提供更多的特性和工具。在 ECMAScript 2021 中，Array.prototype 中新增了一些实用的属性，让我们一起来了解一下。

1. Array.prototype.at()

at() 方法用于获取数组中指定位置的元素，它接受一个整数作为参数，表示要获取的元素的位置。如果传入的参数是负数，则表示从数组末尾开始计算位置。

const arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.at(0)); // 'a'
console.log(arr.at(-1)); // 'e'
console.log(arr.at(10)); // undefined

2. Array.prototype.flatMap()

flatMap() 方法对数组中的每个元素执行一个函数，并将结果压缩成一个新数组。与 map() 方法不同的是，flatMap() 方法会将结果数组中的每个元素都展开成一个新数组，并将这些新数组合并成一个新的数组。

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

3. Array.prototype.filter()

filter() 方法用于筛选出数组中符合条件的元素，并返回一个新数组。它接受一个函数作为参数，这个函数会被传入每个元素和它的索引，如果函数返回 true，则表示这个元素符合条件，会被加入到新数组中。

const arr = [1, 2, 3, 4, 5];
console.log(arr.filter(x => x % 2 === 0)); // [2, 4]

4. Array.prototype.find() 和 Array.prototype.findIndex()

find() 方法用于查找数组中符合条件的第一个元素，并返回该元素，如果没有找到，则返回 undefined。它接受一个函数作为参数，这个函数会被传入每个元素和它的索引，如果函数返回 true，则表示找到了符合条件的元素。

const arr = [1, 2, 3, 4, 5];
console.log(arr.find(x => x % 2 === 0)); // 2
console.log(arr.find(x => x > 5)); // undefined

findIndex() 方法与 find() 方法类似，不同的是它返回符合条件的元素的索引，如果没有找到，则返回 -1。

const arr = [1, 2, 3, 4, 5];
console.log(arr.findIndex(x => x % 2 === 0)); // 1
console.log(arr.findIndex(x => x > 5)); // -1

5. Array.prototype.includes()

includes() 方法用于判断数组中是否包含指定的元素，返回一个布尔值。它接受一个参数作为要查找的元素，如果找到了，则返回 true，否则返回 false。

const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(2)); // true
console.log(arr.includes(6)); // false

6. Array.prototype.slice()

slice() 方法用于从数组中截取一段元素，并返回一个新数组。它接受两个参数，第一个参数是要截取的起始位置，第二个参数是要截取的结束位置（不包括该位置的元素）。如果省略第二个参数，则表示截取到数组末尾。

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

7. Array.prototype.sort()

sort() 方法用于对数组进行排序，它接受一个可选的比较函数作为参数。如果不传入比较函数，则默认按照 Unicode 码点进行排序。

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

const arr2 = ['a', 'c', 'b', 'e', 'd'];
console.log(arr2.sort()); // ['a', 'b', 'c', 'd', 'e']

如果传入比较函数，则按照该函数的返回值进行排序。如果返回值小于 0，则表示第一个参数应该排在第二个参数之前，如果返回值大于 0，则表示第一个参数应该排在第二个参数之后，如果返回值等于 0，则表示两个参数相等，它们的顺序不变。

const arr = [5, 3, 1, 4, 2];
console.log(arr.sort((a, b) => a - b)); // [1, 2, 3, 4, 5]

const arr2 = ['a', 'c', 'b', 'e', 'd'];
console.log(arr2.sort((a, b) => a.localeCompare(b))); // ['a', 'b', 'c', 'd', 'e']

总结

通过本文的介绍，我们了解了 ECMAScript 2021 中新增的一些实用的 Array.prototype 属性。它们可以帮助我们更方便地操作数组，提高开发效率。当然，它们也只是 ECMAScript 中的一部分，JavaScript 还有很多其他的特性和工具，我们可以继续深入学习和探索。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cf6e32add4f0e0ff8ae491