学习笔记：ES6新增语法

let

区别1:
let定义的变量只能在代码块{}里面使用,形成一个{}块级作用域
var作用于函数作用域

区别2:
let不允许重复声明,它是一个封闭空间,解决了i问题

var a=5var a=12 //-->a=5let a=5let a=12 //-->error

区别3:

console.log('a'+a)var a=1 //undefined 有变量提升console.log('b'+b)let b=2 // b is not defined  没有变量提升

const

const用来定义常量,一旦定义了,后面就不能修改了

箭头函数=>

*function()中this是指向调用这个函数的对象

• 箭头函数中,this指向了window
• arguments,不能使用
  由于this在箭头函数中已经按照词法作用域绑定了，所以，用call()或者apply()调用箭头函数时，无法对this进行绑定，即传入的第一个参数被忽略

解构赋值

1. 左右两边结构一样
2. 右边必须是合法结构（错误例子：{12,5,8}）
3. 声明和赋值写在一句话中（错误例子：let [a,b]; [a,b]=[12,5];）

//数组let [a,b,c]=[12,5,101] // a=12,b=5,c=101//JSONlet {a,b,c}={b:5,a:12,c:101} // json跟顺序无关,a=12,b=5,c=101//混合型，左右结构、顺序一致let [{a,b},[n1,n2,n3],num,str] = [{a:12,b:5},[12,5,8],8,'EcmaScript']//a=3,b=8,c is not defined    对数组的解构var [a,b]=[3,5,8];//x=V,y=u,z=e    对字符串的结构var [x,y,z]=Vue;//m=10,n=20    对象的解构,对key进行拆分var {n,m}={m:10,n:20};

复制数组

var arr1=[1,2,3,4]for(var i=0;i<arr1.length;i++){    arr2[i]=arr1[i]}arr2=Array.from(arr1)

JSON

//简写，当key,value一样时，可以只写一个{m:m,n:n}--->{m,n}//其中也可以有key、value不相同的let a=12;let b=5;let json={a,b,c:8}；  //{a:a,b:b,c:8}console.log(json);  //{a:12,b:5,c:8}//JSON里的方法简写,`:function`可以省略let json={  a:12,  show(){  //show:function(){    alert(this.a)  }}

字符串模板 ``（反单引号）

用于字符串连接，可以换行

`string text ${expression} string text`

rest参数...（3个点）

…args必须是最后一个，不能放前面

  var [x,...y]=[4,8,10,30]  //x=4,y=[8,10,30]  y成了动态参数  let xy=[...'es6'];  //['e','s','6']  拆解  //数组拆分  console.log(...[4,8])  //4,8  //数组拆分的进阶  let arr1 =[1,3];let arr2=[4,8];  [...arr1,...arr2]  //[1，3,4,8]

默认参数

function show(a,b=5,c=12){  console.log(a,b,c);}show(99,19)    //99,19,12show(99)    //99,5,12

for of循环

//for invar arr=['apple','banana','orange','pear']for(var i in arr){    console.log(i); // for in 出来的是 索引0 1 2 3}//for ofvar arr=['apple','banana','orange','pear']for(var i of arr){    console.log.(i); // for of 出来的是 实际apple,banana等}

for of可以循环数组,但是不能循环json,因为它是为了与map配合使用

Map（数据结构）

与for of配合使用，是一个key、value

var map = new Map();map.set(name,value); // 可以设置name,valuemap.get(name); // 可以单独获取namemap.delete(name); // 可以单独删除name//与for of 的配合for(var name of map){    console.log(name);  // a,apple   b,banana}for(var [key,value] of map){    console.log(key,value); // key,value}for(var key of map.keys) // 可以只循环map中的key值

map（数组）

映射–原数组映射成新数组，一个对应一个

//例一   let arr=[12,5,8];    let result=arr.map(item=>item*2);    alert(result);//例二    let score=[19, 85, 99, 25, 90];    let result=score.map(item=>item>=60?'及格':'不及格');    alert(score);    alert(result);

reduce（数组）

汇总–求和–多个变成一个

//求和let arr=[12,69,180,8763];    let result=arr.reduce(function (tmp, item, index){      //alert(tmp+','+item+','+index);      return tmp+item;    });    alert(result);//求平均数let arr=[12,69,180,8763];    let result=arr.reduce(function (tmp, item, index){      if(index!=arr.length-1){ //不是最后一次        return tmp+item;      }else{                    //最后一次        return (tmp+item)/arr.length;      }    });    alert(result);

filter（数组）

过滤器

    let arr=[12,5,8,99,27,36,75,11];    //选择能够被3整除的数    let result=arr.filter(item=>item%3==0);    alert(result);

forEach（数组）

循环–迭代

let arr=[12,5,8,9];    arr.forEach((item,index)=>{      alert(index+': '+item);    });

面向对象class

1. 使用了class关键字，现在构造函数和类分开了
2. class里面直接加方法

//old    function User(name, pass){      this.name=name;      this.pass=pass;    }    User.prototype.showName=function (){      alert(this.name);    };    User.prototype.showPass=function (){      alert(this.pass);    };//ES6    class User{      constructor(name, pass){        this.name=name;        this.pass=pass;      }      showName(){        alert(this.name);      }      showPass(){        alert(this.pass);      }    }

继承extends

old: 子类.prototype = new 父类
ES6: class 子类 extends 父类{}

supper关键字：超类、父类

//oldfunction VipUser(name, pass, level){      User.call(this, name, pass);      this.level=level;    }    VipUser.prototype=new User();    VipUser.prototype.constructor=VipUser;    VipUser.prototype.showLevel=function (){      alert(this.level);    };//ES6    class VipUser extends User{      constructor(name, pass, level){        super(name, pass);        this.level=level;      }      showLevel(){        alert(this.level);      }    }

模块化

exprot default // 导出

import modA from './a.js' // 引入模块