常用的ES6新特性--解構賦值
let和const
由於var可以重複宣告,而且無法限制修改,也沒有塊級作用域,在一些時候不是很合適,所以出現了let和const
- let:不能重複宣告,可以修改,有塊級作用域,適合for迴圈等一些場景
- const:不能重複宣告,有塊級作用域,不可以修改,比較適合做全域性
變數的結構賦值
-
陣列的解構賦值
let [a,b,c] = [1,2,3] let [d,[[e],f]] = [1,[[2],3]]//d=1,e=2,f=3 let [x,y,...z] =['a'];//x="a",y=undefined,z=[]結構不成功變數的值就為undefined
不完全解構
let [a,[b],c] = [1,[2,3],4];//a=1,b=2,c=4
對於set結構,可以使用陣列的解構陣列
let [x,y,z] = new Set(['a','b','c']);//a=a,y=b,z=c
主要資料結構具有Iterator介面,都可以採用陣列形式的解構賦值,如下斐波那契數列的例子,利用generator函式
function* fibs(){ let a = 0 ; let b = 1; while(true){ yield a;//利用yield返回中間值 [a,b] = [b,a+b]; } } let [first,second,third,fourth,fifth,sixth] = fibs(); //first=0,second=1,third=1,fourth=2,fifth=3,sixth=5
預設值
解構賦值允許指定預設值,es6內部使用嚴格相等運算子===判斷一個位置是否有值,所以只有當一個數組成員嚴格等於undefined,預設值才會生效;預設值可以引用解構賦值的其他變數,但該變數必須已經宣告。
let [x,y='b'] = ['a'];//x='a',y='b' let [x=1] = [undefined];//x=1 let [x=1] = [null];//x=null let [x=1,y=x] = [2];//x=2,y=2因為先把2解構賦給x,x把值賦給y,所以x,y都為2 let [x=1,y=x]=[1,2];//x=1,y=2
-
物件的解構賦值
陣列的解構和物件的解構有一個不同,陣列的元素按次序排列,變數的取值由其位置決定;而物件的屬性沒有次數,變數必需和屬性同名,才能取得正確的值。
let {foo:foo,bar:bar} = {foo:'qqq',bar:'www'}//foo=qqq,bar=www //巢狀解構 let obj = {p:['hello',{y:'world'}]}; let {p:[x,{y}]} = obj//x=hello,y=world此時p作為模式不會被賦值 let {p,p:[x,{y}]} = obj//p=['hello',{y:'world'}]此時P作為變數賦值
以下例項進行了三次解構,分別是對loc,start,line三個屬性,但是最後解構賦值時,只有line是屬性,start和loc都是模式,而不是變數
const node = { loc:{ start:{ line:1, column:5 } } }; //第一個引數是對loc進行解構,得到loc = { start: { line: 1, column: 5 } } //第二個引數對start進行解構,得到start = { line: 1, column: 5 } //第三個引數對line進行解構,得到 line = 1 let{ loc,loc:{start},loc:{start:{line}}} = node; console.log(loc);//{ start: { line: 1, column: 5 } } console.log(start);//{ line: 1, column: 5 } console.log(line);//1
巢狀賦值
let obj = {}; let arr = []; ({foo:obj.prop, bar:arr[0]} = {foo:123,bar:true}); console.log(obj);//{prop:123} console.log(arr);//[true]
物件的預設值,和陣列的預設值相似
var {x:y=3}={x:5}//y=5 var {x=3} = {x:undefined}//x=3 var {x=3} = {x:null}//x=null var {foo} = {bar:'bz}//foo=undefined解構失敗變數的值等於undefined
一些錯誤寫法:
let _tmp = {baz :'bz'}; _tmp.foo.baz;//報錯,因為foo已經是undefined,再取子屬性會報錯 let x; {x} = {x:1};//會報錯,因為JavaScript引擎會把{x}解釋成程式碼塊,只有避免將大括號寫在行首,避免將其解釋成程式碼塊,才能避免報錯 let x; ({x} = {x:1});//正確寫法
-
字串的解構賦值
const [a,b,c,d,e] = 'hello'//a='h',b='e',.... let {length:len}='hello'//len=5
-
數值和布林值的解構賦值
解構賦值時,如果等號右邊是數值和布林值,會先轉為物件;而undefined和null無法轉為物件,所以對它們解構賦值會報錯
let {toString:s} = 123; console.log(s === Number.prototype.toString);//true let {toString:s} = true; console.log(s === Boolean.prototype.toString);//true let { prop: x } = undefined; // TypeError let { prop: y } = null; // TypeError
-
函式引數的解構賦值
[[1, 2], [3, 4]].map(([a, b]) => a + b);//[3,7]
函式引數的解構可以使用預設值,但是不同的寫法會有區別,有如下兩種情況,一種是為函式的引數指定預設值,一種是為變數指定預設值
-
變數的預設值
函式test的引數是一個物件,通過對物件的解構,得到引數x,y,解構失敗,引數為預設值
function test({x=0,y=0} ={}){ return [x,y]; } console.log(test({x:2,y:5}));//[2,5] console.log(test({x:2}));//[2,0] console.log(test({}));//[0,0] console.log(test());//[0,0]
- 函式引數的預設值,下面是為函式的引數指定預設值
function test({x,y} = {x:0,y:0}){ return [x,y]; } console.log(test({x:2,y:5}));//[2,5] console.log(test({x:2}));//[ 2, undefined ] console.log(test({}));//[ undefined, undefined ] console.log(test());[0,0]
-
變數解構賦值的用途
- 交換變數的值
- 從函式返回多個值
- 函式引數的定義
- 提取JSON資料
- 函式引數的預設值
- 遍歷Map結構
- 輸入模組的指定方法