ES6

ES6

声明方式

1.var（原始方式）
- 可以重复声明
- 不能定义常量 var PI=3.14
- 不支持块级作用域 if（true）{var a=10}

2.let
3.const

解构

let arr=[1,2,3]
let [a,b,c]=arr;
console.log(a,b,c)

• 解构的时候 ，等号两边的结构类似，右边还必须是一个真实的值
• 默认解构：有值就用没有就用默认值

模板字符串

1. 可以嵌套变量
2. 可以折行
3. 带标签的模板字符串类似于函数调用
   
   • 参数1：文本的数组
   • -

let name='zf',age=8;
let desc=`${name}今年${age}`;
function replace(desc){
desc.replace(/\$\{([^>]+)\}/g,function(matched,key){
  return eval(desc)
})
}
console.log(desc)

• map：把老数组里的每一个元素映射为一个新数组的每一项
• repeat
• includes
• indexof

展开运算符

...
let arr1=[1,2]
let arr2=[3,4]
let arr3=[...arr1,...arr2]//[1,2,3,4]
//参数1：target  参数2+：数据源
Object.assign(obj3,obj1,obj2)
//解构拼接
obj3={...obj1,...obj2}

函数

1. 必填项不填报错
2. 某些参数没有给传参可以有默认值

function ajax(url=new Error('url不能为空'),method='GET',dataType='json'){

}

• foreach
• reduce:计算，汇总 把数组中的一堆值计算出来一个值 从左往右

//参数2是初始值
//上一次执行结果会成为下一次的初始值
//没有初始值，第一次执行函数 val=第一个元素  item=第二个元素
let arr=[1,2,3]
let result=arr.reduce(function(val,item,index,origin){
    let sum=val+item
    if(index==arr.length-1){
       return sum/arr.length
    }else{
        return sum
    }
},0)
//原理
Array.prototype.reduceRight=function(reducer,intialVal){
   for(let i=this.length-1;i>=0;i--){
     initialVal=reducer(initialVal,this[i],i,this)
   }
   return initialVal;
}

• filter:返回true，此元素保留在新数组，返回false删除

   //原理
       Array.prototyep.filter=function(fn){
       let  newArr=[];
       for(let i=0;i<this.length;i++){
          let flag=fn(this[i]);
          flag&&newArr.push(this[i])
        }
      }
      //使用
      let arr=[24,56,88,90]
      let arr1=arr.filter(function(item){return item>=60})
      //类数组转数组
      Array.from(arguments).forEach(function(item){})
      //super
  

箭头函数

1. 更简单的声明函数的方法
2. 只有一个参数可以省略小括号 let double=a=>a*2
3. 只有返回值，没有别的函数体代码，可以省略花括号
4. 箭头函数没有自己的this会使用上层的this
5. this随着调用者变化的时候尽量不要使用this

类

1. 以前js里的类和构造函数是一体的
2. 类里边可以定义构造函数,创建一个类的实例的时候会调用构造函数
3. 静态属性属于类，不需要new就可以直接调用

class Parent{
   constructor(name){
      this.name=name   //实例的私有属性
    }
   getName(){  //实例的公有属性-》原型上的属性
    console.log(this.name)
   }
}
let p=new Parent('zf');
p.getName()

生成器（genertor）&&迭代器（Interator）

1. 定义
   
   • 生成器：用来生成迭代器
   • 迭代器：是个对象，可以通过不断调用方法得到一个结果
2. koa的基础，以及async await基础
3. 生成器函数不同于普通函数
   
   • 会返回迭代器
   • 调用中途可以暂停 yield
   • generator+promise可以解决异步问题

function read(books){
    let index=0;
   return {
      next(){
        let done=index==books.length-1
        let value=books[index++]
        return {
            value,done
        }
      }
   }
}
//迭代器:可以不停的调用next方法得到一个结果{value,done}
let it =read('js','node')
//it有一个方法next，每次调用next都会返回一个结果{value,done}
let r1=ir.next
let result;
do{
  resulr=it.next();
  console.log(result)
}while(!result.done)

Promise

1. 是个类，可以创建实例
2. 一般是异步任务，需要很长时间执行
3. 解决回调地狱

4. 三种状态

   • pending:初始态
   • fulfilled：成功态
   • rejected：失败态

5. 优点

   • 对象的状态不受外界影响
   • 一旦状态改变就不会再变，任何时候都可以得到这个结果
6. 缺点
   
   • 无法取消Promise，一旦新建它就会立即执行，无法中途取消
   • 不设置回调函数会在内部抛出错误，不会反应到外部
   • 处于pending状态无法得知目前进展到哪一个阶段
   • 如果某些事件不断的发生，一般来说，建议使用Stream模式
7. 关于执行顺序

let promise =new Promise(function(resolve,reject){
   console.log('Promise')
})
Promise.then(function(){
console.log('resolved')
})
console.log('Hi')
//=>Promise Promise新建后立即执行，所以首先输出
//=>  Hi  
//=> resolved  then方法指定的回调函数，将当前脚本所有同步任务执行完才会执行，所以最后输出

babel-prolyfill对es6的API的支持

其他

深拷贝

let obj=JSON.parse(JSON.stringify(obj1));

function clone(origin){
let newObj={}
    for(let key in origin){
      if(typeof origin[key]=='object'){
           newObj[key]=clone(origin[key])
        }else{
            newObj[key]=origin[key]
        }
    }
    return newObj;
}
let obj6=clone(obj5)

• 作用域
  
  • 全局作用域
  • 函数作用域