在 ECMAScript 2019 (即 ES10) 中，新增了一个名为 flat() 的方法。这个方法可以帮助我们对多维数组进行扁平化处理，将其转换为一维数组。在这篇文章中，我们将详细介绍 flat() 方法的使用方法，并提供一些示例代码来帮助读者更好地理解。
flat() 方法的基本使用
flat() 方法作用于一个数组，返回一个新的、一维的数组。它的基本语法如下：
array.flat([depth])
其中，array 表示需要进行扁平化处理的数组，depth 表示需要扁平化的深度。当 depth 参数传递为 1 时，将数组扁平化一层；当 depth 参数传递为 Infinity 时，则会一直递归扁平化到数组中没有嵌套的数组。
同时需要注意，原数组不会被改变。也就是说，flat() 方法返回的是一个新数组。
接下来，我们可以看一下具体的使用示例。
const arr = [1, 2, [3, 4]]; const flatArr = arr.flat(); console.log(flatArr); // [1, 2, 3, 4] console.log(arr); // [1, 2, [3, 4]]
在这个例子中，我们定义了一个包含多个嵌套数组的数组 arr。我们使用 flat() 方法对其进行一层扁平化处理，并将结果存储在 flatArr 变量中。最后，我们分别输出两个数组，可以看到原数组 arr 并没有被修改。
flat() 方法的高级使用
除了基本用法之外，flat() 方法还具有一些高级特性。下面是其中一些值得一提的用法。
1. 扁平化多层嵌套数组
在介绍 flat() 方法时，我们提到，传递 Infinity 参数可以将多维数组进行无限层次的扁平化处理。下面是一个示例：
const arr = [1, [2, [3, 4]]]; const flatArr = arr.flat(Infinity); console.log(flatArr); // [1, 2, 3, 4]
在这个例子中，我们定义了一个包含三层嵌套数组的数组 arr。我们使用 flat() 方法并传递 Infinity 参数，将其进行扁平化处理，并将结果存储在 flatArr 变量中。
2. 移除空数组
在扁平化一个多维数组时，可能会出现一些空数组。如果希望将这些空数组移除，可以使用 filter() 方法。
const arr = [1, [2, []], 3, [[]], 4]; const flatArr = arr.flat().filter(item => item); console.log(flatArr); // [1, 2, 3, 4]
在这个例子中，我们首先使用 flat() 方法将多维数组进行一维化处理，然后使用 filter() 方法将其中的空数组移除。最后得到的 flatArr 数组就是我们需要的结果。
3. 扁平化对象
除了数组之外，flat() 方法还可以将对象扁平化处理。下面是一个示例：
// javascriptcn.com 代码示例
const obj = {
a: { b: { c: 1, d: 2 } },
e: { f: 3, g: { h: 4 } }
};
const flatObj = obj => {
const keys = Object.keys(obj);
const values = keys.map(key => obj[key]);
return keys.reduce(
(result, key, index) =>
typeof values[index] === "object"
? { ...result, ...flatObj(values[index]) }
: { ...result, [key]: values[index] },
{}
);
};
console.log(flatObj(obj));
// { c: 1, d: 2, f: 3, h: 4 }在这个例子中，我们定义了一个包含多层嵌套对象的变量 obj。我们使用 flatObj() 函数对其进行扁平化处理，并输出扁平化后的结果。可以看到，最终结果中只包含了一层嵌套，对象中的所有键值对都被扁平化了。
总结
ECMAScript 2019 中新增的 flat() 方法可以帮助我们快速、方便地对多维数组进行扁平化处理。使用方法也十分简单，甚至可以用于扁平化对象。在具体实践中，还可以结合其他方法一起使用，以实现更加复杂的需求。由于其十分实用，建议读者在日常开发中积极使用，以提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6549fb807d4982a6eb4325fa