ES10 之约定优于配置

在前端开发中，我们经常需要进行一些复杂的配置操作。如果我们能够通过一些约定来简化这些操作，那么对于代码的可维护性和开发效率都会产生巨大的提升。这就是“约定优于配置”的原则。

ES10（也就是 ECMAScript 2019）中引入了一些新的特性，使得我们能够更好地运用“约定优于配置”的思想来进行前端开发。

1. 对象的 fromEntries() 方法

fromEntries() 方法可以将一个二维数组转换成一个对象。这在我们需要将一些数据转换成对象的情况下非常有用。

示例代码：

const arr = [['name', 'Alice'], ['age', 18]];
const obj = Object.fromEntries(arr);
console.log(obj); // { name: 'Alice', age: 18 }

2. 数组的 flat() 方法和 flatMap() 方法

flat() 方法可以将一个多维数组扁平化，使得所有元素都在一个数组中。flatMap() 方法则是先对数组进行映射操作，再对结果进行扁平化操作。

示例代码：

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

const arr2 = [1, 2, 3];
const newArr2 = arr2.flatMap(x => [x, x + 1]);
console.log(newArr2); // [ 1, 2, 2, 3, 3, 4 ]

3. 字符串的 trimStart() 方法和 trimEnd() 方法

trimStart() 方法用于去除字符串开头的空格，trimEnd() 方法用于去除字符串结尾的空格。

示例代码：

const str = '  hello world  ';
console.log(str.trimStart()); // 'hello world  '
console.log(str.trimEnd()); // '  hello world'

4. Object.fromEntries() 和 Symbol.iterator 实现对象的遍历

我们可以使用 Object.fromEntries() 和 Symbol.iterator 来实现对象的遍历。

示例代码：

const obj = { name: 'Alice', age: 18 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

5. Array.prototype.sort() 的稳定排序

在 ES6 中，Array.prototype.sort() 方法已经经历了一个小改动，使得排序是稳定的。这意味着当排序依据相同时，原来数组中的元素顺序不会改变。

示例代码：

const arr = [
  { name: 'Alice', age: 18 },
  { name: 'Bob', age: 20 },
  { name: 'Alice', age: 22 },
];

arr.sort((a, b) => (a.name < b.name ? -1 : 1));
console.log(arr);

输出结果：

[
  { name: 'Alice', age: 18 },
  { name: 'Alice', age: 22 },
  { name: 'Bob', age: 20 }
]

总结

ES10 引入了上述的一些新特性，使得我们能够更好地运用“约定优于配置”的思想进行前端开发。我们可以更加便捷地处理对象，数组和字符串，并且在数据遍历和排序方面也有了不少的改进。通过这些改进，我们可以进一步提高开发效率，提高代码可维护性。

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