Javascript 解構賦值,將屬性/值從物件/陣列中取出,賦值給其他變數
概念:解構賦值語法是一種 Javascript 表示式。通過解構賦值, 可以將屬性/值從物件/陣列中取出,賦值給其他變數。
var a, b, rest;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
[a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]
({ a, b } = { a: 1, b: 2 });
console.log(a); // 1
console.log(b); // 2
({a, b, ...rest} = {a: 1, b: 2, c: 3, d: 4});
console.log(a); // 1
console.log(b); // 2
console.log(rest); // {c: 3, d: 4}
應用:使用解構賦值交換兩個變數的值。
var a = 3;
var b = 8;
[a, b] = [b, a];
console.log(a); // 8
console.log(b); // 3
應用:解析一個從函式返回的陣列
function fn() {
return [6, 8];
}
var a, b;
[a, b] = fn();
console.log(a); // 6
console.log(b); // 8
應用:忽略不感興趣的值
function f() {
return [6, 7, 8];
}
var [a, , b] = f();
console.log(a); // 6
console.log(b); // 8
應用:將剩餘陣列賦值給一個變數
var [a, ...b] = [6, 7, 8];
console.log(a); // 6
console.log(b); // [7, 8]
應用:物件結構賦值
var people = [
{
name: 'Mike Smith',
family: {
mother: 'Jane Smith',
father: 'Harry Smith',
sister: 'Samantha Smith'
},
age: 35
},
{
name: 'Tom Jones',
family: {
mother: 'Norah Jones',
father: 'Richard Jones',
brother: 'Howard Jones'
},
age: 25
}
];
for (var {name: n, family: {father: f}} of people) {
console.log('Name: ' + n + ', Father: ' + f);
}
// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"
相關文章
- 物件屬性值賦給變數物件變數
- JavaScript陣列解構賦值JavaScript陣列賦值
- JavaScript 物件解構賦值JavaScript物件賦值
- php之普通變數賦值、物件賦值、引用賦值的區別PHP變數賦值物件
- 變數的解構賦值變數賦值
- ES6學習-4 解構賦值(1)陣列的解構賦值賦值陣列
- JavaScript 字串解構賦值JavaScript字串賦值
- javascript 將變數值作為物件屬性 獲取物件對應的值JavaScript變數物件
- 給numpy陣列賦同樣的值陣列
- JavaScript函式引數解構賦值JavaScript函式賦值
- web中,利用反射給物件賦值Web反射物件賦值
- JavaScript解構賦值的用途JavaScript賦值
- php7中為物件/關聯陣列進行解構賦值PHP物件陣列賦值
- 變數的賦值 指標間接賦值變數賦值指標
- 解構賦值賦值
- 陣列未被賦值時其值為多少?陣列賦值
- matlab中怎麼給符號變數賦值Matlab符號變數賦值
- 鎖賦值給其他變數為什麼會死鎖呢?賦值變數
- 合併陣列物件中相同的屬性值陣列物件
- JS解構賦值JS賦值
- ES6 - 變數的解構賦值解析變數賦值
- ECMAScript 6入門 - 變數的解構賦值變數賦值
- ES6之變數的解構賦值變數賦值
- 列表切片賦值給另一個變數賦值變數
- C# 類相同屬性賦值C#賦值
- Vue.js - 陣列和物件的賦值動態變化 & 克隆Vue.js陣列物件賦值
- PHP中陣列賦值效能及過程PHP陣列賦值
- ES6 -- 變數的解構賦值的用途變數賦值
- 深入ES6 三 變數的解構賦值變數賦值
- shell變數命名與賦值變數賦值
- shell 變數賦值問題變數賦值
- 物件賦值轉換物件賦值
- ES6:變數的結構賦值變數賦值
- JavaScript 同時宣告多個變數並賦值JavaScript變數賦值
- JavaScript 連等賦值JavaScript賦值
- 複製物件重新賦值不改變原物件物件賦值
- ES6中的解構賦值賦值
- ES6入門之變數的解構賦值變數賦值