ES6入門及一些常用命令

 

一個常見的問題:ECMAScript 和 JavaScript 到底是什麼關係?

ECMAScript 6.0(以下簡稱 ES6)是 JavaScript 語言的下一代標準,已經在 2015 年 6 月正式發佈了。它的目標,是使得 JavaScript 語言可以用來編寫複雜的大型應用程序,成爲企業級開發語言。

ECMAScript 和 JavaScript 的關係是,前者是後者的規格,後者是前者的一種實現。

Let命令

ES6新增的命令,有以下特點:

1.let是變量,可以對let聲明的數據重新賦值

2.在同一作用域裏面,let不能重複聲明

以下這種寫法是錯誤的。

function error() {

        let i = 10;

        let i = 12;

    }

以下這種寫法是正確的,因爲定義的let變量i在不同的作用域中。

    function correct1() {

        let i = 10;

    }

    function correct2() {

        let i = 10;

    }

3.和var聲明的變量一樣,let聲明的變量區分全局和局部變量。

Const命令

在ES6中,新增了常量的概念

特點:

1.同一作用域內的常量不能修改

2.和let一樣,同一作用域內不能重複定義相同的變量

3.const也區分全局變量和局部變量

Symbol

使用Symbol定義的是一個獨一無二的數據,以下是一個簡單的例子:

用let聲明的變量a和b,console出來的結果是true(相等的)   

    let a = "hello";

    let b = "hello";

    console.log(a == b);

而用Symbol定義的a和b,console出來的結果是false(不相等)   

    let a = Symbol("hello");

    let b = Symbol("hello");

    console.log(a == b);

解構賦值

提供一個和源數據類型相同的帶變量的數據結構,可以實現對應位置的數據直接賦值到變量上的效果。

對於數組:

let [a, b, c] = [1, 2, 3];

可以從數組中提取值,按照對應位置,對變量賦值。結果爲:a = 1;b = 2;c = 3;

數組中不需要獲取的數據需要佔位實現

如下例子中,不想獲取4

    let arr = [1,2,3,[4,3]];

    let [a,b,c,[,e]] = arr;

    console.log(a);  //1

    console.log(b);  //2

    console.log(c);  //3

    console.log(e);  //3

對於對象:

不需要獲取的數據不需要佔位,直接提供你想獲取的屬性名即可。

    let obj = {name:"zhangsan",age:24,add:"yt"};

    let { name, add } = obj;

    console.log(name);

    console.log(add);

對於字符串:

    let str = "大家好呀";

    let [j1,j2,j3,j4] = str;

    console.log(j1); //大

    console.log(j2); //家

    console.log(j3); //好

    console.log(j4); //呀

對於函數:

函數調用的同時可使用解構賦值,也可設定默認值,如下,若obj1未定義degree屬性,則console出來的結果爲”benke”,若obj1定義了degree屬性爲“daxue”,則console出來的結果爲“daxue”

    function showInfo({name,age,weight,degree="benke"}) {

        console.log(name);

        console.log(age);

        console.log(weight);

        console.log(degree);

    }

    let obj1 = {

        name:"lisi",

        age:"21",

        weight:70,

        degree:"daxue"

    };

    showInfo(obj1);

set集合:

set集合和數組類似,但是不能存放相同的數據

常用方法和屬性:

add():往集合添加數據。

    let set = new Set([1, 2, 3, 4]);

    set.add(5);//新增元素5

delete(value):刪除某個值,返回一個布爾值,表示刪除是否成功。

    let set = new Set([1, 2, 3, 4]);

    set.delete(1);//刪除1

has(value):返回一個布爾值,表示該值是否爲Set的成員。

    let set = new Set([1, 2, 3, 4]);

    console.log(set.has(2));//結果爲true

clear():清除所有成員,沒有返回值。

   let set = new Set([1, 2, 3, 4]);

    set.clear();

size屬性:獲取集合的大小。

    let set = new Set([1, 2, 3, 4]);

    console.log(set.size);//長度是4

for of:遍歷集合

for (let i of set) {

        console.log(i);

    }  

利用set清除數組的重複數據

[...set]:把set集合轉換成數組

    let arr = [1,2,3,1,1,3];

    let set = new Set(arr);

    set.forEach(function (value) {

        console.log(value);

    });

    let arr2 = [...set];

    console.log(arr2);

則輸出結果爲[1,2,3];

WeakSet

1.成員只能是對象,而不能是其他類型的值。

2.不能遍歷,因爲大小不能確定,size屬性也不能用

WeakSet 結構有以下三個方法。

.add(value):向 WeakSet 實例添加一個新成員。

.delete(value):清除 WeakSet 實例的指定成員。

.has(value):返回一個布爾值,表示某個值是否在 WeakSet 實例之中。

Map

在ES5中對象的key值只能是字符串類型,ES6中新增了一種數據類型map,和對象一樣是鍵值對的集合,但是map中的key值可以是任意的數據類型。

屬性和方法:

size 屬性

size屬性返回 Map 結構的成員總數。

set(key, value)方法

設置鍵名key對應的鍵值爲value,然後返回整個 Map 結構。如果key已經有值,則鍵值會被更新,否則就新生成該鍵。

    let arr = [1,2];

    let obj1 = {name:"zs"};

    let map = new Map();

    map.set(1,"1");

    map.set(true,"true");

    map.set(arr,"array");

    map.set(obj1,"obj1");

get方法

使用get方法讀取這個鍵

console.log(map.get(1));

delete方法

使用delete方法刪除了這個鍵

console.log(map.delete(1));

for of遍歷

for(item of map){

       console.log(item[0] + ":" + map.get(item[0]));

    }

forEach遍歷

    map.forEach(function (value, key) {

        console.log(value + ":" + key);

    });

WeaMap

結構與Map結構類似,也是用於生成鍵值對的集合。但key值只能是對象類型的。

主要方法和屬性有:

set(),has(),get()和delete()。

iterator遍歷器

遍歷過程是這樣的。

(1)創建一個指針對象,指向當前數據結構的起始位置。也就是說,遍歷器對象本質上,就是一個指針對象。

(2)第一次調用指針對象的next方法,可以將指針指向數據結構的第一個成員。

(3)第二次調用指針對象的next方法,指針就指向數據結構的第二個成員。

(4)不斷調用指針對象的next方法,直到它指向數據結構的結束位置。

遍歷arr數組:

let arr = [1,2,3,4];

    let it = arr[Symbol.iterator]();

    while (true){

        let re = it.next();

        if (re.done){

            break;

        }

        console.log(re.value);

    }

遍歷set數組:

    let set = new Set(["zs","ls","ww"]);

    let it2 = set[Symbol.iterator]();

    while (true){

        let re = it2.next();

        if (re.done){

            break;

        }

        console.log(re.value);

    }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章