ES10 之 flat() 实现数组扁平化的方法

在 Javascript 中，数组扁平化是一种常见的操作，它可以将嵌套的多维数组转换成一维数组。对于前端开发来说，这种操作在处理数据时非常有用，因为很多时候我们需要将多个数组合并在一起进行处理。在 ES10 中，引入了 flat() 方法来实现数组扁平化，本文将详细介绍其使用方法和注意事项，并包含示例代码。

flat() 方法简介

ES10 中的 flat() 方法是一个数组原型的方法，它用于将嵌套的多维数组扁平化为一维数组。该方法可以接受一个可选参数表示扁平化的递归深度，默认值为 1。需要注意的是，该方法不会改变原数组，而是返回一个新的扁平化后的数组。

语法如下：

array.flat([depth]);

• array：要扁平化的数组。
• depth：可选参数，表示扁平化的递归深度，默认值为 1。

flat() 方法的使用

下面我们来看一些使用 flat() 方法的示例。假设我们有一个嵌套的数组，它的结构如下：

let nestedArr = [1, 2, [3, 4, [5, 6]]];

如果我们想将该数组扁平化为一维数组，可以使用 flat() 方法：

let flatArr = nestedArr.flat();
console.log(flatArr); // [1, 2, 3, 4, [5, 6]]

但是我们发现，实际上 flat() 方法只扁平化了一层，如果要扁平化整个数组，可以给其传入一个深度参数：

let nestedArr = [1, 2, [3, 4, [5, 6]]];
let flatArr = nestedArr.flat(Infinity);
console.log(flatArr); // [1, 2, 3, 4, 5, 6]

这样就能够将整个数组扁平化为一维数组了。

flat() 方法的注意事项

使用 flat() 方法需要注意一些问题，下面我们来逐一分析。

1. undefined 和 null

在扁平化数组时，如果数组中存在 undefined 或 null 值，它们会被忽略，不会被包含在扁平化后的数组中。例如：

let nullArr = [1, null, [2, 3, undefined], [4], 5];
let flatArr = nullArr.flat();
console.log(flatArr); // [1, null, 2, 3, undefined, 4, 5]

2. 不影响原数组

flat() 方法不会改变原数组，而是返回一个新的扁平化后的数组。例如：

let arr = [1, 2, [3, 4]];
let flatArr = arr.flat();
console.log(arr); // [1, 2, [3, 4]]
console.log(flatArr); // [1, 2, 3, 4]

3. 递归深度

在使用 flat() 方法时，如果不指定递归深度，默认值为 1，只会扁平化数组的第一层。如果需要扁平化多层数组，就需要指定递归深度。

需要注意的是，如果指定的递归深度大于数组的嵌套层数，那么 flat() 方法就会把整个数组扁平化为一维数组。

例如：

let nestedArr = [1, [2, [3, [4, 5]]]];
let flatArr = nestedArr.flat(2);
console.log(flatArr); // [1, 2, 3, 4, 5]

let deepArr = [1, [2, [3, [4, 5]]]];
let deepFlatArr = deepArr.flat(Infinity);
console.log(deepFlatArr); // [1, 2, 3, 4, 5]

总结

在本文中，我们学习了 ES10 中的 flat() 方法，它是用于实现数组扁平化的方法，并且非常方便，可以直接调用该方法将数组扁平化为一维数组。但是在使用 flat() 方法时，需要注意一些问题，如 undefined 和 null 值的处理、不影响原数组、递归深度等问题。

在实际的前端开发中，数组扁平化是一个非常常见的操作，我们可以使用 flat() 方法来完成扁平化操作，提高开发效率。

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