ES7 新特性之 Array.prototype.flat() 方法详解

在 ES7 中，JavaScript 新增了一个非常实用的方法：Array.prototype.flat()。这个方法可以将多维数组降维成一维数组，使得数组操作更加方便和简单。本文将对该方法进行详细介绍，并提供示例代码和实际应用场景。

语法

Array.prototype.flat() 方法的语法如下：

arr.flat([depth])

其中，arr 为要操作的数组，depth 为可选参数，表示要降维的深度。如果不传 depth 参数，默认值为 1，即只降一维。

示例

下面是一个简单的示例，展示如何使用 Array.prototype.flat() 方法将多维数组降维成一维数组：

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

在上面的示例中，原始数组 arr 包含三个元素，其中第三个元素是一个嵌套数组。使用 flat() 方法将其降维成一维数组，得到了 flattenedArr。

深度参数

如果要将多维数组降至一维以上，可以使用 depth 参数，如下所示：

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

在上面的示例中，使用 flat(2) 方法将 arr 数组降维至二维以下，得到了一个一维数组 flattenedArr。

实际应用场景

Array.prototype.flat() 方法在实际开发中非常实用，可以用于各种场景，例如：

1. 数组展开

使用 Array.prototype.flat() 方法可以将嵌套数组展开，方便进行数组操作：

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

2. 数组去重

使用 Array.prototype.flat() 方法可以将嵌套数组去重，方便进行数组操作：

const arr = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
const flattenedArr = arr.flat(Infinity);
const uniqueArr = [...new Set(flattenedArr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

在上面的示例中，使用 flat() 方法将 arr 数组降维至一维数组，去重后得到了 uniqueArr。

3. 数组拍平

使用 Array.prototype.flat() 方法可以将多维数组拍平，方便进行数组操作：

// javascriptcn.com 代码示例
const arr = [
  { id: 1, name: 'a' },
  [
    { id: 2, name: 'b' },
    { id: 3, name: 'c' },
    [
      { id: 4, name: 'd' },
      { id: 5, name: 'e' },
    ],
  ],
];
const flattenedArr = arr.flat(Infinity);
console.log(flattenedArr);
// [
//   { id: 1, name: 'a' },
//   { id: 2, name: 'b' },
//   { id: 3, name: 'c' },
//   { id: 4, name: 'd' },
//   { id: 5, name: 'e' },
// ]

在上面的示例中，使用 flat() 方法将 arr 数组降维至一维数组，得到了 flattenedArr。

总结

Array.prototype.flat() 方法是 ES7 中一个非常实用的方法，可以将多维数组降维成一维数组，方便进行数组操作。本文对该方法进行了详细介绍，并提供了示例代码和实际应用场景，希望能够帮助读者更好地理解和应用该方法。

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