es6 允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構( destructuring )。
本質上,這種寫法屬於 「 模式匹配 」 ,只要等號兩邊的模式相同,左邊的變數就會被賦予對應的值
1,陣列:
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z //
不完全成功
let [x, y] = [1, 2, 3];
x // 1
y // 2
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
// 報錯
let [foo] = 1;
let [foo] = false;
let [foo] = nan;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
解構賦值允許指定預設值。var [foo = true] = ;
foo // true
[x, y = 'b'] = ['a']; // x='a', y='b'
[x, y = 'b'] = ['a', undefined]; // x='a', y='b' //只有全等於 undefinded,預設值才會生效預設值可以引用解構賦值的其他變數,但該變數必須已經宣告。
let [x = 1, y = x] = ; // x=1; y=1
let [x = 1, y = x] = [2]; // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = ; // referenceerror
2.物件
var = ;
foo // "aaa"
bar // "bbb"
物件的解構與陣列有乙個重要的不同。陣列的元素是按次序排列的,變數的取值由它的位置決定;而物件的屬性沒有次序,變數必須與屬性同名,才
能取到正確的值。
var = ;
foo // "aaa"
bar // "bbb"
var = ;
baz // undefined
如果變數名與屬性名不一致,必須寫成下面這樣。
var = ;
baz // "aaa"
let obj = ;
let = obj;
f // 'hello'
l // 'world'
這實際上說明,物件的解構賦值是下面形式的簡寫(參見《物件的擴充套件》一章)。
var = ;
也就是說,物件的解構賦值的內部機制,是先找到同名屬性,然後再賦給對應的變數。真正被賦值的是後者,而不是前者。
var = ;
baz // "aaa"
foo // error: foo is not defined
物件的解構也可以指定預設值。
var = {};
x // 3
var = ;
x // 1
y // 5
var = {};
y // 3
var = ;
y // 5
var = {};
msg // "something went wrong"
預設值生效的條件是,物件的屬性值嚴格等於undefined。
var = ;
x // 3
var = ;
x // null
物件的解構賦值,可以很方便地將現有物件的方法,賦值到某個變數。
let = math;
由於陣列本質是特殊的物件,因此可以對陣列進行物件屬性的解構。
var arr = [1, 2, 3];
var = arr;
first // 1
last // 3
3.字串
字串也可以解構賦值。這是因為此時,字串被轉換成了乙個類似陣列的物件。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
類似陣列的物件都有乙個length屬性,因此還可以對這個屬性解構賦值。
let = 'hello';
len // 5
4、 數值和布林值的解構賦值
解構賦值時,如果等號右邊是數值和布林值,則會先轉為物件。
let = 123;
s === number.prototype.tostring // true
let = true;
s === boolean.prototype.tostring // true
上面**中,數值和布林值的包裝物件都有tostring屬性,因此變數s都能取到值。
解構賦值的規則是,只要等號右邊的值不是物件,就先將其轉為物件。由於undefined和null無法轉為物件,所以對它們進行解構賦值,都會報錯。
let = undefined; // typeerror
let = null; // typeerror
5、 函式引數的解構賦值
函式的引數也可以使用解構賦值。
function add([x, y])
add([1, 2]); // 3
6.盡量避免使用圓括號
// 全部報錯
var [(a)] = [1];
var = {};
var () = {};
var = {};
var = {};
var ) } = };
可以使用圓括號的情況只有一種:賦值語句的非模式部分,可以使用圓括號。
[(b)] = [3]; // 正確
( = {}); // 正確
[(parseint.prop)] = [3]; // 正確
ES6學習 解構賦值
解構賦值是對賦值運算子的擴充套件,是一種針對陣列或物件進行模式匹配,對其中變數進行賦值。解構源 解構賦值表示式的右邊部分 解構的目標 解構賦值表示式的左邊部分 注意 左右兩邊,結構格式要保持一致 陣列 let arr 1 2,3 let a,b,c arr console.log a,b,c 1 2...
ES6 學習 解構賦值
一 陣列解構 陣列解構,解構出來的值跟陣列下標是一一對應的,如果左邊變數多於右邊陣列,則左邊後面部分變數值為undefined,如果右邊陣列元素個數多於左邊解構變數個數,則左邊變數全都有值,且一一對應 1.簡單解構 let arr 1,2,5 let a b c arr a 1,b 2,c 5 2....
ES6 解構賦值
陣列的解構賦值 let a,b 12,13 let a,b,c d 13,15,16 let a,b c 78,12 23 let x,y 1,3,5 x 1,y 3 let x,y,z a x a,y undefined z let h,b 1,2,3,4 1,2,3,4 預設值 let x tr...