Set和Map

Set

Set類似于數(shù)組，但是里面成員的值不能重復(fù)注竿。Set構(gòu)造函數(shù)可以傳入一個數(shù)組用于初始化

var s=new Set();
[1,2,3].map(i=>s.add(i));
for(var i of s){console.log(s)}; //1 2 3

var s=new Set([1,2,3]);
for(var i of s){console.log(s)}; //1 2 3

Set擁有以下屬性和方法
1.size，返回成員個數(shù)
2.add(value)，添加值巩割，返回自身
3.delete(value)裙顽，刪除值，返回布爾值喂分，代表是否刪除成功
4.has(value)锦庸，布爾值，表示是否含有value成員
5.clear()蒲祈，無返回值甘萧，刪除所有成員

遍歷操作
1.keys()
2.values()
3.entries()
4.forEach()
由于Set中只有值，因此keys()等于values()

var s=new Set([1,2,3,4]);
for(var i of s)console.log(i); //1 2 3 4
for(var i of s.keys())console.log(i); //1 2 3 4
for(var i of s.values())console.log(i); //1 2 3 4
for(var [k,v] of s.entries())console.log(`${k} ${v}`); //1 1 2 2 3 3 4 4梆掸，key值等于value值 
s.forEach((v,k)=>{console.log(`${v} ${k}`)}); //1 1 2 2 3 3 4 4

通過Set可以很方便地實現(xiàn)數(shù)組去重而不必借用一次循環(huán)

var deleteSample=arr=>{var s=new Set(arr);return [...s];}
console.log(deleteSample([1,1,2,2,3,3,4])); //[1,2,3,4]

Map

對象只能使用字符串當作key扬卷，而Map可以使用任意類型作為key。Map構(gòu)造函數(shù)可以傳入一個數(shù)組用于初始化酸钦，該數(shù)組由若干個數(shù)組構(gòu)成怪得，每個數(shù)組包含key和value

var m=new Map(),obj={a:1};
m.set(obj,"key is Object"); //將obj作為key，value是一個字符串
var m=new Map([["a",1],["b",2],["c",3]]);
for(var [k,v] of m)console.log(`${k} ${v}`); //a 1 b 2 c 3

Map擁有以下屬性和方法
1.size卑硫，返回成員個數(shù)
2.set(key,vaule)徒恋，設(shè)置key所對應(yīng)的value，如果key存在則覆蓋舊的value欢伏，如果不存在則新建key并賦值value入挣。返回Map本身
3.get(key)，獲取key所對應(yīng)的value
4.has(key)硝拧，布爾值径筏，判斷Map中是否存在key鍵
5.delete(key)，刪除key鍵障陶，返回布爾值滋恬，表示是否刪除成功
6.cleear()，沒有返回值抱究，刪除所有成員

遍歷操作
1.keys()
2.values()
3.entries()
4.forEach()

var m=new Map([["a",1],["b",2],["c",3]]);
for(var [k,v] of m)console.log(`${k} ${v}`); // a 1 b 2 c 3
for(var k of m.keys())console.log(k); //a b c
for(var v of m.values())console.log(v); //1 2 3
for(var [k,v] of m.entries())console.log(`${k} ${v}`); //a 1 b 2 c 3
m.forEach((v,k)=>{console.log(`${v} ${k}`)}); //1 a 2 b 3 c

通過擴展運算符可以將Map轉(zhuǎn)換成數(shù)組

var m=new Map([["a",1],["b",2],["c",3]]);
console.log([...m.keys()]); //a b c
console.log([...m.values()]); //1 2 3
console.log([...m.entries()]); //[["a",1],["b",2],["c",3]]
console.log([...m]); //[["a",1],["b",2],["c",3]]

Iterator和for...of循環(huán)

Iterator

Iterator為各種數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的遍歷機制恢氯。在es6中，數(shù)組/偽數(shù)組/Set/Map具備原生的Iterator接口

let arr=[1,2,3];
var it=arr[Symbol.iterator]();
it.next(); //{value:1,done:false}
it.next(); //{value:2,done:false}
it.next(); //{value:3,done:false}
it.next(); //{value:undefined,done:true}

for...of循環(huán)

for...of循環(huán)內(nèi)部調(diào)用的是Symbol.iterator方法媳维，也就是說酿雪，只要是支持Symbol.iterator方法的數(shù)據(jù)結(jié)構(gòu)就可以用for...of循環(huán)，與for...in不同的是侄刽，for...of可以返回鍵值和鍵名（默認數(shù)組只返回鍵值指黎，可以通過keys()/values()/entries()進行修改），而for...in只能返回鍵名

var arr=[1,2,3];
for(var i in arr)console.log(i); //0 1 2
for(var i in arr)console.log(arr[i]); //1 2 3
for(var i of arr)console.log(i); //1 2 3

普通的對象不支持for...of循環(huán)州丹，可以使用Object.keys方法將對象的鍵名生成一個數(shù)組醋安，遍歷這個數(shù)組杂彭。其實相當于for...in

var obj={a:1,b:2,c:3};
for(var k of Object.keys(obj))console.log(`${k} ${obj[k]}`); //a 1 b 2 c 3
for(var k in obj)console.log(`${k} ${v}`); //a 1 b 2 c 3

Class

創(chuàng)建Class和實例

es6支持類似于Java、C++等高級程序設(shè)計語言的類的寫法吓揪，但是它的底層仍然使用的是es5的面向?qū)ο舐暶鞣绞角椎。喈斢谑钦Z法糖，es6將定義在this上的屬性使用es5的構(gòu)造函數(shù)的方式柠辞，對方法使用原型的方式团秽，和es5的混合模式是一樣的

class MyClass{
    constructor(x,y){
        this.x=x;
        this.y=y;
    }
    print(){
        console.log(`(${this.x},${this.y})`);
    }
}
var myclass=new MyClass(2,3);
myclass.print(); //(2,3)
myclass.hasOwnProperty("x"); //true
myclass.hasOwnProperty("print"); //false

可以通過Object.assign為類添加方法

Object.assign(MyClass.prototype,{printName(){/**/},printAge(){/**/}});

Class也可以使用表達式的形式定義，無論是表達式形式還是一般形式叭首，Class均不存在變量聲明提升习勤，必須先聲明后使用

var MyClass=class{/**/};
var other=new OtherClass(); //ReferenceError
var OtherClass=class{/**/};

Class的繼承

es6的Class繼承和Java相似，使用extends關(guān)鍵字焙格。必須在constructor中調(diào)用super方法图毕，并且只有調(diào)用了super后才能使用this，也就是說super必須放在所有this的前面

class SubClass extends MyClass{
    constructor(x,y,z){
        super(x,y); //調(diào)用父類的構(gòu)造函數(shù)
        this.z=z;
    }
    print(x,y,z){
        console.log(`(${this.x},${this.y},${this.z})`); //重寫父類的print
    }
}
var sub=new SubClass(2,3,4;
console.log(sub instanceof SubClass); //true
console.log(sub instanceof MyClass); //true

可以通過object.getPrototypeOf方法從子類上獲取父類眷唉，用于判斷一個類是否繼承自另一個類

console.log(Object.getPrototypeOf(SubClass)===MyClass); //true

es6允許繼承原生構(gòu)造函數(shù)（Boolean/Number/String/Array/Date/Function/RegExp）

class MyNumber extends Number{
    constructor(...agrgs){
        super(...args);
    }
    //添加一些方法
}

Class的取值和存值函數(shù)

es6支持類似于C#的get和get方法予颤，但是調(diào)用它們的時候是以屬性的形式調(diào)用，而不是方法

class MyClass{
    constructor(x){
        this.x=x;
    }
    get getX(){
        return this.x;
    }
    set setX(xx){
        this.x=xx;
    }
}
var myclass=new MyClass(2);
console.log(myclass.getX); //2
myclass.setX=3;
console.log(myclass.getX); //3

Class的靜態(tài)方法

在一個方法上加上static關(guān)鍵字表示該方法是一個靜態(tài)方法冬阳，它不能被實例所調(diào)用蛤虐，只能直接通過類去調(diào)用

class MyClass{
    static print(){
        console.log("hello world");
    }
}
var myclass=new MyClass();
myclass.print(); //TypeError
MyClass.print(); //"hello world"

靜態(tài)方法可以被子類繼承，在子類中仍然是靜態(tài)方法肝陪，可以通過super調(diào)用父類的靜態(tài)方法

class SubClass extends MyClass{
    static print(){
        super.print();
    }
}
SubClass.print(); //"hello world"

模塊的import和export

export

export命令用于規(guī)定模塊的對外接口笆焰，允許其他模塊通過import加載該模塊

//export.js
export var obj={a:1,b:2,c:3};
export var name="SunnyChuan";
export var age=22;

如果覺得上面的形式較繁瑣，可以簡寫為

var [obj,name,age]=[{a:1,b:2,c:3},"SunnyChuan",22];
export {obj,name,age};

模塊輸出的變量就是它的名字见坑，可以通過as進行重命名

var [obj,name,age]=[{a:1,b:2,c:3},"SunnyChuan",22];
export {obj as o,name as n,age as a}; 

import

export用于導(dǎo)出模塊，import用于加載模塊捏检，注意要加載的模塊的名字必須與導(dǎo)出的模塊的名字相同荞驴。import具有聲明提升，會提升到整個代碼塊的頭部

//import.js
import {obj,name,age} from "./export.js";
//如果export的時候已經(jīng)重命名了贯城，可以import {o,n,a} from "./export.js";
console.log(obj); //{a:1,b:2,c:3}
console.log(name); "SunnyChuan"
console.log(age); 22

同export熊楼，在import的時候也可以為模塊重命名

import {obj as o,name as n,age as a} form "./exoprt.js"

使用“*”加載整個模塊，然后用as指定給一個對象能犯，通過調(diào)用對象的屬性使用相應(yīng)模塊鲫骗，也可以使用module命令取代import實現(xiàn)整體加載

import * as qc from "./exports.js";
console.log(qc.obj); //{a:1,b:2,c:3}
console.log(qc.name); "SunnyChuan"
console.log(qc.age); 22

module qc from "./exports.js";
console.log(qc.obj); //{a:1,b:2,c:3}
console.log(qc.name); "SunnyChuan"
console.log(qc.age); 22

以上是我經(jīng)常用到的es6的知識點，想要學(xué)習(xí)更多強大的功能（Proxy/Reflect/Symbol/二進制數(shù)組/Generator/異步編程）或者想要更加細致地學(xué)習(xí)es6踩晶，可以訪問阮一峰的教程ECMAScript 6入門执泰，本人也是在這里學(xué)習(xí)的。