es6新特性

let與const 關鍵字

ES5 只有兩種聲明變量的方法：var命令和function命令。ES6 除了添加let和const命令，後面章節還會提到，另外兩種聲明變量的方法：import命令和class命令。所以，ES6 一共有 6 種聲明變量的方法。以下詳細分析一下let和const
與es5相比，es6申明變量增加了let,constt關鍵字，
一、let申明的變量有以下幾個特征

1. 沒有變量提升，在es5中通過var和function關鍵字申明的變量會有變量提升的現象，但是es6中不同的是let申明的變量，凡是在申明之前使用變量，均會報錯，稱之為暫時性死區
2. 不允許重復申明，let不允許在相同作用域內，重復聲明同一個變量。
3. 引入塊級作用域，ES5 只有全局作用域和函數作用域，es6中引入了塊級作用域的概念，ES6 明確規定，如果區塊中存在let和const命令，這個區塊對這些命令聲明的變量，從一開始就形成了封閉作用域。區域之外無法使用
4. 塊級作用域與函數聲明。
   1）允許在塊級作用域內聲明函數。
   2）函數聲明類似於var，即會提升到全局作用域或函數作用域的頭部。
   3）同時，函數聲明還會提升到所在的塊級作用域的頭部
   二、const
   const聲明一個只讀的常量。一旦聲明，常量的值就不能改變

字符串模板

ES6中允許使用反引號 ` 來創建字符串，此種方法創建的字符串裏面可以包含由美元符號加花括號包裹的變量${vraible}。

var name = ‘zfpx‘,age = 8;
let desc = `${name} is ${age} year old!`;
console.log(desc);

解構賦值

ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構

1. 數組解構賦值中,變量的值取決於後面的數組的位置,因為它是有序的

//let [a,b,c] = [10,20,30];//10 20 30;
//let [a,[b,c]] = [10,[20],30];//10 20 undefined
//let [a,b = 10] =[20,];//20 10
let [a,b , x] = [, , 3];
console.log(a,b,x);undefined undefined 3
解構賦值中變量可以設置默認值,不傳,空項,undefined都會讓默認值起作用
 

1. 對象的結構賦值
   對象它是無序的,變量名要跟屬性名相等，變量和屬性是相匹配的,是一樣的,1.先看是否相匹配,2.若匹配則把對應的屬性值賦給變量,若不匹配則undefined

let {a,b} = {a:10,b:20}

//適合於變量名和屬性名 不相同的情況
//let {a:c,b:d} = {a:10,b:20};
//c,d代表變量 a,b表示匹配的屬性
//console.log(c,d);
// let {aa:c} = {a:10};
//console.log(c);undefined

//復合的解構賦值
//let obj = {a:10,b:[2,{"aa":20}]};
//let {a,b,b:[x,{aa}]} = obj;
//console.log(a,b,aa);

//對對象設置屬性和值,一些簡寫的寫法 ,把變量或方法作為對象的屬性和方法
//let foo = "boo";
//把foo變量作為對象的屬性名,"boo"值作為對象的屬性值
//let o = {foo};//{foo:"boo"}

1. 字符串的解構賦值

let [a,b,c] = "hel";
console.log(a,b,c);

類的支持

ES6中添加了對類的支持，引入了class關鍵字

class Father {  //通過class定義一個類
    constructor(x,y){//constructor寫構造函數裏的內容,私有的屬性
       this.x = x;
       this.y = y;
    }
    a(){//原型上的內容
        console.log(this.x);
    }
}
var f = new Father(10,20);
f.a();

//Son類要繼承與Father
class Son extends Father{//extends是es6這邊實現繼承的關鍵
    constructor(x,y,z){
        super(x,y);//super代碼父類的構造函數,但是運行時,會把父類構造函數裏的this改成子類的this,最終返回一個子類的實例
        //console.log(this.x);
        this.z = z;
    }
    b(){
        console.log("b");
    }
}
var s = new Son(10,20,30);
//console.log(s.x);
//s.a();
console.log(Son.prototype.__proto__ == Father.prototype);
//Son.prototype = Object.create(Father.prototype);

箭頭函數

1.箭頭函數裏沒有this,this是指定義階段作用域裏的this,外層的this
2.不能用arguments
3.call,apply,bind都拋棄
4.不能當成構造函數,用new去運行

若有多個參數用()括起來 若有多條語句用{}括起來,註意返回結果是個對象,用()把{}包起來

let fn = (x,y)=>{
   console.log(x+y);
   return x+y;
}

let fn = (x,y)=>({x,y});//{x:x,y:y}

參數默認值，不定參數，拓展參數

1.形參可以設置默認值

function fn(x,y=5){
   console.log(y);
}
fn(10)

1. 2.通過數組解構賦值或者對象解構賦值來傳參

//數組
function fn([x=8,y=8]){
   console.log(x+y);
}
fn([10,5]);
fn([]);

//對象
function fn({x,y=10}){
    console.log(x+y);
}
fn({x:6,y:7});
fn();//報錯
fn({y:7});

1. 形參的問題

let x = 10;
function fn(x,y=x){
   console.log(y);//undefined
}

function fn(x,y=x){//形參是私有變量,不能重復聲明
   let x = 10;  ///報錯Uncaught SyntaxError: Identifier ‘x‘ has already been declared`
   console.log(y);
}

let x = 10;
function fn(y=x){
   console.log(y);//10
}
fn();

rest參數

function fn(...arr){//參數序列,是一個數組 箭頭函數裏獲取參數的集合只能通過rest不能用arguments
   console.log(arr);//[1, 2, 4]
}
fn(1,2,4);

模塊

在ES6標準中，JavaScript原生支持module了。這種將JS代碼分割成不同功能的小塊進行模塊化的概念是在一些三方規範中流行起來的，比如CommonJS和AMD模式。
將不同功能的代碼分別寫在不同文件中，各模塊只需導出公共接口部分，然後通過模塊的導入的方式可以在其他地方使用

新API

字符串方法

• includes() 這個字符串中是否包含這個字符串(一個或多個字符)
• startsWith() 在查找範圍內,是否以這個字符串開頭
• endsWith() 在查找範圍內,是否以這個字符串結尾
• 這三個方法都可以設置第二個參數(n),表示查找的位置 includes和startsWith表示從索引n開始查找
• endsWith() 在索引n之前查找
• repeat() 返回一個新的字符串 將某個字符串重復n次

數組的方法

• ... 作為函數的參數，可以把它當做一個數組，

let max = [10,20,5,7,13,26];
es5
console.log(Math.max.apply(null, max));
console.log(Math.max(...max));//可以替代apply方法

擴展運算符，合並數組

let a1 = [1,2];
let b1 = [3,4];
let ary = [...a1,...b1];
console.log(ary);//[1, 2, 3, 4]
let ary1 =[10,20,...a1];
console.log(ary1);//(4) [10, 20, 1, 2]

• Array.from 把類數組(arguments或元素集合)轉換成數組
• Array.of 把一組數轉換成數組
• copyWithin(target,start,end) 把數組的某些項復制到數組中(會覆蓋數組中原來項)
  target 從目標位置替換
  start 從這個位置開始讀取
  end 從這個位置結束讀取 超出長度或者沒寫,都表示讀取到最後
• find 返回匹配的這一項
• findIndex 返回匹配這一項的索引
• fill按照指定值來填充數組,第二個參數和第三個參數 起始填空位置和結束填充位置

/ var res = Array(3).fill(7);//[7,7,7]
let ary = [5,"a",7,3,4];
let res = ary.fill(10,1,3);
console.log(res);//[5, 10, 10, 3, 4]

• for....of.... 遍歷數組或類數組
  對象的方法

Object.assign(target,source1,source2)//第一個參數是目標對象,第二個參數開始是源對象

var oTarget = {c:3};
var obj1 = {a:1};
var obj2 = {b:2};
console.log(Object.assign(oTarget, obj1, obj2));//{c: 3, a: 1, b: 2}合並對象
let obj = {...oTarget,...obj1,...obj2};//對象擴展運算符的用法
console.log(obj);//{c: 3, a: 1, b: 2}
console.log(Object.assign(oTarget)==oTarget);//true

註意若只有一個參數,返回的是原對象

var a=Object.assign(obj1);
console.log(a);{a: 1}

Object.assign({}, oTarget);//克隆對象,克隆出來的是一個新對象
console.log(Object.assign({}, oTarget) == oTarget) //false

es6語法新特性