ES7 新特性学习笔记 ——Array.prototype.flat()

在 ES7 中，我们迎来了一些新的特性，其中一个是 Array.prototype.flat()。这个方法可以让我们更方便地将嵌套的数组扁平化，即将多维数组转化为一维数组。

语法

arr.flat([depth]);

其中，arr 表示要进行扁平化的数组，depth 表示扁平化的深度，默认为 1。

示例

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

在上面的示例中，我们可以看到，当 depth 为 1 时，只有一层的嵌套被扁平化了，而当 depth 为 2 时，所有的嵌套都被扁平化了。

深入理解

除了上面的示例外，我们还可以进行更深入的理解。

首先，当 depth 为 0 时，不会进行任何扁平化操作，直接返回原数组。

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

其次，当 depth 为负数时，会将所有的嵌套数组都扁平化。

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

最后，我们还可以使用 Infinity 来表示无限深度的扁平化。

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

应用场景

Array.prototype.flat() 方法在实际开发中有很多应用场景，比如：

• 将多维数组转化为一维数组，以方便进行数据处理；
• 将多层嵌套的数组进行展开，以方便进行渲染。

下面是一个实际的应用场景，我们可以使用 Array.prototype.flat() 方法来将多层嵌套的菜单数据扁平化，以方便进行渲染。

// javascriptcn.com 代码示例
const menu = [
  {
    name: 'Home',
    children: [
      { name: 'Dashboard' },
      { name: 'Statistics' },
    ],
  },
  {
    name: 'Products',
    children: [
      {
        name: 'Mobile',
        children: [
          { name: 'iPhone' },
          { name: 'Samsung' },
        ],
      },
      {
        name: 'Laptop',
        children: [
          { name: 'Macbook' },
          { name: 'Dell' },
        ],
      },
    ],
  },
];

const flatMenu = menu.flat(Infinity);

console.log(flatMenu);
// [
//   { name: 'Home' },
//   { name: 'Dashboard' },
//   { name: 'Statistics' },
//   { name: 'Products' },
//   { name: 'Mobile' },
//   { name: 'iPhone' },
//   { name: 'Samsung' },
//   { name: 'Laptop' },
//   { name: 'Macbook' },
//   { name: 'Dell' },
// ]

总结

Array.prototype.flat() 方法是 ES7 中的一个新特性，它可以让我们更方便地将多维数组转化为一维数组。在实际开发中，我们可以将其应用于各种场景，如数据处理、渲染等。在使用时，我们需要注意 depth 参数的取值，以达到我们想要的扁平化效果。

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