ES 6 系列 賦值的新方式 解構賦值

es 6 允許按照一定的模式，從陣列和物件中提取值，然後對變數進行賦值，這被稱之為解構；

最基本寫法：

let [a, b, c] = [1, 2, 3];

a // 1
b // 2
c // 3

//---------- 完全解構成功let [foo, [[bar], baz]] = [1, [[2], 3]];

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] = ;
let [bar, foo] = [1];
foo // undefined//----------報錯，等號右邊不是陣列（或者嚴格說，不是可遍歷的結構）
let [foo] = 1;
let [foo] = false;
let [foo] = nan;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

1.標準寫法：

let  = ;

簡寫：

let  = ;

foo // "aaa"
bar // "bbb"

注意： 物件的結構不需要像陣列那樣注重順序，只需要注意保證變數（等號左邊）名與物件屬性（等號右邊）名相同即可；

2.如果變數名和屬性名不一致，必須寫成下面的格式：(注意變數宣告時的順序以及使用的符號)

let  = ;

css// "aaa"
let obj = ;
let  = obj;
f // 'hello'
l // 'world'

3.物件的巢狀解構

let obj =  

] }; 
let ] } = obj; 
x// "hello" 
y// "world"

我承認，一開始是看不懂的。

let 花括號中的 p 是模式，不是變數，同理，標準寫法中也是這個原理；如果想要 p 作為變數進行賦值，可以寫成：

let ] } = obj;

x // "hello"
y // "world"
p // ["hello", ]

下面這個例子，看看能不能寫出結果：

const node = 

}};let , loc: } } = node;
line ？
loc ？
start ？

答案如下：

line // 1

loc  // object 
start // object 
// 上面的**有三次解構賦值，分別是對 loc、 start、 line 三個屬性的解構賦值；
// 最後一次對 line 屬性的解構賦值之中，只有 line 是變數， loc 和 start 都是模式，不是變數；

還有一些符合規則但應用很少的情況就不列舉，詳情請移步：字串的解構賦值-阮一峰 ;

陣列解構的預設值：

let [foo = true] = ;

foo // true
let [x, y = 'b'] = ['a'];
// x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; 
// x='a', y='b'

es 6 的內部使用嚴格相等運算子（===），判斷乙個位置是否有值。只有嚴格等於 undefined，預設值才會生效。

let [x = 1] = [undefined];

x // 1
let [x = 1] = [null];
x // null

物件解構的預設值：

var  = {};

x // 3
var  = ;
x // 1
y // 5
var  = {};
y // 3
var  = ;
y // 5
var  = {};
msg // "something went wrong"

同樣遵守嚴格相等的模式：

var  = ;

x // 3
var  = ;
x // null

const [a, b, c, d, e] = 'hello';

a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

上例中，在解構時，字串被轉換成了乙個類似陣列的物件。

這個類似陣列的物件都有乙個 length 屬性，可以直接對這個屬性解構賦值：

let  = 'hello';

len // 5

解構賦值時，如果等號右邊的數值和布林值，則會先轉成物件：

let  = 123;

s === number.prototype.tostring // true
let  = true;
s === boolean.prototype.tostring // true

上例中，數值和布林值的包裝物件都有 tostring 屬性，因此變數 s 都能取到值。

解構賦值的規則（實質）是：只要等號右邊的值不是物件或者陣列，就先將其轉化成物件。而由於 undefined 和 null 無法轉成物件，故對他們的解構賦值都會報錯。

let  = undefined; // typeerror

let  = null; // typeerror

函式的引數也可以使用解構賦值。

// 1.

function add([x, y])
add([1, 2]); // 3
// 2.
[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]
//3.
function move( = {}) ' 可以省略
return [x, y];
}move(); // [3, 8]
move(); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

ES6系列（二）解構賦值

之前在我們開發的過程中，難免會碰到這樣的問題 後端傳給我們一串資料，然後我們需要對這個資料進行處理。如果是這樣的乙個資料 let obj 然後我們需要用變數去儲存這些資料，那麼我們可能會這麼操作 let username obj.username,userid obj.userid,professi...

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...

ES6解構賦值

一 基本用法 解構 destructuring 按照一定的模式，從陣列或者物件中提取值，對變數進行賦值。let par1,par2,par3 1,2 console.log par1,par2,par3 1 2 不完全解構時par3對值為undefined 解構賦值允許指定變數對預設值。let pa...