ECMAScript 2018（也叫 ES9）是 JavaScript 的最新版本，它包含了一些新的数组方法，如 includes()、flat()、flatMap() 等。这些方法可以让我们更方便地操作数组，但有时候我们可能会犯一些错误，导致代码执行不如预期。本文将介绍一些常见的错误使用数组方法的情况，以及如何避免这些错误。
1. includes() 方法
includes() 方法用于判断一个数组是否包含某个元素，返回值为布尔类型。它的语法为：
-------------------------- -----------
其中，valueToFind 是要查找的元素，fromIndex 是可选的起始查找位置。注意，includes() 方法使用的是“全等”（===）比较，即要查找的元素必须与数组中的元素完全相等才会返回 true。
错误用法 1：使用 includes() 查找对象类型的元素
----- --- - -- ----- ------- -- - ----- ----- -- -------------------------- ----- ------- --- -- -----
这段代码的输出结果是 false，因为 { name: 'Alice' } 是一个新的对象，与数组中的 { name: 'Alice' } 不是同一个对象，它们使用“全等”比较时会返回 false。正确的写法是使用数组的 find() 方法：
----- --- - -- ----- ------- -- - ----- ----- -- ------------------------- -- --------- --- --------- -- - ----- ------- -
错误用法 2：忽略 fromIndex 参数的影响
----- --- - --- -- -- -- --------------------------- --- -- -----
这段代码的输出结果也是 false，因为 includes() 的第二个参数 fromIndex 是从哪个位置开始查找。在这个例子中，从索引 2 开始查找时，第一个元素是 3，不是要查找的 1，因此返回 false。正确的写法是不忽略 fromIndex 参数：
----- --- - --- -- -- -- --------------------------- --- -- ---- --------------------------- --- -- -----
2. flat() 和 flatMap() 方法
flat() 和 flatMap() 方法用于将多维数组（即嵌套数组）展开为一维数组。它们的语法分别为：
----------------- ---------------------- ---------
其中，depth 是递归的深度，callback 是遍历数组时执行的回调函数，thisArg 是回调函数内部 this 的值。
错误用法：使用 flat() 得到不是一维数组的结果
----- --- - --- -- --- ----- -- ----------------------- -- --- -- -- ---- --
这段代码的输出结果包含了一个嵌套数组 [4]，它没有被展开。这是因为 flat() 的默认深度为 1，即只展开一层嵌套数组。如果需要展开多层嵌套数组，可以传递一个大于 1 的深度：
----- --- - --- -- --- ----- -- ------------------------ -- --- -- -- -- --
错误用法：不是数组的元素被展开了
----- --- - --- - ----- ------- -- -- ---------------------------- -- ------ -- --- ---- ---- ---- ---- ---- --
这段代码的输出结果包含了 { name: 'Alice' } 元素中的字符，这是因为 flatMap() 方法在遍历时会调用回调函数，将每个元素转换为一个数组，然后将所有数组合并为一个新的数组。如果数组中有不是数组类型的元素，则会被转换为字符串后展开。正确的做法是在回调函数中返回一个数组：
----- --- - --- - ----- ------- -- -- ---------------------------- -- ------------------- - ---- - -------- -- --- - ----- ------- -- --
3. Array.from() 方法
Array.from() 方法用于将类数组对象或可迭代对象转换为真正的数组。它的语法为：
---------------------- ------- ----------
其中，arrayLike 是类数组对象或可迭代对象，mapFn 是遍历数组时执行的回调函数，thisArg 是回调函数内部 this 的值。
错误用法：未正确处理类数组对象的 length 属性
----- --------- - - -- ---- -- ---- ------- - - ---------------------------------- -- ----- ---- ----------
这段代码的输出结果包含了一个 undefined 元素，这是因为类数组对象的 length 属性指示了要转换为数组后的数组长度。Array.from() 方法在转换时会根据 length 属性创建数组，并将类数组对象中对应的元素作为数组的元素，如果 length 属性不正确，转换后的数组长度将不正确。正确的写法是使用类数组对象的 slice() 方法：
----- --------- - - -- ---- -- ---- ------- - - ------------------------ ------- ---------------- -- --- ------ -- ------------------ -- ----- ----
总结
本文介绍了 ECMAScript 2018 中的几个数组方法的常见错误使用情况，以及如何避免这些错误。在编写 JavaScript 代码时，我们应该考虑到这些方法的使用细节，避免因错误使用而导致的预期外结果。下面是本文中所有例子的代码：
-- ---------- -- ----- --- - -- ----- ------- -- - ----- ----- -- ------------------------- -- --------- --- --------- -- - ----- ------- - ----- --- - --- -- -- -- --------------------------- --- -- ---- --------------------------- --- -- ----- -- ------ - --------- -- ----- --- - --- -- --- ----- -- ------------------------ -- --- -- -- -- -- ----- --- - --- - ----- ------- -- -- ---------------------------- -- ------------------- - ---- - -------- -- --- - ----- ------- -- -- -- ------------ -- ----- --------- - - -- ---- -- ---- ------- - - ------------------------ ------- ---------------- -- --- ------ -- ------------------ -- ----- ----
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64e5b88ff6b2d6eab312c6e2