ES6/ES7/ES8/ES9 中的数组扁平化方法

在前端开发中，数组扁平化是一个常见的操作，用于将多维嵌套的数组转化为一维数组，方便数据的处理和操作。在 ES6/ES7/ES8/ES9 中，提供了多种方法来实现数组扁平化，本文将详细介绍这些方法的使用和实现。

1. 使用 Array.prototype.flat()

在 ES6 中，新增了 Array.prototype.flat() 方法，用于将多维嵌套的数组转化为一维数组。该方法接受一个可选的参数，表示要扁平化的层数，默认值为 1。当参数为 Infinity 时，表示扁平化所有层级。

示例代码：

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

2. 使用递归实现扁平化

除了使用 Array.prototype.flat() 方法外，我们还可以使用递归的方式实现数组扁平化。递归的思路是，遍历数组中的每个元素，如果该元素是数组，则递归调用扁平化函数，否则将该元素添加到结果数组中。

示例代码：

function flatten(arr) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result.push(...flatten(arr[i]));
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}

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

3. 使用 reduce() 方法实现扁平化

使用 reduce() 方法也可以实现数组扁平化。reduce() 方法接受一个回调函数和一个初始值，回调函数中的参数分别为累加器和当前值，函数的返回值为累加器。在回调函数中，如果当前值是数组，则递归调用扁平化函数，否则将该值添加到累加器中。

示例代码：

function flatten(arr) {
  return arr.reduce((acc, val) => {
    return Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val);
  }, []);
}

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

4. 使用 Generator 函数实现扁平化

ES6 中的 Generator 函数也可以用来实现数组扁平化。Generator 函数是一种特殊的函数，可以通过 yield 关键字将函数的执行暂停，并返回一个值，等待下一次调用时继续执行。在扁平化函数中，使用 yield* 关键字来调用递归扁平化函数。

示例代码：

function* flatten(arr) {
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      yield* flatten(arr[i]);
    } else {
      yield arr[i];
    }
  }
}

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

总结

本文介绍了 ES6/ES7/ES8/ES9 中的四种数组扁平化方法，分别是 Array.prototype.flat()、递归、reduce() 和 Generator 函数。这些方法各有优缺点，可以根据实际需求选择合适的方法。同时，本文也提供了示例代码和详细的解释，希望能够对读者有所帮助。

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