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=`<ul class="haha">
6 <li class="active">1</li>
7 <li>2</li>
8 <li>3</li>
9 <li>4</li>
10 <li>5</li>
11 </ul>` //不用加 \n來換行了
解構賦值
交換值
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); //16
12 fun2(7,1); // true
13 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<l;i++){
3 var a=array[i];
4 console.log(a);
5 }
或者
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 true
6 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<l;i++){
5 result-=arguments[i];
6 }
7 return result;
8 }
9 reduce(10,5,3); // 2
展開運算符 ...
1 Math.max(2,100,1,6,43); //100 2 Math.max([2,100,1,6,43]); //NaN 3 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"]