从拍平数组到递归对象：解析 ES11 新增的 array.flat、arr.filter 和 Object.fromEntries

在前端开发中，经常会遇到对数组和对象的操作，特别是在对数据进行处理和展示时，对数据的操作是不可或缺的。ES11 新增了一些数组和对象的新方法，本文将详细介绍其中的 array.flat、arr.filter 和 Object.fromEntries。

array.flat

在实际开发中，很多时候我们会遇到多层嵌套的数组，而 array.flat() 就是为了解决这一问题而新增的方法。该方法可将多层嵌套的数组扁平化，转化为一维数组。

使用方法非常简单，只需要在数组实例上调用 flat() 方法即可：

const nestedArr = [1, [2, [3, [4]]]];
const flatArr = nestedArr.flat();

console.log('flatArr:', flatArr); // [1, 2, 3, 4]

通过上述代码，我们可以看到 flat() 方法已经将 nestedArr 中的所有元素都转化为了一维数组。

flat() 方法还可以接受一个参数，用于指定要扁平化的层数：

const nestedArr2 = [1, [2, [3, [4]]]];
const flatArr2 = nestedArr2.flat(2);

console.log('flatArr2:', flatArr2); // [1, 2, 3, 4]

上述代码中，我们指定了参数 2，表示要将嵌套的数组扁平化两层。因此，flatArr2 的结果与 flatArr 相同。

需要注意的是，flat() 方法并不会改变原数组，而是返回一个新的扁平化后的数组。

arr.filter

在处理数组数据时，经常需要从中筛选出满足条件的元素，而 arr.filter() 方法就是为了满足这一需求而新增的方法。

该方法可用于过滤数组中的元素，并返回一个新的数组，新数组中包含满足指定条件的元素。使用方法也非常简单，只需要在数组实例上调用 filter() 方法，并传入一个回调函数作为参数，对数组进行筛选即可：

const arr = [1, 2, 3, 4, 5, 6];
const filteredArr = arr.filter(num => num % 2 === 0);

console.log('filteredArr:', filteredArr); // [2, 4, 6]

上述代码中，我们使用 filter() 方法从数组 arr 中筛选出了所有偶数，结果保存在 filteredArr 中。

需要注意的是，filter() 方法返回的是一个新数组，其内容是原数组中满足条件的元素。原数组并不会被改变。

Object.fromEntries

在处理对象数据时，有时需要将对象转化为一个二维数组，然后对其中的元素进行操作。而 Object.fromEntries() 方法就是为了实现这一需求而新增的方法。

该方法可将二维数组转化为一个对象。使用方法也非常简单，只需要传入一个二维数组作为参数，该二维数组由若干键值对组成即可：

const entries = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(entries);

console.log('obj:', obj); // { a: 1, b: 2, c: 3 }

上述代码中，我们将一个二维数组 entries 转化为了一个对象 obj，键值对分别为 a: 1、b: 2 和 c: 3。

需要注意的是，如果数组中有重复的键名，后面的键值会覆盖前面的键值。

总结

通过本文的介绍，我们了解了 ES11 中的 array.flat、arr.filter 和 Object.fromEntries 三个新增的数组和对象方法。这些方法可以帮助我们更方便地处理数组和对象数据，提高前端开发效率。

同时，在实际开发中，要根据具体场景进行选择合适的方法。例如，如果需要对多层嵌套的数组进行操作，就可以使用 array.flat 方法；如果需要对数组进行筛选，就可以使用 arr.filter 方法；如果需要将二维数组转化为对象，就可以使用 Object.fromEntries 方法。通过灵活使用这些方法，可以更加高效地完成任务，提高代码质量和效率。

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