ES2019 中对 Javascript 的新增和改进

ES2019 中对 Javascript 的新增和改进

1、 Optional Catch Binding – 可选的异常捕获绑定

以往的异常捕获语句，无论你是否用到，都需要在 catch 后面需要带上 error 参数，有代码洁癖的一定难以忍受，新的接口规范支持在不需要的时候不用带了

原来的方式

try {
  // some code
  return true;
} catch (unusedException) {
  // here is the problem
  return false;
}

新方式

try {
  // some code
  return true;
} catch {
  return false;
}
}

2、Array.flat 数组展开

flat(depth) 方法会按照一个可指定的深度(默认值为 1)递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。在以往，可以需要写个方法无限递归才可以实现同样的效果。

使用 Infinity 常量，可无限展开任意深度的嵌套数组

var arr1 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr1.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

3、 Array.flatMap 针对Array.map方法的扩展

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 [map] 和 深度值 1 的 [flat] 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。

var arr1 = [1, 2, 3, 4];
arr1.map((x) => [x * 2]);
// [[2], [4], [6], [8]]
arr1.flatMap((x) => [x * 2]);
// [2, 4, 6, 8]
// 只会将 flatMap 中的函数返回的数组 “压平” 一层
arr1.flatMap((x) => [[x * 2]]);
// [[2], [4], [6], [8]]

虽然上面的代码使用 map 和 flatMap 好像都可以，但这只能展示如何使用 flatMap。

所以，为了更好的展示 flatMap 的作用，下面我们将包含几句话的数组拆分成单个汉字组成的新数组。

let arr = ["今天天气不错", "", "早上好"];
arr.map((s) => s.split(""));
// [["今", "天", "天", "气", "不", "错"],[],["早", "上", "好"]]
arr.flatMap((s) => s.split(""));
// ["今", "天", "天", "气", "不", "错", "早", "上", "好"]

等价操作

var arr1 = [1, 2, 3, 4];
arr1.flatMap((x) => [x * 2]);
// 等价于
arr1.reduce((acc, x) => acc.concat([x * 2]), []);
// [2, 4, 6, 8]

4、String.trimStart 和 String.trimEnd

等价于之前的 String.trimRight 和 String.trimLeft

之前的写法

let message = "   Welcome to CS 101    ";
message.trimRight();
// ‘   Welcome to CS 101‘
message.trimLeft();
// ‘Welcome to CS 101   ‘
message.trimRight().trimLeft();
// ‘Welcome to CS 101‘

新的写法

let message = "   Welcome to CS 101    ";
message.trimEnd();
// ‘   Welcome to CS 101‘
message.trimStart();
// ‘Welcome to CS 101   ‘
message.trimEnd().trimStart();
// ‘Welcome to CS 101‘

5、Object.fromEntries

在 ES2017 中，引入了 Object.entries 来把 Object 转成数组，如下：

let students = {
  amelia: 20,
  beatrice: 22,
  cece: 20,
  deirdre: 19,
  eloise: 21,
};

Object.entries(students);
// [
//  [ ‘amelia‘, 20 ],
//  [ ‘beatrice‘, 22 ],
//  [ ‘cece‘, 20 ],
//  [ ‘deirdre‘, 19 ],
//  [ ‘eloise‘, 21 ]
// ]

引入 Object.entries 这个方法的目的是为了使 Object 也可以使用数组的 map，filter，reduce 等原生方法，但是使用完之后必须要自己手动还原回去，例如：

let students = {
  amelia: 20,
  beatrice: 22,
  cece: 20,
  deirdre: 19,
  eloise: 21,
};

// convert to array in order to make use of .filter() function
let overTwentyOne = Object.entries(students).filter(([name, age]) => {
  return age >= 21;
}); // [ [ ‘beatrice‘, 22 ], [ ‘eloise‘, 21 ] ]

// turn multidimensional array back into an object
let DrinkingAgeStudents = {};
for (let [name, age] of overTwentyOne) {
  DrinkingAgeStudents[name] = age;
}
// { beatrice: 22, eloise: 21 }

上述代码使用了 Object.entries 及数组的 filter 方法过滤了年龄大于等于 21 的成员，然后又使用了 for...of 把数字转变回了 Object。

Object.fromEntries 就是用来替代上面代码中的 for...of 循环的，使得 Object 调用数组的原生方法更简洁方便，代码如下：

let students = {
  amelia: 20,
  beatrice: 22,
  cece: 20,
  deirdre: 19,
  eloise: 21,
};

// convert to array in order to make use of .filter() function
let overTwentyOne = Object.entries(students).filter(([name, age]) => {
  return age >= 21;
}); // [ [ ‘beatrice‘, 22 ], [ ‘eloise‘, 21 ] ]

// turn multidimensional array back into an object
let DrinkingAgeStudents = Object.fromEntries(overTwentyOne);
// { beatrice: 22, eloise: 21 }

需要注意的一点是，使用 Object.fromEntries 会把 Object 中的重复 key 覆盖掉，只保存最后一个，如下：

let students = [
  ["amelia", 22],
  ["beatrice", 22],
  ["eloise", 21],
  ["beatrice", 20],
];

let studentObj = Object.fromEntries(students);
// { amelia: 22, beatrice: 20, eloise: 21 }
// dropped first beatrice!

6、Function.toString() 更新

之前的版本中，Function.toString()直接把空格去掉了：

function greeting() {
  const name = "CSS Tricks";
  console.log(`hello from ${name}`);
}

greeting.toString();
//‘function greeting() {
const name = ‘CSS Tricks‘
console.log(`hello from ${name} //`)
}‘

但是，在 ES2019 中，会完全保留源码格式打印：

function greeting() {
  const name = "CSS Tricks";
  console.log(`hello from ${name}`);
}

greeting.toString();
// ‘function greeting() {
‘ +
//  "  const name = ‘CSS Tricks‘
" +
//  ‘  console.log(`hello from ${name}`)
‘ +
//  ‘}‘

6、Symbol.description

description 是一个只读属性，它会返回 Symbol 对象的可选描述的字符串，用来代替 toString() 方法。

const testSymbol = Symbol("Desc");

testSymbol.description; // "Desc"

testSymbol.toString(); // "Symbol(Desc)"

6、JSON.parse() 改进

行分隔符 (u2028) 和段落分隔符 (u2029)，现在被正确解析，而不是报一个语法错误。

var str = ‘{"name":"Bottleu2028AnGe"}‘
JSON.parse(str)
// {name: "Bottle?AnGe"}

ES2019 中对 Javascript 的新增和改进

原文：https://www.cnblogs.com/frank-link/p/14651292.html