Es6總結

1、var，let和const的區別

1-過去咱們是用var來聲明變量的 var i=1; 或者直接i=1, 這兩種方式有什麼區別？
當咱們運行下面兩段代碼：
console.log(i)
var i=1;
console.log(i)
i=1;
輸出的結果分別是undefined和not defined可見var有提高變量的做用
注意：雖然不會報錯但儘可能不要用不加var的方式來聲明變量

2-如今Es6又新增了let（變量）和const（常量）兩種方式來聲明變量，這兩種方式聲明的變量都是處於塊級做用域中，並且let和const並不存在變量提高，因此必定要在定義後使用，不然報錯。
所謂的塊級做用域就是一個｛｝,運行代碼以下：

{
var a=110;
 let b=666;
 }
 console.log(a)
 console.log(b)
複製代碼

輸出結果是：110和 not defined

---

2、模板字符串,解決了Es6之前字符串輸出功能上的不足

用途一:模板化輸出：將表達式嵌入字符串中輸出，用法是 `字符串${變量}`。

用途二可以實現多行輸出,以下：

var a='zk'
console.log(` my name i${a}`) 
複製代碼

直接就實現了多行輸出的效果~

---

3、箭頭函數

也就是函數的快捷寫法
例如：

x=>x*x;
function f(x){
    return x*x;
}
複製代碼

這兩種寫法表達的函數是同樣的。
用法：當你的函數有且僅有一個參數的時候，是能夠省略掉括號的。當你函數返回有且僅有一個表達式的時候能夠省略{} 和 return。

注意：箭頭函數中是沒有this的

---

4、塊級做用域代替IIFES

IIFES即函數當即表達式，一般用途是建立一個內部的做用域，而在Es6中咱們一樣能夠用一個塊級做用域來實現相同的功能：
以下列代碼:

{
let f=()=>console.log("zzzzz~")
}
(function f(){console.log("zzzzz~"})
複製代碼

這兩個函數做用是相同的

---

5、Es6新增的方法

• Array.from 將把類數組對象轉成真正的數組;
• Array.of 做用：將一組值轉換爲數組。與Array.from功能類似，用來建立數組。主要目的是彌補構造器 Array（）的不足;
• find() 用於找出第一個符合條件的數組元素。找不到則是undefined。注意，它是不會返回多個，只找一個，找到了就返回;
• findIndex() 返回第一個符合條件的數組元素的索引。找不到則是-1;
• includes 判斷元素是否在數組/字符串中存在。返回值是true|false，indexOf也能夠作相似的工做可是indexOf對NaN的判斷是錯誤的;
• fill 給數組填充指定值。fill 方法用於空數組的初始化很是方便。已有數據會被覆蓋。fill方法還能夠接受第二個和第三個參數，用於指定填充的起始位置和結束位置;
• startsWith()返回布爾值，表示參數字符串是否在源字符串的頭部；
• endsWith()返回布爾值，表示參數字符串是否在源字符串的尾部；

---

6、 默認參數對 arguments 對象的影響

Arguments是個相似數組但不是數組的僞數組，說他相似數組是由於其具有數組相同的訪問性質及方式，可以由arguments[n]來訪問對應的單個參數的值，並擁有數組長度屬性length。還有就是arguments對象存儲的是實際傳遞給函數的參數，而不侷限於函數聲明所定義的參數列表，並且不能顯式建立 arguments 對象 用法以下：

function f(a,b,c){
    for(var i=0;i<arguments.length;i++){
        console.log(arguments[i])
    }
}
f(1,2,3);
複製代碼

在非嚴格模式下，arguments老是能反映出命名參數的變化。看下面的代碼：

function foo(a, b) {  //非嚴格模式
 console.log(arguments[0] === a); //true
console.log(arguments[1] === b); //true
a = 10;
b = 20;
 console.log(arguments[0] === a); //true
console.log(arguments[1] === b); //true
    }
    foo(1, 2);
複製代碼

• 在ES5的嚴格模式下，arguments只反映參數的初始值，而再也不反映命名參數的變化！

function foo(a, b) {
    //嚴格模式
 "use strict"
    console.log(arguments[0] === a); //true
    console.log(arguments[1] === b); //true
    a = 10;
    b = 20;
    console.log(arguments[0] === a); //false。 修改a的值不會影響到arguments[0]的值
    console.log(arguments[1] === b); //false
    }
    foo(1, 2);
複製代碼

---

7、擴展運算符

• 把數據結構轉成數組：

var arr=[1,2,3];
console.log(...arr); 
//把數組展開後依次輸出
var arr2=[...arr];
//把數組展開後再賦值給arr2
複製代碼

• 把僞數組轉成數組：

function f(a,b,c){
console.log([...arguments])
}
f(1,2,3);
複製代碼

• 合併數組：

let arr1=[1,2]
let arr2=[3,4]
console.log([...arr1,...arr2])
//輸出合併後的數組
複製代碼

• 解構賦值：

let[a,b,c]=[1,2,3]
console.log(a)
console.log(b)
console.log(c)
複製代碼

---

8、默認參數

設置函數中形參的默認值 簡而言之：

function f(a=1,b=3,c=4){
   console.log(a)
   console.log(b)
   console.log(c)
}
f()
//輸出結果是1，3，4
複製代碼

---

9、類Class

• 格式：

class 類名{
constructor(參數){
    this.屬性=參數;
}
方法名(){}//不是箭頭函數
}
複製代碼

• extends實現繼承,格式以下：

class 子類 extends 父類{
    constructor(參數){
        super(參數)
        this.屬性=值
    }
}
複製代碼

例如：

class A1{
    constructor(a,b){
        this.a=a;
        this.b=b;
    }
    g(){console.log(this.a+this.b)}
}
class A2 extends A1{
    constructor(a,b,c){
        super(a,b)
        this.c=c;
    }
    s(){console.log(this.c)}
}
複製代碼

• 類的靜態方法 static 直接經過類名來訪問的方法就是靜態方法,使用方法直接在方法前加static就能夠啦~

---

10、rest參數

rest 參數（形式爲...變量名），用於獲取函數的多餘參數，這樣就不須要使用arguments對象了。rest參數搭配的變量是一個數組，該變量將多餘的參數放入數組中。以下代碼：

function add(...values){
    var sum=0;
    for(var val of values){
sum+=val;
    }
    console.log(sum);
}
add(1,2,3)//6
複製代碼

11、Set數據結構

set和數組差很少，也是一種集合，區別在於：它裏面的值都是惟一的，沒有重複的，是一個僞數組。

建立方式：

var s1=new Set();
Set s2=[1,2,3,"ad"];
s2.add(4);//使用add來添加元素
複製代碼

• 可使用foreach 和for of來遍歷：

s2.forEach(item=>console.log(item));
for(var p of s2){
    console.log(p)
};
複製代碼

小技巧：使用set爲數組去重：

var s1=new Set([1,1,1,2,2,3,3,4,5,2,1])
console.log([...s1])
複製代碼

---

12、map數據結構

它相似於對象，裏面存放也是鍵值對，區別在於：對象中的鍵名只能是字符串，若是使用map，它裏面的鍵能夠是任意值。 建立Map，以下：

var m=new Map();//1
var n=new Map(["a","hello"],[1,"123"]);//2
複製代碼

添加元素：

m.set(2,"asd")
m.set([1,2,3],{1:"asdd"})
複製代碼

獲取其中元素：

m.get("2")//能夠取得數據
m.get([1,2,3])//因爲get()時要比較棧區中的地址，而不是堆區中的數據，將沒法獲得數據
複製代碼

注意：若是有重複的鍵，後面的要把前面的覆蓋的