1353 words

7 minutes

ECMAScript 攻略

2022-09-16

前端

es6

ECMAScript 攻略#

Array#{flat,flatMap}#

ECMAScript 2019 在 Array.prototype 上增加了两个方法:flat()和 flatMap()。

这两个方法为打平数组提供了便利。如果没有这两个方法，则打平数组就要使用迭代或递归

1
// 手写实现
2
/*
3
数组中每个元素都像一个子节点，非数组元素是叶节点。
4
因此，这个例子中的输入数组是一个高度为 2 有 7 个叶节点的树。打平这个数组本质上是对叶节点的按
5
序遍历。
6

7
第一个参数:源数组
8
第二个参数:指定打平到第几级嵌套
9
第三个参数:新数组
10

11
*/
12

13
function flatten(sourceArray, depth, flattenedArray = []) {
14
  for (const element of sourceArray) {
15
    if (Array.isArray(element) && depth > 0) {
16
      flatten(element, depth - 1, flattenedArray);
17
    } else {
18
      flattenedArray.push(element);
19
    }
20
  }
21
  return flattenedArray;
22
}
23

24
const arr = [[0], 1, 2, [3, [4, 5]], 6];
25

26
console.log(flatten(arr, 1));
27

28
// [0, 1, 2, 3, [4, 5], 6]

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

1
const arr1 = [0, 1, 2, [3, 4]];
2

3
console.log(arr1.flat());
4
// expected output: [0, 1, 2, 3, 4]
5

6
const arr2 = [0, 1, 2, [[[3, 4]]]];
7

8
console.log(arr2.flat(2));
9
// expected output: [0, 1, 2, [3, 4]]

flatMap()只能展开一层数组。

1
// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
2
[1, 2, 3, 4].flatMap((x) => [[x * 2]]);
3
// [[2], [4], [6], [8]]

典型场景: 将包含几句话的数组拆分成单个词组成的新数组

1
let arr1 = ["it's Sunny in", "", "California"];
2

3
arr1.map((x) => x.split(" "));
4
// [["it's","Sunny","in"],[""],["California"]]
5

6
arr1.flatMap((x) => x.split(" "));
7
// ["it's","Sunny","in", "", "California"]

详细内容参考 ES 入门 - flat

Object.fromEntries#

提出背景: 前端使用 Map 结构存储数据，但是调用后端 API 时需要传递普通对象，这时候就可以使用Object.fromEntries()进行转换

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

1
Object.fromEntries([
2
  ["foo", "bar"],
3
  ["baz", 42],
4
]);
5
// { foo: "bar", baz: 42 }

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

使用场景:

Map 键值对结构转换为对象#

1
// 例一
2
const entries = new Map([
3
  ["foo", "bar"],
4
  ["baz", 42],
5
]);
6

7
Object.fromEntries(entries);
8
// { foo: "bar", baz: 42 }
9

10
// 例二
11
const map = new Map().set("foo", true).set("bar", false);
12
Object.fromEntries(map);
13
// { foo: true, bar: false }

Array 转化为 Object#

1
const arr = [
2
  ["0", "a"],
3
  ["1", "b"],
4
  ["2", "c"],
5
];
6
const obj = Object.fromEntries(arr);
7
console.log(obj); // { 0: "a", 1: "b", 2: "c" }

浏览器查询参数转换为对象#

1
let query = Object.fromEntries(new URLSearchParams("foo=bar&baz=qux"));
2
// {foo: "bar", baz: "qux"}
3
console.log(query);

将对象的值重新组合#

1
let arr = [
2
  { name: "Alice", age: 40 },
3
  { name: "Bob", age: 36 },
4
];
5
let obj = Object.fromEntries(arr.map(({ name, age }) => [name, age]));
6
// {Alice: 40, Bob: 36}
7
console.log(obj);

String#{trimStart,trimEnd}#

ES2019 对字符串实例新增了trimStart()和trimEnd()这两个方法。它们的行为与trim()一致，

trimStart()消除字符串头部的空格，
trimEnd()消除尾部的空格。

它们返回的都是新字符串，不会修改原始字符串。

1
const s = "  abc  ";
2

3
s.trim(); // "abc"
4
s.trimStart(); // "abc  "
5
s.trimEnd(); // "  abc"
6
复制代码

Symbol#description#

创建 Symbol 的时候，可以添加一个描述。

1
const sym = Symbol("foo");

上面代码中，sym 的描述就是字符串 foo。

但是，读取这个描述需要将 Symbol 显式转为字符串，即下面的写法。

1
const sym = Symbol("foo");
2

3
String(sym); // "Symbol(foo)"
4
sym.toString(); // "Symbol(foo)"

上面的用法不是很方便。ES2019 提供了一个实例属性 description，直接返回 Symbol 的描述。

1
const sym = Symbol("foo");
2

3
sym.description; // "foo"

ES2019 提供了一个实例属性description，直接返回 Symbol 的描述。

1
// 创建 Symbol 的时候，可以添加一个描述。
2
const sym = Symbol("foo");
3

4
sym.description; // "foo"

上面代码中，sym 的描述就是字符串 foo。

try {} catch {} // optional binding#

旧版本的try / catch语句中的catch子句需要一个变量。现在可以不加了

1
// 旧版本
2
try {
3
  console.log(a);
4
} catch (error) {
5
  console.log("报错了");
6
}
7

8
// ES2019-SE10
9

10
// 如果我们对错误信息漠不关心，只想知道是否报错，就可以忽略catch的参数
11
try {
12
  console.log(a);
13
  return true;
14
} catch {
15
  console.log("报错了");
16
  return false;
17
}

U+2028 和 U+2029#

在 ES2019 之前的版本中，不接受不转义的

行分隔符U + 2028
段落分隔符U + 2029

ES2019 允许 JavaScript 字符串直接输入 U+2028（行分隔符）和 U+2029（段分隔符）。

1
/*
2
ES2019之前，下面的代码会报错
3

4
ES2019 下面代码不会报错。
5
*/
6
const PS = eval("'\u2029'");

ES 入门 - U+2028 和 U+2029

JSON-stringify - 的改造#

为了确保返回的是合法的 UTF-8 字符，ES2019 改变了 JSON.stringify()的行为。如果遇到 0xD800 到 0xDFFF 之间的单个码点，或者不存在的配对形式，它会返回转义字符串，留给应用自己决定下一步的处理。

1
JSON.stringify("\u{D834}"); // ""\\uD834""
2
JSON.stringify("\uDF06\uD834"); // ""\\udf06\\ud834""

ES 入门 - JSON-stringify - 的改造

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

早先的 ECMAScript 没有规定，Array.prototype.sort()的默认排序算法是否稳定，留给浏览器自己决定，这导致某些实现是不稳定的。ES2019 明确规定，Array.prototype.sort()的默认排序算法必须稳定。这个规定已经做到了，现在 JavaScript 各个主要实现的默认排序算法都是稳定的。

1
const arr = ["peach", "straw", "apple", "spork"];
2

3
const stableSorting = (s1, s2) => {
4
  if (s1[0] < s2[0]) return -1;
5
  return 1;
6
};
7

8
arr.sort(stableSorting);
9
// ["apple", "peach", "straw", "spork"]

ES 入门 - 排序稳定性

revised Function#toString#

ES2019 对函数实例的 toString()方法做出了修改。

toString()方法返回函数代码本身，以前会省略注释和空格。

1
function /* foo comment */ foo() {}
2

3
// 老版本
4
foo.toString();
5
// function foo() {}
6

7
// 新版
8
foo.toString();
9
// "function /* foo comment */ foo () {}"