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