ES6增加的語(yǔ)法
let&&const
[size=0.9em]let與[size=0.9em]var的區(qū)別
let 變量名=變量值
使用let創(chuàng)建變量和使用var創(chuàng)建變量的區(qū)別
1、用var聲明的變量會(huì)變量提升,用let聲明的變量不會(huì)進(jìn)行變量提升。
用let創(chuàng)建變量
let xxx=xxx;
用let創(chuàng)建函數(shù)
let xxx=function(){}
創(chuàng)建自執(zhí)行函數(shù)
;(function(){
})();
2、用let定義變量不允許在[size=0.9em]同一個(gè)作用域中重復(fù)聲明一個(gè)變量(只要當(dāng)前作用域中有這個(gè)變量,不管是用var還是用let聲明的,再用let聲明的話會(huì)報(bào)錯(cuò):不能重復(fù)聲明一個(gè)變量),但是可以重復(fù)定義(賦值)。
let i=10;
let i=20;/會(huì)報(bào)錯(cuò),
i=20;重復(fù)賦值不會(huì)報(bào)錯(cuò)
3、暫時(shí)性死區(qū):在代碼塊內(nèi),使用let命令聲明變量之前,該變量都是不可以使用的。
if (true) {
// TDZ開始
tmp = 'abc'; // ReferenceError,報(bào)錯(cuò)之后下面都不會(huì)輸出
console.log(tmp); // ReferenceError,報(bào)錯(cuò)之后下面都不會(huì)輸出
let tmp; // TDZ結(jié)束
console.log(tmp); // undefined
tmp = 123;
console.log(tmp); // 123
}
//下面也會(huì)報(bào)錯(cuò)出現(xiàn)TDZ
console.log(typeof x); // ReferenceError
let x;
//作為比較如果一個(gè)變量根本沒有被聲明,使用typeof反而不會(huì)報(bào)錯(cuò)。
console.log(typeof x);// "undefined"
4、ES6語(yǔ)法創(chuàng)建的變量(let)存在塊級(jí)作用域
[ES5]
window全局作用域
函數(shù)執(zhí)行形成的私有作用域
[ES6]
除了有ES5中的兩個(gè)作用域,ES6中新增加塊級(jí)作用域(我們可以把塊級(jí)作用域理解為之前學(xué)習(xí)的私有作用域,存在私有作用域和作用域鏈的一些機(jī)制)[size=0.9em]ES6中把大部分用{}包起來的都稱之為塊級(jí)作用域;
[size=0.9em]const
const細(xì)節(jié)知識(shí)點(diǎn)和let類似
const聲明的常量只要聲明就必須賦值,而且變量的值是一定的,不能被修改;
[size=0.9em]注意:并不是變量的值不得改動(dòng),而是變量指向的那個(gè)內(nèi)存地址不得改動(dòng)。對(duì)于簡(jiǎn)單類型的數(shù)據(jù)(數(shù)值、字符串、布爾值),值就保存在變量指向的那個(gè)內(nèi)存地址,因此等同于常量。但對(duì)于復(fù)合類型的數(shù)據(jù)(主要是對(duì)象和數(shù)組),變量指向的內(nèi)存地址,保存的只是一個(gè)指針,const只能保證這個(gè)指針是固定的,至于它指向的數(shù)據(jù)結(jié)構(gòu)是不是可變的,就完全不能控制了。因此,將一個(gè)對(duì)象聲明為常量必須非常小心。
[size=1em][size=1em]const聲明的變量也存在暫時(shí)性死區(qū),即只能在聲明的位置之后使用;
JS中創(chuàng)建變量的方式匯總
[size=1em][size=1em][ES5]
· var :創(chuàng)建變量
function:創(chuàng)建函數(shù)
ES5中創(chuàng)建變量或者函數(shù):存在變量提升,重復(fù)聲明等特征;
[size=1em][size=1em][ES6]
· let創(chuàng)建變量
const:ES6中創(chuàng)建常量
ES6中創(chuàng)建的變量或者常量:都不存在變量提升,也不可以重復(fù)聲明,而且還存在塊級(jí)作用域;
class:創(chuàng)建一個(gè)類
import:導(dǎo)入
ES6中的解構(gòu)賦值
[size=1em][size=1em]按照原有值的結(jié)構(gòu),把原有值中的某一部分內(nèi)容快速獲取到(快速賦值給一個(gè)變量)。
數(shù)組的解構(gòu)賦值
[size=1em][size=1em]解構(gòu)賦值本身是ES6的語(yǔ)法規(guī)范,使用什么關(guān)鍵字來聲明這些變量是無所謂的,如果不用關(guān)鍵字來聲明,那么就相當(dāng)于給window添加的自定義屬性;(嚴(yán)格模式下必須使用關(guān)鍵字來聲明,因?yàn)閲?yán)格模式下不允許出現(xiàn)不用關(guān)鍵字聲明的變量;),如果解構(gòu)不到值,那么變量的值就是undefined;
let [a,b,c]=[12,23,34];
var [d,e,f]=[35,41,63];
console.log(a,b,c)//12,23,34;
console.log(d,e,f)//35,41,63;
[q,w,e]=[1,2,3];//相當(dāng)于給window添加了三個(gè)屬性:q,w,e值分別為1,2,3;(嚴(yán)格模式下會(huì)報(bào)錯(cuò))
[size=1em][size=1em]多維數(shù)組的解構(gòu)賦值,可以讓我們快速的獲取到需要的結(jié)果
let [a,b,c]=[[45,36],12,[23,43,[1,2[4,[8]]]]23,34];
console.log(a)//[45,36]
console.log(b)//12
console.log(c)//[23,43,[1,2,[4,[8]]]]
//數(shù)組中不需要解構(gòu)的值可用逗號(hào)(,)空開,一個(gè)逗號(hào)代表空開一項(xiàng)
let [,,,A]=[12,23,45];
console.log(A)//undefined
let [,,B]=[12,23,45]
console.log(B)//45
[size=1em][size=1em]在解構(gòu)賦值中,支持?jǐn)U展運(yùn)算符即[size=1em]…[size=1em],只要用了擴(kuò)展運(yùn)算符,就相當(dāng)于新生成了一個(gè)數(shù)組或者對(duì)象,如果解構(gòu)不到值的話,新生成的數(shù)組或者對(duì)象為空,而不是undefined,但是擴(kuò)展運(yùn)算符必須放在末尾
let [a,...c]=[12,1,4,83,34];
console.log(a)//12
console.log(c)//[1,4,83,34];
let [a,...b,c]=[12,1,4,83,34];//會(huì)報(bào)錯(cuò),擴(kuò)展運(yùn)算符只能放在末尾;
對(duì)象的解構(gòu)賦值
[size=1em][size=1em]對(duì)象的簡(jiǎn)潔表示法:
const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}
// 等同于
const baz = {foo: foo};
[size=1em][size=1em]對(duì)象的解構(gòu)與數(shù)組有一個(gè)重要的不同。數(shù)組的元素是按次序排列的,變量的取值由它的位置決定;而對(duì)象的屬性沒有次序,變量必須與屬性同名,才能取到正確的值。
let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
如果變量名與屬性名不一致,必須寫成下面這樣。
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
真正被賦值的是后者,而不是前者。
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
first//error: first is not defined
如果要將一個(gè)已經(jīng)聲明的變量用于解構(gòu)賦值,必須非常小心。
// 錯(cuò)誤的寫法
let x;
{x} = {x: 1};//會(huì)報(bào)錯(cuò)
因?yàn)?JavaScript 引擎會(huì)將{x}理解成一個(gè)代碼塊,從而發(fā)生語(yǔ)法錯(cuò)誤。只有不將大括號(hào)寫在行首,避免 JavaScript 將其解釋為代碼塊,才能解決這個(gè)問題。
// 正確的寫法
let x;
({x} = {x: 1});
放在圓括號(hào)當(dāng)中就可以避免 JavaScript 將其解釋為代碼塊。