复习ES6的相关内容

• symbol：是ES6新增的基本数据类型

number,string,boolean,null,undefined,symbol(ES6新增)

symbol:定义的值是唯一性

两个symbol类型的值永远不等

例如：
var s1=Symbol()
var s2=Symbol()
s1=== s2
 false

• 扩展运算符( … )

扩展运算符（也称展开操作符）两层作用：

1.将数组转换成数据列表 [a,b,c,d]--->a,b,c,d
例如：
var arr1=[666,777,888]
var arr2=['hello','vuejs']
var result=[...arr1,...arr2]

2.将数据列表转换成数组 a,b,c,d--->[a,b,c,d]

3.展开对象
var result={...obj1,...obj2}
或
result=Object.assign({},obj1,obj2)

例如：
function sum1(str,...args) {
  var result=0;
  for(var i=0;i<args.length;i++) {
    

    result+=args[i]

  }

   return result;
}

sum1('请输入',20,30,40)

• class类

定义一个类：
class Person {

   constructor(a,b) {
     //构造器
     this.属性=a

   }

  方法1() {}
  方法2() {}
  方法3() {}

}

继承一个类：

class Child extends Person {

   constructor(a,b) {
     super()  //代表父类
     //构造器
     this.属性=a

   }

  方法1() {}
  方法2() {}
  方法3() {}

}

• set和map:

set:理解成是一个不重复的数组 

将set类型的数据转换成数组：
var s=new Set()
Array.from(s)
或[...s]

var s=new Set()
s.add()
s.has()
s.delete()
s.size

例如：数组去重：
var arr=[3,34,23,2,2,23,23,3,34,34,34,45]

[...new Set(arr)]

map:理解成是一个对象,增强了对象key的数据类型，以前只能是字符串，现在对象的属性可以是做任意的数据类型！
{
  "name":'jack',
  '10':'abc',
  'undefined':999
}

var m1=new Map()
m1.set(属性名,值) //设置
m1.get(属性名)  //获取
m1.delete(属性名)  //删除


//遍历Map类型获取所有值
for(var [key,value] of m1) {

  console.log(key)
  console.log(value)
}

• Promise：重点

1.用于处理回调地狱的异步解决方案
具体实现：
function waiting() {

    return new Promise((resolve,reject)=>{
    
             setTimeout(function() {
      
                //console.log(2)
                reject('哈哈')
    
            },2000)      

    })

 }


waiting().then(res=>{
   console.log(1)
   console.log('res:',res)
    console.log(3)

}).catch(error=>{

   console.log('error:',error)

})

.then
.catch
.race
.finally
Promise.all([waiting(),waiting2(),waiting3()])
   .then(res=>{


   }).catch(res=>{

})

• async/await(ES2017) 重点

  串行执行：必须先执行第一个异步，将第一个异步的结果返回传递给第二个异步函数，再执行第二个异步的操作过程
  
  //第一个函数
  function waiting() {
      return new Promise((resolve,reject)=>{
            //我这里只是用setTimeout来模拟axios,
               setTimeout(function() {
                  resolve('第二个接口返回')
  
              },2000)
  
          
      })
  
   }
  
  
  //第二个函数
  function waiting2() {
      return new Promise((resolve,reject)=>{
            //我这里只是用setTimeout来模拟axios,
               setTimeout(function() {
                  reject('第二接口返回')
  
              },2000)
  
          
      })
  
   }
  
  
  async function handleFn() {
     console.log(1)
     
     //串行执行，先等待第一个函数返回
      let res=await waiting()
      console.log('res:',res)
      
      //再等待第二个函数返回
      let res2=await waiting2(res)
      console.log(res2)
   }
  
  并行：两个接口同时执行
  
  function waiting() {
      return new Promise((resolve,reject)=>{
            //我这里只是用setTimeout来模拟axios,
               setTimeout(function() {
                  resolve('第二个接口返回')
  
              },2000)
       
      })
  
   }
  
  
  function waiting2() {
      return new Promise((resolve,reject)=>{
            //我这里只是用setTimeout来模拟axios,
               setTimeout(function() {
                  reject('第二接口返回')
  
              },2000)
       
      })
  
   }
  
  async function handleFn() {
     console.log(1)
      //并发执行，waiting(),waiting2()两个接口都成功返回才返回结果
      let res=await Promise.all([waiting(),waiting2()])
       console.log('res:',res)
       console.log('end')
   }
  
   handleFn().catch(res=>{
  
       console.log('error:',res)
   })
  

• 解构赋值

解构赋值的前提条件：解构赋值的=号左侧和右侧类型相同

• 解构对象

var obj={
   name:'hjl',
   info:{
     xuelie:'本科',
     zhiye:'IT'

   }
 
}

var {info:{xuelie,zhiye}}=obj
解构同时也能重命名
var {info:{xuelie:xueli,zhiye:zhuanye}}=obj

• 解构数组

var arr=[
    {id:1001,name:'alice',age:20},
    {id:1002,name:'alice2',age:25},
    {id:1003,name:'alice3',age:22},
]
var [first,second]=arr;

• 箭头函数

  • 格式：(参数1,参数2,…参数n)=>{ //代码段}

  • 面试官：普通函数和箭头函数的区别？

    ​```
    

普通函数： function 函数名(参数1,参数2,…参数n) {

   //代码段
}

箭头函数: (参数1,参数2,…参数n) => {

   //代码段
}

箭头函数： 1.没有自己的this指向，它的this是其父级普通函数所在的this指向（一般在书籍中把“父级函数所在的this指向”称为上下文） 2.箭头函数没有arguments 3.箭头函数不能实例化 ```

• module(export,import)

ES6 模块化

模块化：是前端走向开发复杂项目的起点！
ES模块化关键字：

抛出：export {a,b},export default 对象或方法
引入:import { a,b }或名称  from 'xxx'

模块化开发规范：AMD,CommonJS,CMD,UMD,ES6 module

AMD:主要用于浏览器端，异步规范 例如：require.js
CommonJS:主要用于服务端规范 同步规范 例如：node.js   

    抛出：module.exports
    引入：require('xxx.js')
CMD:主要用于浏览器 异步规范，结合了一些commonjs的思想 例如：sea.js 网名：玉伯
UMD:服务端和浏览器通吃  用服务器端写代码，然后通过某个打包机制跑在浏览器端
ES6 module：ES6推出的模块化规范 服务器端和浏览器端都可以使用

• generator
  • Generator 函数是 ES6 提供的一种异步编程解决方案
  • async/await是Generator的语法糖
  • 语法：

function* 函数名() {
   yield 值或异步函数1
   yield 值或异步函数2
   yield 值或异步函数3

}

调用时必须通过next执行下一个next

• 模板字符串

通过``反引号来定义变量，其中模板字符串中可以解析普通变量
模板字符串取值：${变量}
在模板字符串中也能作运算

例如：
var str=`我的名子叫${obj.name}，
        我的基本信息是${obj.info.xuelie},
        专业：${obj.info.zhiye},
        年龄:${obj.age+10}`

• for of
  • for of在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句
  • 通常对数组，对象，map,set，string遍历
  • 对象不能用for of遍历(但可以通过Objecjt.entries来转换成可迭代对象进行遍历 )
• …

ES2015+如果正常跑在浏览器上，都要通过babel去编译转换成ES5才能正常在浏览器运行