ES6中的解構賦值

2022-03-15 05:07:27 字數 1817 閱讀 3925

在解釋什麼是解構賦值前,我們先來看一下, es5 中對變數的宣告和賦值。

var str = 'hello word';

左邊乙個變數名,右邊可以是字串,陣列或物件。

es6 中增加了一種更為便捷的賦值方式。稱為destructuring。好像大家普遍翻譯為解構。解構賦值允許我們將陣列或物件的屬性賦予給任何變數,該變數的定義語法與陣列字面量或物件字面量很相似。舉個例子可以直觀的說明。

let [speak, name] = ['hello', 'destructuring'];

console.log( speak + ' ' + name ); // hello destructuring

用更加直白的話來描述就是,等號兩邊保持相同的形式(陣列對應陣列,物件對應物件),則左邊的變數就會被賦予對應的值。如果對應的右邊值缺失,缺失部分變數值為undefined,如果右邊值多餘,依舊能夠正常解構。

// es6 中

let arr = [1,2,3,4,5];

let [el1, el2] = [arr];

// 或者

let [el1, el2] = [1,2,3,4,5];

// el1 => 1, el2 => 2

解構賦值也是可巢狀的:

let value = [1, 2, [3, 4, 5]];

let [el1, el2, [el3, el4]] = value;

同樣可以通過簡單地在指定位置省略變數來忽略陣列中的某個元素:

let value = [1, 2, 3, 4, 5];

let [el1, , el3, , el5] = value;

更進一步,預設值同樣也可以被指定:

let [firstname = "john", lastname = "doe"] = ;

es6中,提供了一種將右側多餘的值以陣列的形式賦值給左側變數的語法——「rest「模式:

let [head, ...tail] = [1, 2, 3, 4];  

console.log(tail); // [2, 3, 4]

當預設值不存在,變數值就等於undefined

let [missing] = ;  

console.log(missing); // undefined

這裡的陣列,指的是部署了[iterator](介面的資料結構。

和陣列的用法相類似,乙個主要的不同點是,物件是無次序排列的,所以變數必須和屬性名相同。

let person = ;

let = person;

解構另乙個特性是,變數 keys 可以使用計算後的屬性名,但是如果你對這容易混淆的話,不建議使用。

let person = ;

let = person;

// `name`變數將會被宣告為 `person.firstname` 的值

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

function add()

add(); // 3

當嘗試解構nullundefined的時候會報錯。這是因為使用物件賦值模式時,被解構的值必需能夠轉換成乙個物件(object)。大多數的型別都可以轉換為乙個物件,但null和undefined卻並不能被轉換。

解構賦值的好處有很多,比如

ES6中解構賦值

理解 解構賦值就是從目標物件或陣列中提取自己想要的變數。最常用的場景是 element ui 或 vant ui 按需引入,請求介面返回想要的資料。陣列解構 乙個蘿蔔乙個坑,按照順序進行 var a,b,c 12,13 a,b 這個寫法報錯 invalid destructuring assignm...

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