變量聲明 和 數(shù)組對(duì)象解構(gòu)賦值,本編主要學(xué)習(xí) let const 使用語法景图,注意事項(xiàng)。以及數(shù)組和對(duì)象的解構(gòu)賦值缩膝。
let 聲明
作用:let作用主要是定義一個(gè)局部變量.
使用語法:
let hello = "hello word";
使用注意事項(xiàng):
- let 聲明的變量只在聲名的塊級(jí)內(nèi)有作用
- let 變量必須先聲明后使用,否則會(huì)報(bào)錯(cuò)
- let 變量不能在一個(gè)作用域里多次聲明
- let 在函數(shù)內(nèi)聲明時(shí)耍属,盡量不與參數(shù)同名萄唇。
錯(cuò)誤示例:
//1.let是塊級(jí)作用域
function f(input) {
let a = 100;
if (input) {
let b = a + 1; //運(yùn)行正確
return b;
}
return b; //錯(cuò)誤 , b沒有被定義
}
//2.let 變量必須先聲明后使用
a++;
let a;
//3.不能在同一作用域重復(fù)定義
let y = 2;
let y = 3;
var x = 1;
let x = 2;
//4.與參數(shù)重復(fù)的情況
//錯(cuò)誤:
function funA(x) {
let x = 100; //報(bào)錯(cuò)寸宵,x已經(jīng)在函數(shù)參數(shù)聲明了
}
//正確:
function funB(codition,x) {
if (codition) {
let x = 100; //運(yùn)行正確超全,x在一新的作用域中
return x;
}
return x;
}
const 聲明
作用:const作用主要是定義一個(gè)常量
使用語法:
const PI = 3.1415;
使用語法:
1.對(duì)常量直接賦值將會(huì)出錯(cuò)
2.常量如果是對(duì)象,對(duì)象屬性是可以重新賦值的;
3.常量的作用域與let 相同; 只在聲明的塊級(jí)有用
4.常量不可重復(fù)定義
錯(cuò)誤示例:
//1.常量不可修改
const PI = 3.1415;
PI = 3; //報(bào)錯(cuò)邓馒,常量不可修改
//2.對(duì)象常量不可直接修改,對(duì)象屬性可以更改
const kitty = {
name: "Aurora",
numLives:9
};
//錯(cuò)誤
kitty = {
name: "Danielle",
numLives:9
};
//正確
kitty.name = "Kitty";
kitty.numLives--;
//3.常量作用域
if (codition) {
const MAX = 5;
}
console.log(MAX) // MAX 在此處不可見
//4.不能重復(fù)聲明
var message = "Hello";
let age = 25;
//以下兩行都是錯(cuò)誤
const message = "Goodbye";
const age = 26;
解構(gòu)賦值
作用:解構(gòu)賦值可將一個(gè)復(fù)雜類型的數(shù)據(jù)蛾坯,如數(shù)組和對(duì)象光酣,分解匹配賦值給多個(gè)獨(dú)立的變量。
使用語法:
- 數(shù)組解構(gòu)
let [a,b,c] = [1,2,3]; - 對(duì)象解構(gòu)
let {foo, bar} = {foo: "aaa",bar:"bbb"};
使用注意事項(xiàng):
1.數(shù)組解構(gòu)按順序脉课,對(duì)象解構(gòu)則無關(guān)順序據(jù)屬性名取值救军。
2.對(duì)于不成功的的解構(gòu),最值會(huì)賦值undefined
3.對(duì)undefined 和 null 進(jìn)行解構(gòu)會(huì)報(bào)錯(cuò)
4.解構(gòu)賦值允許指定默認(rèn)值
5.解構(gòu)賦值對(duì)于var let const 都是適用的
數(shù)組解構(gòu)使用示例:
//解構(gòu)數(shù)組
var [first,second] = [1,2];
first; //1
second; //2
//解構(gòu)多維數(shù)組
var [foo,[[bar],baz]] = [1,[[2],3]];
foo; //1
bar; //2
baz; //3
var [,,third] = ["foo","bar","baz"];
third; //baz
//解構(gòu)...數(shù)組
var [head,...tail] = [1,2,3,4];
head; //1;
tail //[2,3,4];
//解構(gòu)失敗賦值undefined
var [foo] = [];
var [foo] = 1;
var [foo] = 'Hello';
var [foo] = false;
var [foo] = NaN;
//以下兩行解構(gòu)會(huì)報(bào)錯(cuò)
const [foo] = undefined;
const [foo] = null;
//指定解構(gòu)的默認(rèn)值
var [foo = true] = [];
foo; //true
對(duì)象解構(gòu)示例:
//解構(gòu)對(duì)象
let test = { x: 0, y: 10, width: 15, height: 20 };
let { x, y, width, height } = test;
console.log(x, y, width, height); //輸出0,10,15,20
//解構(gòu)對(duì)象按屬性名取值,無關(guān)順序
let { foo, bar } = { foo: 'aaa', bar: 'bbb'};
foo //'aaa';
bar //'bbb';
let {bar,foo} = { foo: 'aaa', bar: 'bbb'};
foo //'aaa';
bar //'bar';
//屬性名不對(duì),賦值為undefined
let { baz , foo} = { foo: 'aaa', bar: 'bbb'};
baz; //undefined //解構(gòu)不成功
foo; //'aaa'
//重命名解構(gòu)屬性,重命名后原名稱不可取值倘零。
let { foo: baz } = { foo: 'aaa', bar: 'bbb'};
baz; //'aaa';
foo; // 出錯(cuò)
//解構(gòu)多維對(duì)象
var o = {
p: [
"Hello",
{ y: "word" }
]
};
var { p: [x, { y }] } = o;
x //"Hello";
y //"word";
//指定默認(rèn)值
var { x = 3 } = {};
x //3
解構(gòu)賦值的具體使用點(diǎn):
- 交換變量值
- 從函數(shù)返回多個(gè)值
- 更方便的接收json類型參數(shù)對(duì)象
- 更方便設(shè)置默認(rèn)參數(shù)
- 更方例的遍歷對(duì)象
- 模塊加載更清晰
本文為我個(gè)人學(xué)習(xí)ECMA6的筆記唱遭,內(nèi)容及案例多為書本抄寫,未做代碼正確性測(cè)試呈驶,內(nèi)容僅供參考拷泽,不保證文中觀點(diǎn)的及代碼的正確性。