ES6解構
阿新 • • 發佈:2018-11-09
1、解構表示式傳參
let User = { name : 'ghostwu', age : 22 }; function show( obj ){ console.log( obj ); //obj其實就是User物件 console.log( obj === User ); //true //函式中可以訪問在引數中解構出來的變數 console.log( name, age ); //ghostwu, 22 } show( { name, age } = User ); //表示式傳值,整個表示式的值 取決於右邊,所以把User傳給了obj console.log( name, age ); //ghostwu, 22
2、解構陣列
let arr = [ 10, 20, 30, 40 ];
// 陣列用[]解構
let [ one, two ] = arr;
console.log( one, two ); //10 20
3、解構巢狀陣列
let arr = [ 10, [ 20, 30 ], 40 ]; console.log( arr[1][1] ); //30 let [ one, two, three, four ] = arr; console.log( one, two, three, four ); //10 [20, 30] 40 undefined [one, [ two, three ], four ] = arr; //前面不要let,否則會報重定義錯誤 console.log( one, two, three, four ); //10 20 30 40
4、解構中的不定引數(...)
let arr = [ 10, 20, 30 ];
let [ one, ...others ] = arr;
console.log( others.length ); //2
console.log( one ); //10
console.log( others[0] ); //20
console.log( others[1] ); //30
5、巢狀物件解構
let User = { name : 'ghostwu', age : 22, class : { group1 : { one : '王超', two : '馬漢' }, group2 : { one : '張龍', two : '趙虎' } } }; //在User物件解構class, 在class中解構group1 let { class : { group1 } } = User; console.log( group1.one ); //王超 console.log( group1.two ); //馬漢 //在User物件解構class, 在class中解構group1, 在group1中解構one, two ({ class : { group1 : { one, two } } } = User); console.log( one, two ); //王超, 馬漢 //重新命名group1 為 diyizu ({ class : { group1 : diyizu } } = User); console.log( diyizu.one ); //王超 console.log( diyizu.two ); //馬漢 //three 賦預設值 ({ class : { group1 : { one, two, three = '展昭' } } } = User); console.log( one, two, three );//王超,馬漢,展昭