js 陣列解構賦值

2022-06-19 14:15:10 字數 1866 閱讀 8376

es6中新增了對陣列拆分並且賦值的方法——解構賦值

例子：

let arr = [1, 2, 3];


let [a, b, c] = arr;


console.log("a = " + a);// a = 1


console.log("b = " + b);// b = 2


console.log("c = " + c);// c = 3
等式左邊的[a,b,c]和右邊的陣列的元素相互對應，a->arr[0],b->arr[1],c->arr[3]，可以通過解構的方式來把陣列中的元素拆分並且賦值給建立好的變數。

陣列解構賦值的特點

等式左邊的變數個可以超過右邊陣列中的元素個數，左邊多餘的變數會被賦值為undefined

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


console.log("a = " + a);// 1


console.log("b = " + b);// 2


console.log("c = " + c);// undefined
等式左邊的變數個數可以小於右邊陣列中的元素個數

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


console.log("a = " + a); //a = 1


console.log("b = " + b); //b = 2
左邊變數個數小於右邊陣列元素個數時，左邊的等式若是設定了預設值，則會被覆蓋

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


console.log("a = " + a);// a = 1


console.log("b = " + b);// b = 2
4.左邊變數個數大於右邊陣列元素個數時，我們可以給左邊變數指定預設值

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


console.log("a = " + a);// a = 1


console.log("b = " + b);// b = 2


console.log("c = " + c);// c = 3
等式左邊的格式要與右邊的陣列一致，才能正常解構

例如：

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


console.log("a = " + a);// a = 1


console.log("b = " + b);// b = 2


console.log("c = " + c);// c = 3


console.log("d = " + d);// d = 4
能夠成功進行解構

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


console.log("a = " + a);// a = 1


console.log("b = " + b);// b = 2


console.log("c = " + c);// c = 3,4


console.log("d = " + d);// undefined
兩邊結構不同，將無法正確地進行完全解構

我們可以用擴充套件運算子來更加簡便地解構陣列

例子：

let [a, ...b] = [1, 2, 3, 4, 5, 6, 7];


console.log(a); // 1


console.log(b); // [2, 3, 4, 5, 6, 7]
可以把1之外的所有其他陣列元素賦值給b

解構賦值 陣列的解構賦值

什麼是解構賦值？es6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構 destructuring 我的理解是 允許宣告一種模式 陣列 物件等 裡面包含乙個或多個變數，再分別對這些變數遍歷 按照對應位置 賦值。以前，為變數賦值，只能直接指定值。let a 1 let b 2 通...

JS技巧 解構賦值

在前面我們介紹了使用 json.stringify 來過濾物件的屬性的方法。這裡，我們介紹另外一種使用 es6 中的 解構賦值 和 拓展運算子 的特性來過濾屬性的方法。比如，下面這段示例 我們想過濾掉物件 types 中的 inner 和 outer 屬性 const console.log res...

陣列的解構賦值

es6允許按照一定的模式，從陣列和物件中提取值，對變數進行賦值，這被稱之為解構 destructuring 以前為變數賦值，只能直接指定值 var a 1 var b 2 var c 3 es6允許寫成這樣 var a,b,c 1,2,3 本質上，這種寫法屬於 模式匹配 只要等號兩邊的模式相同，左邊...