欧美videos另类精品-欧美videos另类极品-欧美vide-欧美va在线视频-欧美va在线观看-欧美va在线播放免费观看

ES6中的let和const和解構(gòu)賦值

2021-3-24 前端達(dá)人

ES6中的let和const和解構(gòu)賦值

什么是ES6?

ES6，全稱 ECMAScript 6.0 ，是 JavaScript 的下一個(gè)版本標(biāo)準(zhǔn)，2015.06 發(fā)版。

為什么要使用ES6?

每一次標(biāo)準(zhǔn)的誕生都意味著語(yǔ)言的完善，功能的加強(qiáng)。js語(yǔ)言本身也有一些令人不滿的地方

1.變量提升特性增加了程序運(yùn)行的不可預(yù)測(cè)性。

變量提升可以簡(jiǎn)單看以下代碼了解下:

console.log(a);

var a=1;

//console.log(a)會(huì)輸出undefined

這段代碼也可以這樣表示

var a;

console.log(a);

a=10;

//依舊輸出undefined

這就是變量提升!

2.語(yǔ)法過(guò)于松散，實(shí)現(xiàn)相同的功能，不同的人可以會(huì)寫(xiě)出不同的代碼，閱讀性較低。

所以：ES6 ,目標(biāo)是使JavaScript語(yǔ)言可以用來(lái)編寫(xiě)復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開(kāi)發(fā)語(yǔ)言。我們沒(méi)有理由不去學(xué)習(xí)ES6。

let關(guān)鍵字

ES6中新增的用于聲明變量的關(guān)鍵字。主要是替代var。

特征：1.let聲明的變量只在所處的塊級(jí)有效，具有塊級(jí)作用域！在ES6之前JS只有全局作用域和局部作用域。

塊級(jí)作用域：通俗來(lái)講就是在一對(duì)大括號(hào)中產(chǎn)生的作用域，塊級(jí)作用域中的變量只能在大括號(hào)中訪問(wèn)，在大括號(hào)外面是訪問(wèn)不到的。

可以看以下代碼：

if(true){

let a=10;

console.log(a);//輸出10

}

console.log(a);//報(bào)錯(cuò)提示a沒(méi)有定義

{

let b=10;

console.log(b);//輸出10

}

console.log(b);//報(bào)錯(cuò)提示b沒(méi)有定義

if(true){

let c=20;

console.log(c)//輸出20

if(true){

let d=30;

console.log(c)//輸出 20

}

console.log(d);//報(bào)錯(cuò)d沒(méi)有定義

}

在for循環(huán)中也起到作用，根據(jù)不同的需求選擇let和var！

例如：

for(var i=0;i<10;i++){}

console.log(i) //輸出10

for(let j=0;j<10;j++){}

console.log(j) //報(bào)錯(cuò) j沒(méi)有定義

好處：在業(yè)務(wù)邏輯比較復(fù)雜的時(shí)候，可以放在內(nèi)層變量覆蓋外層變量！

2.存在let 一開(kāi)始就會(huì)形成封閉的作用域使用let命名聲明變量前，變量不可用，必須先聲明后使用，不存在變量提升

例如:

if(true){

console.log(temp);//報(bào)錯(cuò)

let temp=1;

}`

3.let 不允許重復(fù)聲明在一個(gè)作用域內(nèi)。

例如：

if(true){

let temp;

console.log(temp);//報(bào)錯(cuò)Identifier 'temp' has already been declared

let temp=1;

}

if(true){

var temp=10;

let temp=5;

console.log(temp);//報(bào)錯(cuò) 錯(cuò)誤和上面一致

}

但是不在一個(gè)作用域內(nèi)可以例如：

{

let x=10;

console.log(x);//輸出10

}

{

let x=5;

console.log(5);//輸出5

}

const關(guān)鍵字

const一般用來(lái)聲明常量，聲明一個(gè)只讀的常量。

特征：1.一旦聲明其值不能改變必須立即初始化

例如：

const a; //這樣什聲明會(huì)直接報(bào)錯(cuò)！??！

1

這樣聲明沒(méi)有初始化會(huì)直接報(bào)錯(cuò)！

2.對(duì)于對(duì)象：存的不是對(duì)象的本身，而是對(duì)象的引用，引用地址，地址不變，對(duì)象可拓展！

例如：

const foo={y:10};

foo.x=100;

console.log(foo.x);//輸出100

1

2

3

對(duì)象可以擴(kuò)展

但是對(duì)象不能改變

例如：foo={n:1000}; 會(huì)報(bào)錯(cuò)！

作用域：

var v1=100;

function f1(){

console.log(v1,v2); //undefined no defined

var v1=110;

let v2=200;

function f2(){

let v3=300;

console.log(v1,v2,v3);//110 200 300

}

f2();

console.log(v1,v2,v3);// 110 200 no defined

}

f1();

console.log(v1,v2,v3);// 100 no defined no defined

可以向外面作用域找不可以向里面作用域找內(nèi)層變量可能會(huì)覆蓋外層變量

let和var的本質(zhì)區(qū)別：瀏覽器的頂層對(duì)象為window Node的為global，var定義的變量會(huì)關(guān)聯(lián)到頂層對(duì)象中，let和const不會(huì)！

例如：

var a =100;

console.log(window.a); // 100

let b=100;

console.log(window.b); //undefined

1

2

3

4

如何選擇const和let:數(shù)據(jù)需要變化用let 數(shù)據(jù)不需要變化用const

解構(gòu)賦值：ES6中允許從數(shù)組中提值，按照對(duì)應(yīng)位置，對(duì)變量賦值，對(duì)象也可以實(shí)現(xiàn)解構(gòu)！

例如：

{
let a,b,c;
[a,b]=[1,2];
console.log(a,b,c); //輸出 1 2 undefined
}

{
let a,b,c;
[a,b,...c]=[1,2,3,4,5,6];
console.log(a);//輸出1
console.log(b);//輸出2
console.log(c);//輸出[3,4,5,6]
}
{
let a,b,c;
[a,b,c=3]=[1,2];
console.log(a,b,c);//輸出1 2 3
}
{
let a,b;
[a,b]=[1,2];
[a,b]=[b,a]
console.log(a,b);//輸出 2 1
}
{
let a,b;
({a,b}={a:1,b:2})
console.log(a,b);//輸出 1 2
}
{
function fun(){
return [1,2,3,4,5,6]
};
let a,b;
[a,,,,b]=fun();
console.log(a,b);//輸出1 5
}
{
let o={p:42,q:true};
let {p,q}=o;
console.log(p,q);//輸出 42 true
}
{
let {a=10,b=5}={a:3};
console.log(a,b);//輸出 3 5
}

{
let metaData={
title:'abc',
test:[{
title:'test',
desc:'description'
}]
}
let {title:esTitle,test:[{title:cnTitle}]}=metaData;
console.log(esTitle,cnTitle);//輸出abc test
}