ES2020及之前的相关新特性汇总

ECMAScript：是一种可以在宿主环境中执行计算并能操作可计算对象的基于对象的程序设计语言

ES7(在2016年推出的新特性)

1、Array中的includes, includes(对象元素，索引号)

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

var arr=[1,2,3] 
 console.log(arr.includes(1))//true

另外此方法也可以用于string字符串

include是来解决indexOf的不足，它可以判断数组是否含有NAN，或者是否有空值

2、取幂运算符

“**”表示的是取幂运算。

var num=3**2  //9
Math.pow(3,2)//9,上面的相当于Math.pow

ES8(在2017年推出的新特性)

1、async/await 用于异步函数，有序控制函数的执行

2、string padding

2.1 str.padStart(targetLength [, padString])字符串首部的填补，targetLength确定字符串的总长度，如果字符串本
身达不到targetLength，则利用定义的[, padString]来填补

var str="hello"   
console.log(str.padStart(8,"0"))//000hello

2.2 str.padEnd(targetLength [, padString])字符串尾部的填补

var str="hello"  
console.log(str.padEnd(8,"0"))//hello000

3、Object.values()方法返回一个给定对象所有可枚举属性值的数组,

var obj={names:'tom',age:18}

console.log(Object.values(obj))// ['tom',18]

Object.entries()方法返回一个给定对象自身可遍历属性[key,value]的数组

var obj={names:'tom',age:18}
Object.entries(obj)//[["names","tom"],["age",18]]

ES9(2018新特性)

1、Rest/Spread 属性//对象剩余参数和扩展运算符

之前的...[]，只针对数组
现在的新特性可以用于对象了

 var obj = {
        a: 1,
        b: {
          uname: "tom",
        },
        c: 3,
      };
  var obj1 = {
        ...obj,
        d: 4,
      };
console.log(obj1);//{a: 1,b: {uname: "tom",}, c: 3, d: 4}

2、正则表达式的一些特性，反向断言、命名捕获组

==============================

扫描二维码关注公众号，回复： 13436849 查看本文章

ES10(2019新特性)

1、trimStart/trimEnd 用于去除头尾上的空格、换行符等

 const string = " Hello ES2019! ";
      string.trimStart();
      console.log(string.trimStart()); // 'Hello ES2019! '
     
      string.trimEnd();  // ' Hello ES2019!'

2、Object.fromEntries()

ES8为我们引入了Object.entries把一个对象转为[key, value]键值对的形式，可以运用于像 Map 这种结构中。凡事有来
有回，Object.fromEntries()用于把键值对还原成对象结构。

const entries = [ ['foo', 'bar'] ];
const object = Object.fromEntries(entries);
// { foo: 'bar' }

================

3、数组扁平化的新特性

3.1
Array.prototype.flat() / Array.prototype.flatMap() //默认参数为1,类型是数字 flat平坦的，水平的，光滑的
把数组展平是Array原型给我们带来的新特性，通过传入层级深度参数（默认为1），来为下层数组提升层级。如果想提升
所有层级可以写一个比较大的数字甚至是Infinity，当然不推荐这么做。

 var arr2=[1,2,[3,[4]]]
  console.log(arr2.flat(2),11);//[1,2,3,4]

3.2
Array.prototype.flatMap()它是Array.prototype.map()和Array.prototype.flat()的组合，通过对map调整后的数据尝试
展平操作。

[1, 2, [3, 4]].flatMap(v => {
  if (typeof v === 'number') {
    return v * 2
  } else {
    return v.map(v => v * 2)
  }
})
// [2, 4, 6, 8]

============
4.catch 的参数改为可选，在新规范中，我们可以省略catch绑定的参数和括号。

const isValidJSON = json => {
  try {
    JSON.parse(json);
    return true;
  } catch {
    return false;
  }
};

注明：try catch 的用途
在程序逻辑中，需要在易出现问题的逻辑代码片段上，加持try-catch方法。
这样做可以抛出错误，但是不会影响整个程序运转。
try {
// 你的逻辑代码片段
} catch (e) {
// 错误处理代码片段
}
===========================

5、Symbol.description

Symbol是ES6中引入的基本数据类型，可以用作对象属性的标识符。描述属性是只读的，可用于获取符号对象的描述，更好
了解它的作用。

const symbol = Symbol('This is a Symbol');
symbol;
// Symbol(This is a Symbol)
Symbol.description;
// 'This is a Symbol'

========================

6、JSON.stringify() 加强格式转化

现在在字符代码之前插入转义字符，结果仍是可读且有效的UTF-8/UTF-16代码：

JSON.stringify('\uD83D');
// '"\\ud83d"'

可以将表情代码正常转译
=====================

7、Array.prototype.sort() 更加稳定（2019前对复杂的数组排序不稳定）

现在新特性更加稳定

let array = [
  {a: 1, b: 2},
  {a: 2, b: 2},
  {a: 1, b: 3},
  {a: 2, b: 4},
  {a: 5, b: 3}
];
array.sort((a, b) => a.a - b.a);

//输出结果
0: {a: 1, b: 2}
1: {a: 1, b: 3}
2: {a: 2, b: 2}
3: {a: 2, b: 4}
4: {a: 5, b: 3}

==========================

8、Function.prototype.toString() 重新修订

从ES2019开始，Function.prototype.toString()将从头到尾返回源代码中的实际文本片段。这意味着还将返回注释、空格
和语法详细信息。
之前，Function.prototype.toString()只会返回了函数的主体，但没有注释和空格。

foo.toString();
// 'function foo() {}'

但现在，函数返回的结果与编写的一致。

foo.toString();
// 'function /* a comment  */ foo () {}'

ES11（2020新特性）

1、Promise.allSettled

当我们处理多个Promise时，特别是当它们相互依赖时，记录每个Promise所发生的事情来调试错误是很有必要的。通过Promise.allSettled，我们可以创建一个新的Promise，它只在所有传递给它的Promise都完成时返回一个数组，其中包含每个Promise的数据。

const p1 = new Promise((res, rej) => setTimeout(res, 1000));

const p2 = new Promise((res, rej) => setTimeout(rej, 1000));

Promise.allSettled([p1, p2]).then(data => console.log(data));

// [
//   Object { status: "fulfilled", value: undefined},
//   Object { status: "rejected", reason: undefined}
// ]

=========

2、可选的链接操作

与合并空操作符类似，JavaScript在处理错误值时可能无法按我们希望的方式工作。如果我们想要的是未定义的，我们可以返回一个值，但是如果到它的路径是未定义的呢?通过在.之前添加一个问号，我们可以使值的路径的任何部分成为可选的，这样我们仍然可以与它交互。

let person = {};

console.log(person.profile.name ?? "Anonymous"); // person.profile is undefined
console.log(person?.profile?.name ?? "Anonymous");
console.log(person?.profile?.age ?? 18);

3、私有属性，（好比刚认识的女孩你只能知道她的名字，但是不会告诉你她的年龄和体重，例如：this.#age:age）