ES6常用新特性

使用ES6新特性有助于提高JavaScript编程的效率和质量。ES6版本提供了很多新的特性，接下来我列举项目中常用的ES6+的特性：

1. let\ const

2. 箭头函数

3. 模板字符串

4. 结构赋值

5. 拓展运算符

6. 数组新增

7. Promise

---

1. let\ const

let表示声明变量，而const表示声明常量，两者都为块级作用域；const 声明的变量都会被认为是常量，意思就是它的值被设置完成后就不能再修改了 如果const的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址没有变就行：

2. 箭头函数

ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体；

在使用箭头函数时要注意以下几点：

1. 如果只有一个参数，（）可以省

2. 不需要 function 关键字来创建函数
3. 省略 return 关键字
4. 继承当前上下文的 this 关键字
5. 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象
6. 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误
7. 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替
8. 不可以使用yield命令，因此箭头函数不能用作 Generator 函数

9. // ES5
   var add = function (a, b) {
       return a + b;
   };
   // 使用箭头函数
   var add = (a, b) => a + b;
   
   // ES5
   [1,2,3].map((function(x){
       return x + 1;
   }).bind(this));
       
   // 使用箭头函数
   [1,2,3].map(x => x + 1);
   

   3.模板字符串

需要拼接字符串的时候尽量改成使用模板字符串，模板字符串可以使字符串的拼接更加的简洁和直观

• 不使用模板字符串

var name = 'The weather today is ' + sun + ' ' + rain + '.'

• 使用模板字符串

var name = `The weather today is ${sun} ${rain}.`

4.结构赋值

从数组和对象中提取值，对变量进行赋值，这被称为解构，解构赋值可以直接使用对象的某个属性，而不需要通过属性访问的形式使用。

获取数组中的值：

	//获取数组中的值
    let[a,b,c]=[1,2,3]
    console.log(a,b,c)//1,2,3
    
    //获取数组中的值
    let [a,b]=[123,23]
    console.log(a,b)//123 23

获取对象中的值：

	//获取对象中的值
    let {a,c,d}={a:12,c:5,d:6}
    console.log(a,c,d)

5.拓展运算符

• 收集剩余的参数

  function show(a,b,...args){
  	alert(args)
  }
  show(12,12,34,3,2,4,28)//打印出来的结果是34,3,2,4,28   (...args必须放在最后面)
  

• 展开数组

  //普通函数
  	function show(a,b,c){
  		alert(a);
  		alert(b);
  		alert(c)
  	}
  	show(1,2,3)//打印出来的结果弹出1,再弹出2，再弹出3
  	
      //数组展开
      let arr1=[1,2,3]
      let arr2=[5,6,7]
      let arr=[...arr1,...arr2];
      alert(arr)
  

  6.数组新增

• map例子

  //例子1
  [45,78,278,890]
  [
      {name:'one',level:0,role:9},
      {name:'two',level:0,role:8},
      {name:'three',level:0,role:7},
      {name:'four',level:0,role:6},
  ]
  
  //例子2
  let arr=[12,5,8];
      let result = arr.map((item)=>{
      return item*2;
      })
  alert(result)//24,10,16
  
  //例子3
  let arr=[12,5,8];
  let result = arr.map(item=>item*2);
  alert(result)//24,10,16
  

  forEach例子

  let arr=[12,3,45,6,566];
  arr.forEach((item,index)=>{
  	alert(index+':'+item)//0:12  1:3  2:45  3:6  4:566
  })
  

  filter例子

  //例子1
  let arr=[12,5,8,99,67,87];
  let result=arr.filter(item=>{
  	if(item%3==0){
  		return true;
  	}else{
  		return false;
  	}
  });
  alert(result);//12,99,87
  
  //例子2
  let arr=[12,5,8,99,67,87];
  let result=arr.filter(item=>{
  	alert(item%3==0);
  });//弹出布尔值
  

  reduce例子

• //例子1,算平均数
  let score=[89,12,34,23,45,55];
  let result = score.reduce(function(tmp,item,index){
  return tmp+item;
  })
  alert(result/score.length)//43(把这几个数求平均数)
  
  //例子2
  let arr=[12,67,67,889,97];
  let result=arr.reduce(function(tmp,item,index){
  	if(index!=this.length-1){//不是最后一次
  		return tmp+item;
  	}else{//最后一次
  		return(tmp+item)
  	}
  })
  alert(result);//1132
  

  set的几种常见方法

  1、add()：用于数据的添加。
  2、delete()：用于数据的删除。
  3、size()：用于计算set对象的大小（相当于数组的长度）。
  4、clear()：清空数据。
  5、has()：用于寻找set对象中是否存在某个值。

• let set = new Set([1,1,2,3])
  console.log(set); // 输出：1，2，3  原因：set方法自动去重
  console.log(set.add('z'));  // 输出：1,2,3,z
  console.log(set.has('z')); //输出：true  原因：存在返回true，否则false
  console.log(set.delete(1)); //输出：true  原因：删除成功返回true，失败返回false
  set.clear();
  console.log(set.size); //输出：0  原因：set.clear() 已经将对象清空
  

  7. Promise

Promise，译为承诺，是异步编程的一种解决方案，比传统的解决方案（回调函数）更加合理和更加强

有三种状态：

分别是pending（进行中）、fulfilled（resolved）（已成功）、rejected（已失败）

优点

• 链式操作减低了编码难度
• 代码可读性明显增强                                                                                                                    

  用法：

• 1、Promise对象是一个构造函数

• 2、Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject：

  • resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”
  • reject函数的作用是，将Promise对象的状态从“未完成”变为“失败

• 3、实例方法：Promise构建出来的实例存在以下方法

  • then()：then是实例状态发生改变时的回调函数，第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数
  • catch()：catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数
  • finally()：finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作
• 4、构造函数方法：Promise构造函数存在以下方法
  • all()：Promise.all()方法用于将多个 Promise实例，包装成一个新的 Promise实例
  • race()：Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实
  • allSettled()：Promise.allSettled()方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例
  • resolve()：将现有对象转为 Promise对象
  • reject()：Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected
• 使用场景：
• 将图片的加载写成一个Promise，一旦加载完成，Promise的状态就发生变化
• 通过链式操作，将多个渲染数据分别给个then，让其各司其职。或当下个异步请求依赖上个请求结果的时候，我们也能够通过链式操作友好解决问题
• 通过all()实现多个请求合并在一起，汇总所有请求结果，只需设置一个loading即可
• 通过race可以设置图片请求超时