let和const語法

ES6基本語法之let和const

1晴裹、 let與const

常量const [常量聲明的時(shí)候要賦值被济;常量是不能被修改的,但可以修改對象的值涧团。因?yàn)閷ο笫且妙愋椭涣祝琧onst 指向的是對象引用地址,只要地址不變就符合 const 定義]

Es5寫法

Object.defineProperty(window,”PI2”,{

value: 3.1415926,

writable: false

})

Es6寫法: const PI = 3.1415926

變量let let a = 1 [let聲明的變量只在塊作用域有效泌绣;es6強(qiáng)制開啟嚴(yán)格模式钮追,變量未聲明不能引用,否則會報(bào)引用錯(cuò)誤阿迈;let不能重復(fù)定義變量]

functiontest(){for(leti=1;i<3;i++){console.log(i);//1 2}console.log(i);//uncaught ReferenceError: i is not defined//let a = 1;leta=2;}functionlast(){constPI=3.1415926;constk={a:1}k.b=3;console.log(PI,k);}test();last();

2元媚、解構(gòu)賦值

什么是解構(gòu)賦值:語法上就是賦值的作用。

解構(gòu):左邊一種結(jié)構(gòu),右邊一種結(jié)構(gòu)刊棕,左右一一對應(yīng)進(jìn)行賦值炭晒。

解構(gòu)賦值的分類:

數(shù)組解構(gòu)賦值、對象解構(gòu)賦值甥角、字符串解構(gòu)賦值网严、布爾值解構(gòu)賦值、函數(shù)參數(shù)解構(gòu)賦值嗤无、數(shù)值解構(gòu)賦值

1)數(shù)組結(jié)構(gòu)賦值

{leta,b,rest;[a,b]=[1,2];//let a=1,b=2;之前的寫法console.log(a,b);//1? 2}

... 可以把其它的歸為一個(gè)數(shù)組

{leta,b,rest;[a,b,...rest]=[1,2,3,4,5,6];console.log(a,b,rest);//1 2 [3,4,5,6]}

延伸:可以給c賦值為默認(rèn)值震束,防止沒有成功配對賦值時(shí)候值為undefind情況

{leta,b,c,rest;//[a,b,c]=[1,2];[a,b,c=3]=[1,2];//console.log(a,b,c);//1 2 undefinedconsole.log(a,b,c);//1 2 3}

在es5中不好實(shí)現(xiàn)的代碼,可以通過結(jié)構(gòu)賦值輕松解決翁巍,如下

變量交換

{leta=1;letb=2;[a,b]=[b,a];console.log(a,b);//2 1}

取函數(shù)return回來的值

{functionf(){return[1,2]}leta,b;[a,b]=f();console.log(a,b);//1 2}

當(dāng)函數(shù)返回多個(gè)值時(shí)驴一,可以選擇性的去接收某幾個(gè)變量

{functionf(){return[1,2,3,4,5]}leta,b,c;[a,,,b]=f();console.log(a,b);//1 4}

不知道返回?cái)?shù)組的長度時(shí),后面的數(shù)可以接收為數(shù)組

{functionf(){return[1,2,3,4,5]}leta,b,c;[a,,...b]=f();console.log(a,b);//1 [2,3,4,5]}

2)對象解構(gòu)賦值

{leta,b;({a,b}={a:1,b:2})console.log(a,b);//1 2}

{leto={p:42,q:true};let{p,q}=o;console.log(p,q);//42 true}

對象解構(gòu)賦值的默認(rèn)值處理

{let{a=10,b=5}={a:3};console.log(a,b);}

對象解構(gòu)賦值場景:

{

? let metaData={

? ? title:'abc',

? ? test:[{

? ? ? title:'test',

? ? ? desc:'description'

? ? }]

? }

? let {title:esTitle,test:[{title:cnTitle}]}=metaData;

? console.log(esTitle,cnTitle);

}

1.var可以重復(fù)聲明

var a = 12;

var a = 5;

alert(a) //5

2.var無法限制修改

如:PI = 3.1415灶壶;

3.var沒有塊級作用域

{

}

像:

if(){}for(){}

這都是塊級作用域肝断,在這里面定義的變量則在塊級域外面是沒法使用的。

4.let和const不能重復(fù)聲明

let a =12;

let a=5;

alert(a)//報(bào)錯(cuò)

const a =12;

const a=5;

alert(a)//報(bào)錯(cuò)

5.let是可以重復(fù)修改的驰凛,但是const是常量胸懈,是不能重復(fù)修改的。

let a = 12;

a = 5;

alert(a); //5

const a = 12;

a = 5;

alert(a);//報(bào)錯(cuò)

6.塊級作用域

if(true){

let a = 12;

}

alert(a);//報(bào)錯(cuò)恰响,a is not defined

if(true){

const a = 12;

}

alert(a);//報(bào)錯(cuò)趣钱,a is not defined

語法快不僅僅是if,for等這些胚宦,如下面的也是塊級作用域:

{

let a = 5;

console.log(a) //5

}

console.log(a); //報(bào)錯(cuò)首有,a is not defined

7.塊級作用域的用法:

現(xiàn)在有三個(gè)button,分別點(diǎn)擊枢劝,傳統(tǒng)的寫法是:

window.onload =function(){varaBtn =document.getElementByTagName("input");for(vari=0;i

結(jié)果每次彈出的都是3井联,然后我們采用函數(shù)作為塊級作用域的方式在外邊增加一層,如下:

window.onload =function(){varaBtn =document.getElementByTagName("input");for(vari=0;i

雖然問題解決了您旁,但是如果用現(xiàn)在ES6的let烙常,本身就是在塊級作用域中有效,更加方便鹤盒;

window.onload =function(){varaBtn =document.getElementByTagName("input");for(leti=0;i

最后總結(jié)如下:

名稱? ? ? ? ? ? 重復(fù)聲明? ? ? ? ? ? ? ? ? ? 修改? ? ? ? ? ? ? ? ? ? ? ? ?塊級作用域

let? ? ? ? ? ? ? ?不能重復(fù)聲明? ? ? ? ? ?變量可以修改? ? ? ? ? ? ?塊級作用域

const? ? ? ? ? 不能重復(fù)聲明? ? ? ? ? ?常量不可以修改? ? ? ? ? 塊級作用域

一蚕脏、let命令

基本用法

ES6 新增了let命令,用來聲明變量侦锯。它的用法類似于var驼鞭,但是所聲明的變量,只在let命令所在的代碼塊內(nèi)有效尺碰。

for循環(huán)的計(jì)數(shù)器挣棕,就很合適使用let命令汇竭。

for循環(huán)還有一個(gè)特別之處,就是設(shè)置循環(huán)變量的那部分是一個(gè)父作用域穴张,而循環(huán)體內(nèi)部是一個(gè)單獨(dú)的子作用域

for(let i =0; i <3; i++) {

? let i ='abc';

? console.log(i);

}//abc//abc//abc

上面代碼正確運(yùn)行,輸出了 3 次abc两曼。這表明函數(shù)內(nèi)部的變量i與循環(huán)變量i不在同一個(gè)作用域皂甘,有各自單獨(dú)的作用域.

不存在變量提升

// var 的情況console.log(a);// 輸出undefinedvara =2;// let 的情況console.log(a);// 報(bào)錯(cuò)ReferenceErrorlet a =2;

暫時(shí)性死區(qū)

ES6 明確規(guī)定,如果區(qū)塊中存在let和const命令悼凑,這個(gè)區(qū)塊對這些命令聲明的變量偿枕,從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量户辫,就會報(bào)錯(cuò)渐夸。

總之,在代碼塊內(nèi)渔欢,使用let命令聲明變量之前墓塌,該變量都是不可用的。這在語法上奥额,稱為“暫時(shí)性死區(qū)”(temporal dead zone苫幢,簡稱 TDZ)。

if(true) {

? // TDZ開始tmp ='abc';// ReferenceErrorconsole.log(tmp);// ReferenceError? let tmp; // TDZ結(jié)束console.log(tmp);// undefined? tmp =123;

? console.log(tmp); // 123}

錯(cuò)誤實(shí)例:

//錯(cuò)誤實(shí)例1  vara1 ='123';    if(true){

      a1 ='456';//出現(xiàn)了let所以if內(nèi)生成了一個(gè)單獨(dú)的封閉作用域垫挨,而a1在還未let聲明前使用會報(bào)錯(cuò)      let a1;

    };//錯(cuò)誤實(shí)例2let x1 = y1, y1 =1;

  function fn(){

    console.log(x1,y1);//y1在let未聲明前使用報(bào)錯(cuò)

  };

  fn();

注意:“暫時(shí)性死區(qū)”也意味著typeof不再是一個(gè)百分之百安全的操作韩肝。

a是一個(gè)不存在的變量名,結(jié)果返回“undefined”九榔。

console.log(typeofa);//undefined

不允許重復(fù)聲明

let a =10;

let a =1;//報(bào)錯(cuò)

二哀峻、const命令

基本用法

const聲明一個(gè)只讀的常量。一旦聲明哲泊,常量的值就不能改變剩蟀。相同: 與let 作用域? ?塊級作用域

constPI =3.1415;

PI // 3.1415PI =3;// TypeError: Assignment to constant variable.

實(shí)例:

consta =true;//字符串? 數(shù)值? 布爾//數(shù)組constarr =[];//arr指向的是一個(gè)內(nèi)存地址

arr.push('123');

console.log(arr);//對象constobj = {};

obj.name ='abc';

console.log(obj);//注意? 不能只申明不賦值? 申明后一定要初始化,不能以后賦值const w;

console.log(w);? //錯(cuò)誤

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末攻旦,一起剝皮案震驚了整個(gè)濱河市喻旷,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌牢屋,老刑警劉巖且预,帶你破解...
    沈念sama閱讀 217,826評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異烙无,居然都是意外死亡锋谐,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評論 3 395
  • 文/潘曉璐 我一進(jìn)店門截酷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來涮拗,“玉大人,你說我怎么就攤上這事∪龋” “怎么了鼓择?”我有些...
    開封第一講書人閱讀 164,234評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長就漾。 經(jīng)常有香客問我呐能,道長,這世上最難降的妖魔是什么抑堡? 我笑而不...
    開封第一講書人閱讀 58,562評論 1 293
  • 正文 為了忘掉前任摆出,我火速辦了婚禮,結(jié)果婚禮上首妖,老公的妹妹穿的比我還像新娘偎漫。我一直安慰自己,他們只是感情好有缆,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,611評論 6 392
  • 文/花漫 我一把揭開白布象踊。 她就那樣靜靜地躺著,像睡著了一般妒貌。 火紅的嫁衣襯著肌膚如雪通危。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,482評論 1 302
  • 那天灌曙,我揣著相機(jī)與錄音菊碟,去河邊找鬼。 笑死在刺,一個(gè)胖子當(dāng)著我的面吹牛逆害,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蚣驼,決...
    沈念sama閱讀 40,271評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼魄幕,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了颖杏?” 一聲冷哼從身側(cè)響起纯陨,我...
    開封第一講書人閱讀 39,166評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎留储,沒想到半個(gè)月后翼抠,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,608評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡获讳,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,814評論 3 336
  • 正文 我和宋清朗相戀三年阴颖,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片丐膝。...
    茶點(diǎn)故事閱讀 39,926評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡量愧,死狀恐怖钾菊,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情偎肃,我是刑警寧澤煞烫,帶...
    沈念sama閱讀 35,644評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站累颂,受9級特大地震影響红竭,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜喘落,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,249評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望最冰。 院中可真熱鬧瘦棋,春花似錦、人聲如沸暖哨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,866評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽篇裁。三九已至沛慢,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間达布,已是汗流浹背团甲。 一陣腳步聲響...
    開封第一講書人閱讀 32,991評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留黍聂,地道東北人躺苦。 一個(gè)月前我還...
    沈念sama閱讀 48,063評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像产还,于是被迫代替她去往敵國和親匹厘。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,871評論 2 354