前端基础（三）- ES7~ES12

为了方便记忆和称呼，ES2015之后的新知识点我们都统称ES6语法，就没必要去划分得那么细

ES7（2016）

Array.prototype.includes()

includes方法可以判断一个数组是否包含某个指定的值，如果存在返回true，否则false

      const arr = ["es6", "es7", "es8", "es9"];
      console.log(arr.includes("es5")); // false
      console.log(arr.includes("es6")); // true
      console.log(arr.includes("es6", 0)); // true
      console.log(arr.includes("es6", 1)); // false
      console.log(arr.includes("es6", -1)); // false
      console.log(arr.includes("es6", -2)); // false
      console.log(arr.includes("es6", -3)); // false
      console.log(arr.includes("es6", -4)); // true
      console.log(arr.includes("es6", -5)); // true
      /*
        arr.includes(valueFind,IndexFind)
        valueFind,想要查询的值
        includes的第二项参数为可选参数，即从IndexFind处开始查找，如果IndexFind为负数，则从末尾开始往前跳IndexFind绝对值个位置，然后开始往后找
      */

注意：includes（）方法只能用于判断基本数据类型，如果是复杂数据类型，如对象，二维数组，则无法判断，并且能够判断NaN，null，undefined：

	  const arr1 = [1, 2, [3, 4], 5, { name: "lucy" }, NaN, null, undefined];
      console.log(arr1.includes([3, 4])); //false
      console.log(arr1.includes({ name: "lucy" })); //false
      console.log(arr1.includes(NaN)); //true
      console.log(arr1.includes(null)); //true
      console.log(arr1.includes(undefined)); //true

幂运算符 **
以前可以：

Math.pow(2,10);// 1024

现在可以：

console.log(2 ** 10);// 1024

两个**是连在一起的

ES8（2017）

Object.values()

该方法会返回一个数组，其成员是参数对象自身可遍历属性键值

      const obj = {
        name: "lucy",
        age: 12,
        sex: "male",
      };
      console.log(Object.values(obj)); //['lucy', 12, 'male']

Object.entries()

该方法返回一个数组，其成员是对象自身的可遍历属性的键值对数组

      const obj = {
        name: "lucy",
        age: 12,
        sex: "male",
      };
      
      console.log(Object.entries(obj)); // [['name', 'lucy'],['age', 12],['sex', 'male']]

String.prototype.padStart()

该方法可以把指定字符串添加到字符串头部，并返回一个新的字符串

      // /**
      //  * str.padStart(targetLen,padStr)
      //  * targetLen,当前字符串希望被填充到的目标长度，如果targetLen小于当前字符串长度，则返回当前字符串本身
      //  * padStr,用来填充的字符串，可选参数，如果padStr太长，填充后的字符串长度超过了目标长度，则会被截断，保留左侧部分
      //  * /

      const str = "abc";
      console.log(str.padStart(5)); // "  abc"
      console.log(str.padStart(5, "d")); // "ddabc" 把d填充到字符串前面，并且目标字符串长度为5
      console.log(str.padStart(5, "123456")); //"12abc" 把123456填充到字符串前面，目标字符串长度为5，填充后目标字符串太长，自动截断
      console.log(str.padStart(1)); // "abc" 空字符串填充，目标字符串长度为1，小于原字符串，返回原字符串

String.prototype.padEnd()

该方法可以把指定字符串添加到字符串末尾，并返回一个新的字符串，语法同上

      const str = "abc";
      console.log(str.padEnd(5)); // "abc  "
      console.log(str.padEnd(5, "d")); // "abcdd" 把d填充到字符串后面，并且目标字符串长度为5
      console.log(str.padEnd(5, "123456")); //"abc12" 把123456填充到字符串后面，目标字符串长度为5，填充后目标字符串太长，自动截断
      console.log(str.padEnd(1)); // "abc" 空字符串填充，目标字符串长度为1，小于原字符串，返回原字符串

ES9（2018）

for await of
异步迭代器，可以循环等待每一个promise对象变为resolved状态才会进行到下一步。

      function fTimeOut(times) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(times);
          }, times);
        });
      }
      
      const arr = [fTimeOut(1000), fTimeOut(2000)];
      for (const item of arr) {
        console.log(Date.now(), item.then(console.log));
      }

这里可以看出，for。。。of并没有能够对异步迭代做一个遍历，它是先得到了结果，然后才执行的FTimeOut函数
我们换个写法：

      function fTimeOut(times) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(times);
          }, times);
        });
      }

      async function timeTest() {
        const arr = [fTimeOut(1000), fTimeOut(2000)];
        for await (const item of arr) {
          console.log(Date.now(), item);
        }
      }
      timeTest();

看看结果：

for await of 会等待每个Promise对象变为resolved状态才会进行下一步

ES10（2019）

Object.fromEntries()：把键值对列表转换成一个对象

      const arr = [
        ["a", "hello"],
        ["b", "world"],
      ];
      console.log(Object.fromEntries(arr));//{a: 'hello', b: 'world'}

是和Object.entries()对应的操作
String.prototype.trimStart()：删除字符串开头的空格
String.prototype.trimEnd() ：删除字符串结尾的空格

try…catch异常可选

在ES10之前catch的err参数是必须的，ES10之后可以省略这个参数

      try {
        console.log("ok");
      } catch {
        console.log("error");
      }

JSON.Stringify增强
ES10中修复了一下对于JSON.stringify在展示一些超范围的Unicode编码时错误的问题。

	  // "\uD83D\uDE0E" 多字节字符
      console.log(JSON.stringify("\uD83D\uDE0E"));//"😎"
      console.log(JSON.stringify("\uD83D"));//"\ud83d" 这是一个无效的字符串，以前会替换为特殊字符，现在转义为JSON转义序列

ES11（2020）

空值合并运算符（??）

当左侧操作数为undefined或者null时，返回右侧操作数，否则返回左侧操作数

      const str1 = undefined ?? "right";
      const str2 = null ?? "right";
      const str3 = "left" ?? "right";
      console.log(str1); // right
      console.log(str2); // right
      console.log(str3); // left

对比逻辑或操作符（||）： 逻辑或在左侧操作符为假时返回右侧操作数，但是对于（’’，0，NaN，false），均为假，返回右侧操作数
可选链操作符（?.）
可选链操作符允许获取位于连接对象深处的属性值，不必明确验证链中的每个引用是否有效，该操作符类似于’.'操作符，但是在引用null或者undefined时不会引起错误，形式上也更加简洁

      const obj = {
        a: {
          sec: {
            b: "hello world",
          },
        },
      };
      const str1 = obj && obj.a && obj.a.sec && obj.a.sec.b;
      const str2 = obj?.a?.sec?.b;
      console.log(str1); // hello world
      console.log(str2); // hello world

note：不能用于赋值

      const obj = {}
      obj?.a = 1 //Uncaught SyntaxError: Invalid left-hand side in assignment

ES12（2021）

逻辑运算符与赋值表达式（&&=，||=，??=）

• 逻辑与赋值（&&=）

      let a = 1;
      let b = 2;
      a &&= b;
      console.log(a); // 2  相当于 a && (a = b)

• 逻辑或赋值（||=）

      let a = 1;
      let b = 2;
      let c = false;
      a ||= b;
      c ||= b;
      console.log(a, c); // 1 2 相当于a || (a = b)

• 逻辑空赋值（??=）

      let a = 1;
      let b = 2;
      let c = false;
      let d = null;
      let e = undefined;
      a ??= b;
      c ??= b;
      d ??= b;
      e ??= b;
      console.log(a, c, d, e); // 1 false 2 2 相当于a ?? (a = b)

数字分割符“_”

      console.log(123456789); // 123456789
      console.log(123_456_789); // 123456789

note：以下情况报错

• 放在数值最前面或者最后面
• 两个或以上分隔符放在一起
• 小数点前后
• 科学计数法中，表示指数的e（E）前后

      3._1415926
      3_.1415
      3_e14
      3e_14
      123__456
      _123456
      123456_