es6一些基本可以使用的东西

const 定义常量

let 块级变量

用let定义的变量只在块当中起作用，离开变量外界的块（括号）就会被销毁。

模板字面量

用于字符串拼接和写模板,使用 ` (反引号，左上角波浪线)，变量使用${} 

var a="大帅比";
var b="你呢";
console.log( `my name is ${a},${b}?` );  //my name is 大帅比,你呢?

var tpl=`<ul class="haha">  
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>`  //不用加 \n来换行了

解构赋值

交换值

var a=1;
var b=2;
[a,b]=[b,a];
console.log(a,b);  // 2 1

从数组里获得元素

var array=[1,2,3,4];
var [a, ,b]=array;
console.log(a,b);  // 1 3

参数解构

var user={name:"李大白",age:"23",sex:"男"}
function getUser( {name,age} ){
    return `我叫${name},今年${age}岁。`;
}
console.log( getUser(user) );  // 我叫李大白,今年23岁。

返回值的解构

function margin(){
   var left=1,right=2,top=3,bottom=4;
   return {left,right,top,bottom}
}
var {left,bottom}=margin();
console.log(left,bottom);   // 1 4

深度匹配

function setting(){
    return { display:{color:'red'},keyboard:{layout:'querty'} }
}

var { display:{color: dis_color },keyboard:{layout: key_layout } }=setting();
console.log(dis_color,key_layout); // red querty

类和继承

class Animal{
    constructor(name){   //构造函数
        this.name=name;
    }
    speak(){   //方法
        console.log(this.name+" makes a noise");
    }
}
var animal=new Animal("dog");
animal.speak();  //dog makes a noise

如果在es5中，要这么写

var Animal=(function(){
    function Myconstructor(name){
        this.name=name;
    }
    Myconstructor.prototype.speak=function(){
        console.log(this.name+" makes a noise");
    }
    return Myconstructor;
})();

var animal=new Animal("dog");
animal.speak();   //dog makes a noise

继承

class Cat extends Animal{
    speak(){
        super.speak();
    }
}
var cat=new Cat("短尾猫");
cat.speak();    //短尾猫 makes a noise

extends关键字代表继承，super关键字代表父类

箭头函数

箭头函数相当于匿名函数，并且简化了函数定义。()中放参数，没有参数就省略，箭头后面是函数体。

var fun1=(x)=>x*x;
var fun2=(x,y)=>{
    if(x>y){
        return true;
    }else{
        return false;
    }
}
var set=(name,age)=>( {name:name,age:age} )  //直接返回对象需要加小括号

fun1(4);  //16
fun2(7,1);  // true
set("李大白","1000");  // Object {name: "李大白", age: "1000"}

es5中this比较坑，当需要外层的this时有几种方法

用变量存储引用

var _this=this;
$(".btn").click(function(){
    _this.sendData();
});

直接绑定

$(".btn").click(function(){
    this.sendData();
}.bind(this) );

es6中

$(".btn").click( ()=> this.sendData() );  //箭头函数this绑定的是词法作用域，肯定指向外层，哪怕用apply，call也没法改变

遍历for...of

es5的遍历

var array=["a","b","c","d"];
for (var i=0,l=array.length;i<l;i++){
    var a=array[i];
    console.log(a);
}

或者

array.forEach(function(a){  //不能用break语句跳出循环,且不能在这个封闭的函数内使用return语句
    console.log(a);
})

es6  for...of

for(var a of array ){  //可以使用break,continue,return等语句
    console.log(a);
}

　　for...of和for...in的区别，for...in主要用于获取属性名，如果用来遍历数组，确实可以获得序号，但序号都是字符串形式。

默认参数

function abc(x=0,y=2,flag=true){
    console.log(x,y,flag);
}

abc();  // 0 2 true
abc(4,0,false); // 4 0 false

剩余参数

用于参数数量不固定的场合，剩余参数前面需要加...

function reduce(base,...nums){
    var result=base;
    for(var i of nums){
        result-=i;
    }
    return result;
}
reduce(10,5,3); // 2

es5

function reduce(base){
    var result=base;
    [].shift.apply(arguments);
    for(var i=0,l=arguments.length;i<l;i++){
        result-=arguments[i];
    }
    return result;
}
reduce(10,5,3);  // 2

展开运算符 ...

Math.max(2,100,1,6,43);  //100
Math.max([2,100,1,6,43]); //NaN
Math.max(...[2,100,1,6,43]); //100   展开的效果

数组拼接也可以使用...

arr1=[2,100,1,6,43];
arr2=["a","b","c","d"];
arr3=arr1.concat(arr2);
arr4=[...arr1,...arr2];

console.log( arr3 );   // [2, 100, 1, 6, 43, "a", "b", "c", "d"]
console.log( arr4 );   // [2, 100, 1, 6, 43, "a", "b", "c", "d"]