es6基礎(chǔ)知識(shí)2

1. 塊作用域

作用域指的是變量的作用范圍,js本身具有了全局作用域和函數(shù)作用域,es6中新增了塊作用域。塊作用域可以理解為由{}包含的代碼所產(chǎn)生的作用范圍

es6中還新增了兩種變量聲明方式let和const,原來(lái)的var不支持塊作用域

var與let的區(qū)別
var支持變量聲明預(yù)解析,不支持塊作用域,允許重復(fù)聲明
let不支持變量聲明預(yù)解析,支持塊作用域,不允許重復(fù)聲明

{
    var a = 1;  //var 不支持 {}
    let b = 2;
    const c = 3;
}

console.log(a);
console.log(b);
console.log(c);

const不支持變量聲明預(yù)解析,支持塊作用域,不允許重復(fù)聲明,并且是一個(gè)常量(值一旦確認(rèn),不允許修改),同時(shí)聲明常量必需復(fù)制,不允許聲明后再賦值。

2. 解構(gòu)賦值

解構(gòu)賦值的含義是允許按照一定的模式從數(shù)組或者對(duì)象中提取值,并對(duì)變量進(jìn)行賦值。

2.1 數(shù)組解構(gòu)

數(shù)組解構(gòu)的寫(xiě)法:

let arr = [1, 2, 3];

let [a, b, c] = arr; //提取數(shù)組中的值,并一一賦值給a,b,c

console.log(a, b, c); //1 2 3

上面這種寫(xiě)法等價(jià)于:

let arr = [1, 2, 3];


let a = arr[0];
let b = arr[1];
let c = arr[2];

console.log(a, b, c);//1 2 3

強(qiáng)調(diào)一點(diǎn)的是,使用數(shù)組解構(gòu)需要值一一對(duì)應(yīng),比如說(shuō)上面的那個(gè)例子,如果只是想把1,3賦值給a,b,那么應(yīng)該這樣寫(xiě)[a, , c] = arr

2.2 對(duì)象解構(gòu)

對(duì)象解構(gòu)的寫(xiě)法:

let { game, level } = { game: "bird", level: "king" };  // 左側(cè)中變量的名稱(chēng)必須是右側(cè)對(duì)象中存在的key,解構(gòu)的順序不需要對(duì)應(yīng)

console.log(game, level);

對(duì)象解構(gòu)需要注意變量中的名稱(chēng)需要和右邊對(duì)象的鍵值(key值)對(duì)應(yīng),但是不要求順序上對(duì)應(yīng)。

有時(shí)候,不想用對(duì)象的key值作為變量名,這個(gè)時(shí)候可以在左側(cè)給變量取一個(gè)別名

let  {left: L, top: T} = {left: 100, top: 200};
console.log(L, T);//100 200

// 這段代碼就相當(dāng)于
let obj = {left: 100, top: 200};

let L = obj.left;
let T = obj.top;

2.3 多重解構(gòu)

一個(gè)簡(jiǎn)單的例子:

let { scores: [english, math], year} = {scores: [99, 98], 2019}

// 這樣的寫(xiě)法相當(dāng)于:
let english = 99;
let math = 98;
let year= 2019;

3. 擴(kuò)展運(yùn)算符

擴(kuò)展運(yùn)算符的含義是將數(shù)組或者對(duì)象轉(zhuǎn)化為參數(shù)序列,可以理解為將數(shù)組外面的[]和對(duì)象外面的{}去掉,然后將數(shù)組或者對(duì)象轉(zhuǎn)化為,分隔的參數(shù)化序列

// 解構(gòu)賦值可以這樣來(lái)理解
['a‘,'b','c'] => 'a','b','c'

{left:100, top:200} => left: 100, top: 200

解構(gòu)賦值的表示法是...,在一個(gè)對(duì)象或者數(shù)組前面加上...代表對(duì)其進(jìn)行解構(gòu)

let arr = [1, 3, 4]

// ...arr表示 1,3 4

構(gòu)賦值在一些函數(shù)的使用和對(duì)象、數(shù)組的合并方面非常好用,比如說(shuō)想求得一個(gè)數(shù)組的最大值:

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

// 沒(méi)有解構(gòu)賦值的化可能需要這么做
let max = Math.max(arr[0], arr[1], arr[2], arr[3], arr[4]);

// 有了解構(gòu)賦值,就可以這樣做:
let max = Math.max(...arr)

使用解構(gòu)賦值方便進(jìn)行數(shù)組的合并

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2]; //arr3 = [1, 2, 3, 4, 5, 6]

包括對(duì)象的合并:

let obj1 = {left:100, top: 200};
let obj2 = {width: 200, height: 200};

let obj3= {
    ...obj1,
    ...obj2
};

4.模板字符串

模板字符串是es6新增的一種字符串表示法,區(qū)別于之前的或者便是字符串,模板字符串使用反引號(hào)`表示

模板字符串有兩個(gè)主要的作用,一是保持字符串格式,二是變量表達(dá)式解析:

// 保持字符串的格式:
var str = `

    

    ${1+1}
    模板字符串

`; 

console.log(str);

//變量表達(dá)式解析
let score = 100

// 打印分?jǐn)?shù)的話以前可能這么寫(xiě):
console.log('your score is ' + score);
// 現(xiàn)在可以這樣寫(xiě):
console.log(`your score is ${score}`)

5. 對(duì)象拓展

在es6中,對(duì)于對(duì)象的拓展主要是對(duì)象簡(jiǎn)介表達(dá)式和屬性名表達(dá)式。對(duì)象簡(jiǎn)介表達(dá)式指的是當(dāng)對(duì)象的key與對(duì)應(yīng)的屬性所引用的變量或函數(shù)同名的時(shí)候,可以簡(jiǎn)寫(xiě)為一個(gè);屬性名表達(dá)式指的是對(duì)象的屬性名可以接受表達(dá)式作為key,表達(dá)式計(jì)算的結(jié)果作為最終的key

簡(jiǎn)介表達(dá)式舉例:

var name = 'john';
var score = function () {
    return 100
}

// 當(dāng)對(duì)象是下面這種形式的時(shí)候
var obj = {
    name: name,
    score: score
}

// 就可以簡(jiǎn)寫(xiě)為
var obj = {
    name,
    score
}

屬性名表達(dá)式舉例:

在es6之前,對(duì)象的屬性名只能是字符串,在es6中增加了屬性名表達(dá)式,也就是說(shuō)通過(guò)[]符號(hào)中的表達(dá)式計(jì)算出最終的值來(lái)作為屬性名,滿足了一些情況動(dòng)態(tài)變化屬性名的需求。

// 定義一個(gè)變量
var abc = 'name'

var obj1 = {
    abc: 'something',
    [abc]: 'john'
}

// obj1對(duì)象相當(dāng)于:
var obj2 = {
    abc: 'something',
    name: 'john'
}
屬性名表達(dá)式

在使用屬性名表達(dá)式進(jìn)行訪問(wèn)的時(shí)候,一定得注意obj1["abc"]obj1[abc]是不同的,第一種是正常訪問(wèn)對(duì)象的屬性,第二種是屬性名表達(dá)式,需要先計(jì)算出真正的屬性名然后在訪問(wèn)。

注意訪問(wèn)上的區(qū)別

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容