es6學習之路(3) 解構賦值

2021-07-26 22:37:03 字數 3720 閱讀 2361

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