ES10 之最小化数组

前言

在前端开发中，经常需要处理数组数据。在 ES10 中，为了更方便地操作数组，新增加了几个数组操作的方法，可以最小化我们对数组的操作，提高了代码的效率。本文就将针对 ES10 新增方法，为大家详细介绍，并提供代码示例。

flat() 方法

flat() 方法可以将一个嵌套的数组“展平”，即将一个嵌套的数组变为一个一维数组。

示例代码:

let arr = [1, 2, [3, 4]];
let arrFlat = arr.flat();
console.log(arrFlat); // 输出 [1, 2, 3, 4]

需要注意的是，flat() 方法会按照深度遍历数组，也就是说，如果嵌套数组的嵌套层数很深，需要设置参数 depth 来指定展开的深度。

示例代码:

let arr1 = [1, 2, [3,[4,5]]];
let arrFlat1 = arr1.flat(1);
let arrFlat2 = arr1.flat(2);
console.log(arrFlat1); // 输出 [1, 2, 3,[4,5]]
console.log(arrFlat2); // 输出 [1, 2, 3, 4, 5]

flatMap() 方法

flatMap() 方法结合了 map() 和 flat() 两种方法的特点，可以对数组中的每一个元素进行操作，并将结果变成一个新数组。

示例代码:

let arr2 = ["1", "2", "3"];
let arrFlatMap = arr2.flatMap(num => parseInt(num));
console.log(arrFlatMap); // 输出 [1, 2, 3]

需要注意的是，flatMap() 方法会自动调用回调函数，并对返回的值进行处理。同时，如果返回的是一个数组，会自动展开，如果返回的是一个单值，则不会展开。

fromEntries() 方法

fromEntries() 方法可以将一个键值对数组转换为一个对象。

示例代码:

let arr3 = [["name", "Tom"], ["age", 18]];
let objFromEntries = Object.fromEntries(arr3);
console.log(objFromEntries); // 输出 { name: "Tom", age: 18 }

需要注意的是，由于数组中的每个元素都是一个数组，所以要求这个数组的每一个子元素都是长度为 2 的数组。

trimStart() 与 trimEnd() 方法

trimStart() 和 trimEnd() 方法分别可以去掉字符串开头和结尾的空格。

示例代码:

let str = "   hello world     ";
let strStart = str.trimStart();
let strEnd = str.trimEnd();
console.log(strStart); // 输出 "hello world     "
console.log(strEnd); // 输出 "   hello world"

需要注意的是，在旧版本的浏览器中，这两个方法的名称分别是 trimLeft() 和 trimRight()。

Object.fromEntries() 的应用

通过使用 Object.fromEntries() 方法，我们可以将一个 Map 转换为一个对象。

示例代码:

let map = new Map();
map.set("name", "Tom");
map.set("age", 18);
let objFromMap = Object.fromEntries(map);
console.log(objFromMap); // 输出 { name: "Tom", age: 18 }

总结

通过本文的介绍，我们可以发现 ES10 新增的这些数组方法可以很好地提高我们的工作效率。在实际的项目开发中，我们可以运用这些方法来操作数组数据，减少代码量，提高代码的可读性和可维护性。

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