es6中一些基本的使用方法
const 定义常量
let 块级变量
用let定义的变量只在块当中起作用，离开变量外界的块（括号）就会被销毁。
模板字面量
用于字符串拼接和写模板,使用 ` (反引号，左上角波浪线)，变量使用${}
1 var a="大帅比"; 2 var b="你呢"; 3 console.log( `my name is ${a},${b}?` ); //my name is 大帅比,你呢? 4 5 var tpl=` - 6
- 1 7
- 2 8
- 3 9
- 4 10
- 5 11
解构赋值
交换值
1 var a=1;2 var b=2;3 [a,b]=[b,a];4 console.log(a,b); // 2 1
从数组里获得元素
1 var array=[1,2,3,4];2 var [a, ,b]=array;3 console.log(a,b); // 1 3
参数解构
1 var user={name:"李大白",age:"23",sex:"男"}2 function getUser( {name,age} ){3 return `我叫${name},今年${age}岁。`;4 }5 console.log( getUser(user) ); // 我叫李大白,今年23岁。 返回值的解构
1 function margin(){2 var left=1,right=2,top=3,bottom=4;3 return {left,right,top,bottom}4 }5 var {left,bottom}=margin();6 console.log(left,bottom); // 1 4 深度匹配
1 function setting(){2 return { display:{color:'red'},keyboard:{layout:'querty'} }3 }4 5 var { display:{color: dis_color },keyboard:{layout: key_layout } }=setting();6 console.log(dis_color,key_layout); // red querty 类和继承
1 class Animal{ 2 constructor(name){ //构造函数 3 this.name=name; 4 } 5 speak(){ //方法 6 console.log(this.name+" makes a noise"); 7 } 8 } 9 var animal=new Animal("dog");10 animal.speak(); //dog makes a noise 如果在es5中，要这么写
1 var Animal=(function(){ 2 function Myconstructor(name){ 3 this.name=name; 4 } 5 Myconstructor.prototype.speak=function(){ 6 console.log(this.name+" makes a noise"); 7 } 8 return Myconstructor; 9 })();10 11 var animal=new Animal("dog");12 animal.speak(); //dog makes a noise 继承
1 class Cat extends Animal{2 speak(){3 super.speak();4 }5 }6 var cat=new Cat("短尾猫");7 cat.speak(); //短尾猫 makes a noise extends关键字代表继承，super关键字代表父类
箭头函数
箭头函数相当于匿名函数，并且简化了函数定义。()中放参数，没有参数就省略，箭头后面是函数体。
1 var fun1=(x)=>x*x; 2 var fun2=(x,y)=>{ 3 if(x>y){ 4 return true; 5 }else{ 6 return false; 7 } 8 } 9 var set=(name,age)=>( {name:name,age:age} ) //直接返回对象需要加小括号10 11 fun1(4); //1612 fun2(7,1); // true13 set("李大白","1000"); // Object {name: "李大白", age: "1000"} es5中this比较坑，当需要外层的this时有几种方法
用变量存储引用
1 var _this=this;2 $(".btn").click(function(){3 _this.sendData();4 }); 直接绑定
1 $(".btn").click(function(){2 this.sendData();3 }.bind(this) ); es6中
1 $(".btn").click( ()=> this.sendData() ); //箭头函数this绑定的是词法作用域，肯定指向外层，哪怕用apply，call也没法改变 遍历for...of
es5的遍历
1 var array=["a","b","c","d"];2 for (var i=0,l=array.length;i
或者
1 array.forEach(function(a){ //不能用break语句跳出循环,且不能在这个封闭的函数内使用return语句2 console.log(a);3 }) es6 for...of
1 for(var a of array ){ //可以使用break,continue,return等语句2 console.log(a);3 } for...of和for...in的区别，for...in主要用于获取属性名，如果用来遍历数组，确实可以获得序号，但序号都是字符串形式。
默认参数
1 function abc(x=0,y=2,flag=true){2 console.log(x,y,flag);3 }4 5 abc(); // 0 2 true6 abc(4,0,false); // 4 0 false 剩余参数
用于参数数量不固定的场合，剩余参数前面需要加...
1 function reduce(base,...nums){2 var result=base;3 for(var i of nums){4 result-=i;5 }6 return result;7 }8 reduce(10,5,3); // 2 es5
1 function reduce(base){2 var result=base;3 [].shift.apply(arguments);4 for(var i=0,l=arguments.length;i 展开运算符 ...
1 Math.max(2,100,1,6,43); //1002 Math.max([2,100,1,6,43]); //NaN3 Math.max(...[2,100,1,6,43]); //100 展开的效果
数组拼接也可以使用...
1 arr1=[2,100,1,6,43];2 arr2=["a","b","c","d"];3 arr3=arr1.concat(arr2);4 arr4=[...arr1,...arr2];5 6 console.log( arr3 ); // [2, 100, 1, 6, 43, "a", "b", "c", "d"]7 console.log( arr4 ); // [2, 100, 1, 6, 43, "a", "b", "c", "d"]