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