Es6 解構賦值

2021-08-19 19:02:39 字數 2220 閱讀 1795

陣列的解構賦值

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

在es5中

var a =1,b = 2, c = 3;
在 es6中可以通過陣列簡寫成：

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

let [a,[b],c] = [1,[2],3];
只要按照對應的位置進行賦值，可以任意巢狀。

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


// head=>


1, tail=>[2,3,4]
如果解構失敗，變數的值就是undefined:

let [a,b] = [2];


//a=>


2, b=>undefined
當 左邊的變數數量個數小於右邊的值的個數，是不完全解構，這種情況也是可以解構成功的，按照變數對應的位置進行解構即可。

let [a,b] = [1,2,3];
如果等號的右邊不是陣列（或者嚴格來說，不是可遍歷的結構），那麼將會報錯。

let [foo] = 1;


let [foo] = false;


let [foo] = nan;


let [foo] = undefined;


let [foo] = null;


let [foo] = {};
以上都會報錯：*** is not iterable(…不是迭代器)

解構賦值對於var、let、const命令都適用。

let [a,b=2] = [1];//a = 1, b = 2
只有陣列的值絕對等於undefined，才會被賦予預設值，否則即使是null和false也會被正常賦值。

（是否絕對等於undefined，不等於就走預設值，等於 就走右邊附的值）

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


let [x=1] = [null]; // x = null;
如果把這個預設值給設定成了乙個函式，即使我們在預設值那裡執行了這個函式：

function


f() 


let [x = f()] = [1];
如果x被成功解構賦值了，沒有賦值成預設值，那麼這個函式就不會被執行，因為根本js根本不會走那裡的**，因此看上去執行了f函式，但是其實並沒有，所以不會列印aaa的。

預設值可以引用解構賦值的其他變數，但是前提是該變數必須已經宣告。

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，因為x用到預設值y的時候，y還沒有被宣告
var  = ;


// a = 123;


// b = '234';
物件的解構賦值和陣列的解構賦值的區別在於：陣列的元素是按照次序排序的，因此它們賦值也是按照順序賦值的，但是物件的屬性是沒有次序的，變數必須與屬性同名，才會被賦值。

而與陣列的解構賦值一樣，如果我們的變數在物件中沒有找到同名的屬性的話，那麼這個變數的值就是undefined。

物件的解構賦值的內部機制是：先找到同名的屬性，然後把這個屬性值賦予給對應的變數。

也就是說，這樣的寫法也是可以被賦值的：

= ;


//demo 123
將a的屬性值123拿出來賦值給變數a，但是變數a的值是demo，因此就是把demo的值變成了123。

注意這裡demo才是真正的變數，a只是乙個匹配模式，模式是不會被賦值的。

這樣就完成了即使沒有同名屬性可以成功賦值的任務。

同時物件的解構賦值也只是可以有預設值的，條件和陣列的一樣。

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

es6解構賦值

coding changes the world accumulating makes yourself 主要從三個方面講述 陣列式的解構賦值 物件式的解構賦值 函式中的解構賦值 preface 現今的變數宣告語法十分的直接 左邊是乙個變數名，右邊可以是乙個陣列 的表示式或乙個物件 的表示式，等等。...