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;
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
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ò)誤