复习ES(6-11)语法之ES10

目录

• Object.fromEntries()

• 字符串扩展

• 数组扩展

• JSON扩展

• Symbol.prototype.description()

Object.fromEntries()

Object.entries()返回一个给定对象自身可枚举属性的键值对数组。

Object.fromEntries()方法是Object.entries()的逆操作，用于将一个键值对数组转为对象。

const obj = {
  name: "zzz",
  age: 18,
};
const entries = Object.entries(obj);
console.log(entries); // [ [ 'name', 'zzz' ], [ 'age', 18 ] ]
​
// ES10
const fromEntries = Object.fromEntries(entries);
console.log(fromEntries); // { name: 'zzz', age: 18 }

该方法的主要目的，是将键值对的数据结构还原为对象，因此特别适合将 Map 结构转为对象。

const map = new Map();
map.set("name", "zzz");
map.set("age", 18);
console.log(map);
const fromMapEntries = Object.fromEntries(map); // Map(2) { 'name' => 'zzz', 'age' => 18 }
console.log(fromMapEntries); // { name: 'zzz', age: 18 }

字符串扩展

ES2019 对字符串实例新增了trimStart()和trimEnd()这两个方法。它们的行为与trim()一致，trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。

const str = "  apple  ";
console.log(str);
console.log(str.replace(/^\s+/g, "")); // 去掉前面的空格
console.log(str.replace(/\s+$/g, "")); // 去掉后面的空格
​
//去掉前面的空格
console.log(str.trimStart());
// 去掉后面的空格
console.log(str.trimEnd());

数组扩展

• Array.prototype.flat()

数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。

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

• flatMap()

const arr = [1, 2, 3, 4, 5];
// const res = arr.map((x) => [x + 1]); //生成二维数组
// console.log(res); // [ [ 2 ], [ 3 ], [ 4 ], [ 5 ], [ 6 ] ]
// // 将结果扁平化
// console.log(res.flat()); // [ 2, 3, 4, 5, 6 ]
const res = arr.flatMap((x) => [x + 1]);
console.log(res); // [ 2, 3, 4, 5, 6 ]

flatMap()方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。

JSON扩展

• JSON.superset

背景是ES2019之前不支持转义行分隔符 (\u2028) 和段落分隔符 (\u2029) 字符，且在解析过程时报错: SyntaxError: Invalid or unexpected token。 新的提供了支持

• JSON.stringify()增强能力

JSON.stringify在 ES10 修复了对于一些超出范围的 Unicode展示错误的问题。因为 JSON 都是被编码成 UTF-8，所以遇到 0xD800–0xDFFF 之内的字符会因为无法编码成 UTF-8 进而导致显示错误。在 ES10 它会用转义字符的方式来处理这部分字符而非编码的方式，这样就会正常显示了。

// \uD83D\uDE0E  emoji 多字节的一个字符
console.log(JSON.stringify('\uD83D\uDE0E')) // "?"
// 如果我们只去其中的一部分  \uD83D 这其实是个无效的字符串
// 之前的版本 ，这些字符将替换为特殊字符，而现在将未配对的代理代码点表示为JSON转义序列
console.log(JSON.stringify('\uD83D')) // "\ud83d"

Symbol.prototype.description()

ES2019 提供了一个 Symbol 值的实例属性description，直接返回 Symbol 值的描述。description只读不能写。

const s1 = Symbol("zzz");
console.log(s1);
console.log(s1.description);
​
const s2 = Symbol();
console.log(s2);
console.log(s2.description);
s2.description = "111";
console.log(s2.description);
​