每天温习一个JS方法之Array.flat方法 第六天

1. Array.flat方法

1.1 描述

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

不会改变原数组

1.2 语法

arr.flat(depth) // depth 默认值为1

参数：

• depth：可选。提取嵌套数组的结构深度，默认值为1

1.3 注意

1. arr.flat()返回一个包含数组和其子数组所有元素的新数组。
2. depth可以是任意值，但一般只有number和string 类型的数值才会被接受，undefined则为默认值

2. Array.flat应用

2.1 示例

注：输出的Array(3） = ['a', ['b'], 'c'],Array(1) = ['b']

const arr = [1, 2, ['a', ['b'], 'c']];
console.log(arr.flat()); // 输出 [1, 2, 'a', Array(1), 'c'] ———— depth 默认值为1
console.log(arr); // 输出 [1, 2, Array(3)]  ———— 不会改变原数组

const arr = [1, 2, ['a', ['b'], 'c']];
console.log(arr.flat('abc'));  // 输出 [1, 2, Array(3)]

console.log(arr.flat('2')); // 输出 [1, 2, 'a', 'b', 'c']

console.log(arr.flat(undefined)); //  输出 [1, 2, 'a', Array(1), 'c']

// 引用自MDN ———— 使用 Infinity，可展开任意深度的嵌套数组
const arr = [1, 2, ['a', ['b'], 'c']];
console.log(arr.flat(Infinity)); // 输出 [1, 2, 'a', 'b', 'c']

2.2 与其他方法连通提取嵌套数组对象的情况

/* 输出户主及子系姓名 */
const arr = [
  {
    
    
    id: 1,
    name: '张三',
    families: [
      {
    
     id: 101, name: '张四' },
      {
    
     id: 105, name: '张五' },
    ],
  },
  {
    
    
    id: 2,
    name: '李四',
    families: [
      {
    
     id: 101, name: '李五' },
      {
    
     id: 105, name: '李六' },
    ],
  },
];
const result = arr
  .map((o) => {
    
    
    let nameArr = [];
    nameArr.push(o.name);
    nameArr.push(o.families.map((o) => o.name));
    return nameArr;
  })
  .flat(2);
console.log(result); // 输出 ['张三', '张四', '张五', '李四', '李五', '李六']

上面有点强制嵌套了，其实可以不用，如下

const result = arr.map((o) => {
    
    
  return [o.name].concat(o.families.map((o) => o.name));
}); // 输出 ['张三', '张四', '张五', '李四', '李五', '李六']

Array.flat 还有诸多与其它方法联用的应用，熟悉它，相信你在逻辑处理过程中能够广泛应用到