ECMAScript 2018（ES9）中的数组 methods 和 “Array.includes()” 详解-JavaScript中文网-JavaScript教程资源分享门户

随着 JavaScript 语言的不断发展，数组作为其中一种经典的数据结构也变得日益复杂和强大起来。在 ECMAScript 2018（ES9）即将发布的时候，我们将看到一些新的数组方法加入进来，同时这些方法也在某种程度上带来了更多方便和实用性。本文将重点讲解 ECMAScript 2018（ES9）中的数组 methods 和 “Array.includes()” 方法的详解，以及如何在实际开发中运用它们。

一、数组 methods 的新特性

1.1 Array.prototype.flat(depth)

该方法用于将一个多维数组降维成一个一维数组。举个例子：

const arr1 = [1, 2, [3, 4]];
console.log(arr1.flat()); // [1, 2, 3, 4]

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

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

在上面的例子中，我们可以看到 .flat() 方法可以将多维数组逐层递归降维，深度由 depth 参数决定。

1.2 Array.prototype.flatMap(callback)

该方法首先通过 .map() 方法对数组元素进行映射，然后将结果扁平化为一个新数组。与 .map() 方法不同的是，如果 callback 返回的是一个数组，flat() 方法将不会进行递归。举个例子：

const arr1 = ["hello", "world"];
console.log(arr1.flatMap(x => x.split(" "))); // ["hello", "world"]

const arr2 = ["it's sunny", "over there"];
console.log(arr2.flatMap(x => x.split(" "))); // ["it's", "sunny", "over", "there"]

1.3 Array.prototype.@@iterator()

该属性返回一个新的数组迭代器对象。可以用于迭代器遍历。

1.4 Array.prototype.toLocalString()

该方法将数组转化为本地字符串并返回结果。

二、Array.includes() 方法的详解

2.1 语法

Array.includes(searchElement[, fromIndex])

2.2 参数

searchElement：要查找的元素。

fromIndex（可选）：开始查找的位置。默认值为 0。

2.3 返回值

如果在数组中找到了查找的元素则返回 true，否则返回 false。

2.4 举个例子

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

const arr2 = ["hello", "world"];
console.log(arr2.includes("goodbye")); // false

const arr3 = ["apple", "banana", "orange"];
console.log(arr3.includes("banana", 1)); // true

请注意第三个例子中的第二个参数 fromIndex，它表示我们从数组的索引为 1 的位置开始搜索 "banana" 元素。如果有多个相同元素，只返回最先找到的元素的位置。

三、如何在实际开发中运用数组 methods 和 “Array.includes()” 方法

在实际开发中，数组 methods 和 “Array.includes()” 方法都是非常实用的。下面我们举例说明：

3.1 使用 .flat() 方法遍历嵌套数组

const arr = [[1, 2], [3, 4], [5, 6]];
const flattenArr = arr.flat();

for (let i = 0; i < flattenArr.length; i++) {
  console.log(flattenArr[i]);
}

3.2 使用 .flatMap() 方法处理多重映射

const arr = ["hello world", "it's sunny"];
const newArr = arr.flatMap(x => x.split(" "));

for (let i = 0; i < newArr.length; i++) {
  console.log(newArr[i]);
}

3.3 使用 .includes() 方法查找元素

const arr = ["apple", "banana", "orange"];

if (arr.includes("apple")) {
  console.log("I Love Apples!");
}

在以上情景中，使用 .flat() 方法遍历嵌套数组非常便捷，但性能方面还是要考虑是否符合实际需求。同样的，对于单级数组，循环遍历也是很好的选择。在实际开发中，应该结合业务场景，选择合适的方式进行数据处理，通过一步步调试提高代码可维护性和效率。

四、总结

本文详细讲解了 ECMAScript 2018（ES9）中的数组 methods 和 “Array.includes()” 方法，以及在实际开发中如何使用这些方法。在日常开发中，我们应该注重数据处理的性能和效率，并且结合业务场景，选择合适的方式进行开发。掌握了这些方法，相信我们的前端开发工作能够更加高效和有成果。

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

ECMAScript 2018（ES9）中的数组 methods 和 “Array.includes()” 详解