ES6/ES7/ES8常用特性和新特性

本文链接：https://blog.csdn.net/qq_39490750/article/details/103988178

>ES6

变量的改变，添加了块级作用域的概念

let声明变量（块级作用域），let是更完美的var，它声明的全局变量不是全局属性widow的变量，这便解决了for循环中变量覆盖的问题

const声明常量(块级作用域)

 // var 
var a = [];
for (var index = 0; index < 10; index++) {

  a[index]=function () {
      console.log(index);// index会向上查找a作用域的index值,是在循环体执行完之后才会执行的代码块
  }

}
console.log(index); // 10
a[6](); // 10

// let
const a = [];
for (let index = 0; index < 10; index++) {
  a[index]=function () { console.log(index); }  // index只在本轮循环中生效，每一次循环都会新建一个变量
}
a[6](); // 6
console.log(index); // index not defined
// 也可以使用闭包的方式解决
var arr = []
for(var i=0;i<10;i++){

(function(s){
arr.push(function(){ return console.log(s)})
})(i)
 
}
arr[0]()
arr[2]()

在这里插入图片描述

字符串新增方法

let str = 'happy';
console.log(str.includes('ha')) // true
console.log(str.repeat(3)) // 'happyhappyhappy'
console.log(str.startsWith('ha')); // true，用于检测字符串是否以指定的前缀开始
console.log(str.endsWith('p', 4)); // true,用于判断字符串是否以指定后缀结尾
ps：str.endswith(suffix[, start[, end]])
		suffix -- 该参数可以是一个字符串或者是一个元素。
		start -- 字符串中的开始位置，0 为第一个字符索引值。
		end -- 字符中结束位置，1 为第一个字符索引值。

函数可以像C/C++那样设置默认参数值，增加数据容错能力

（数据是否能够安全地储存）

· 对象

键值对重名简写


function people(name, age) {
    return {
        name,
        age
    };
}

对象字面量简写

const people = {
    name: 'lux',
    getName () {    // 省略冒号(:) 和function关键字
        console.log(this.name)
    }
}

提供对象对象合并

const obj1 = {
  a: 1
}
const obj = Object.assign({c: 2}, obj1)
console.log(obj); // {c: 2, a: 1}

数据解构和rest参数

// 对象解构
const people = {
    name: 'cs',
    age: 25
}
const { name, age } = people; // 'cs', 25

// 数组解构 
const arr = [1, 3, 4];
const [a, b, c] = arr; // 1, 3, 4

// rest参数,返回的是一个对象
const obj = {a: 2, b: 3, c: 4, d: 5};
const {a, ...rest} = obj; // 2 { b: 3, c: 4, d: 5 }
>数据展开
// 展开对象(和上面Object.assign()一样，也是对象合并)
const obj = {a: 2, b: 3}
console.log({...obj, c: 5});// {a 2, b: 3, c: 5}
// 展开数组
const arr = [1, 3, 4]
console.log([...arr, 5]); // [1, 3, 4, 5]

· Promise对象

Promise自身有我们常用的all、race、resolve、reject等方法，原型中还有catch、then等方法，所以我们创建Promise实例时，将then会作为callback使用，避免回调地狱的出现。
在then的第一个resolve回调函数中代码出错，不用卡死js的执行，而是会进入到catch中，捕获err原因。
Promise.all的提供了并行的操作能力，并且是在所有的一步操作执行完成后才执行回调。all接收一个数组参数，它会把所有异步操作的结果放进一个数组中传给then。
race也提供了并行的操作能力，和all方法相反，也就是：all是以函数中执行最慢的那一个为准，race是以函数中执行最快的那一个为准。race接收一个数组参数，它会把执行最快的那个异步操作的结果传给then。

all方法适用于游戏类一些场景，所有素材、静态资源请求都加载完成，在进行页面的初始化

// all的使用
function async1 () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('async1');
      resolve('async1完成')
    }, 1000);
  })
}

function async2 () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('async2');
      resolve('async2完成')
    }, 2000);
  })
}

function async3 () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
    console.log('async3');
      resolve('async3完成')
    }, 3000);
  })
}
Promise.all([async1(), async2(), async3()]).then((result) => {
  console.log(result);
  // do something...
}).catch((err) => {
  console.log(err);
});

// result:
async1
async2
async3
[ 'async1完成', 'async2完成', 'async3完成' ]

race方法适用于请求超时的场景，比如请求图片资源，超过5秒就reject操作。

function requestImg() {
 return new Promise((resolve, reject) => {
   setTimeout(() => {
     resolve('请求图片资源')
   }, 6000);
 })
}
function timeout() { 
 return new Promise((resolve, reject) => {
   setTimeout(() => {
     reject('请求超时');
   }, 3000);
 })
}
Promise.race([requestImg(), timeout()]).then((result) => {
 console.log(result);
}).catch((err) => {
 console.log(err);
});
// result:
请求超时

· Set

Set实例的常用方法和属性add,delete,clear,has、size

const s = new Set(['A', 'B', 'C']);
console.log(s); // Set { 'A', 'B', 'C' }
console.log(s.has('A')) // true，bool值
console.log(s.size) // 3
console.log(s.clear()) // Set {}  //undefined
console.log(s.delete('A')) // true,bool值

· 暂时性死区(TDZ)

只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”
ES6规定暂时性死区和let、const语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。这样的错误在ES5是很常见的，现在有了这种规定，避免此类错误就很容易了。
暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量

代码解释：

if (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

>ES7

ES7在ES6的基础上添加三项内容：求幂运算符（**）、Array.prototype.includes()方法、函数作用域中严格模式的变更。

求幂运算符（**），使用更简洁

Math.pow(3, 2) === 3 ** 2    // 9

Array.prototype.includes()
数组原型的方法,查找一个数值是否在数组中，只能判断一些简单类型的数据，对于复杂类型的数据无法判断。该方法接受两个参数，分别是查询的数据和初始的查询索引值。

[1, 2, 3].indexOf(3) > -1 // true
等同于：
[1, 2, 3].includes(3) // true

两者的优缺点和使用场景

· 简便性

includes方法略胜一筹，直接返回bool。indexOf需要返回数组下标，我们需要对下标值在进行操作，进而判断是否在数组中。

· 精确性

两者这都是通过===进行数据处理，但是对NaN数值的处理行为不同。includes对NaN的处理不会遵循严格模式去处理，所以返回true。indexOf会按照严格模式去处理，返回-1。

[1, 2, NaN].includes(NaN) // true
[1, 2, NaN].indexOf(NaN) // -1

· 使用场景

如果仅仅查找数据是否在数组中，建议使用includes，如果是查找数据的索引位置，建议使用indexOf更好一些

>ES8

async、await异步解决方案

ES8中把async和await变得更加方便，它其实就是Generator的语法糖。async/await是写异步代码的新方式，以前的方法有回调函数和Promise。相比于Promise，它更加简洁，并且处理错误、条件语句、获取中间值都更加方便。

·Object.entries()

该方法会将某个对象的可枚举属性与值按照二维数组的方式返回。（如果目标对象是数组，则会将数组的下标作为键值返回）

Object.entries({ one: 1, two: 2 })    //[['one', 1], ['two', 2]]
Object.extries([1, 3])    //[['0', 1], ['1', 3]]

·Object.values()

只返回键值对中的值，结果是一维数组

Object.values({one: 1, two: 2})    // [1, 2]
Object.values({3: 'a', 1: 'b', 2: 'c'}) // ['b', 'c', 'a'] 
Object.extries([1, 3])     //[1, 3]

·字符串填充padStart()、padEnd()

该方法可以使得字符串达到固定长度。它有两个参数，字符串目标长度和填充内容

'react'.padStart(10, 'm')      //'mmmmmreact'
'react'.padEnd(10, 'm')       //' reactmmmmm'
'react'.padStart(3, 'm')     // 'vue'