介紹
解構賦值是一種非常方便的語法,可以讓我們更簡潔地從數組和對象中提取值,并且可以應用于很多實際開發場景中。
1. 數組的解構賦值
數組的解構賦值是按照一定模式從數組中提取值,然后對變量進行賦值。下面是一個例子:
const F4 = ['小沈陽', '劉能', '趙四', '宋小寶'];
let [xiao, liu, zhao, song] = F4;
console.log(xiao); // 輸出: 小沈陽
console.log(liu); // 輸出: 劉能
console.log(zhao); // 輸出: 趙四
console.log(song); // 輸出: 宋小寶
在這個例子中,我們定義了一個數組 F4
,然后使用解構賦值將數組中的元素分別賦值給變量 xiao
、liu
、zhao
和 song
。
2. 對象的解構賦值
對象的解構賦值是按照一定模式從對象中提取值,然后對變量進行賦值。下面是一個例子:
const zhao = {name: '趙本山',age: '不詳',xiaopin: function() {console.log("我可以演小品");}
};let { name, age, xiaopin } = zhao;
console.log(name); // 輸出: 趙本山
console.log(age); // 輸出: 不詳
console.log(xiaopin); // 輸出: [Function: xiaopin]
xiaopin(); // 輸出: 我可以演小品
在這個例子中,我們定義了一個對象 zhao
,然后使用解構賦值將對象中的屬性分別賦值給變量 name
、age
和 xiaopin
。
復雜解構賦值
// 復雜解構
let wangfei = {name: '王菲',age: 18,songs: ['紅豆', '流年', '曖昧', '傳奇'],history: [{name: '竇唯'},{name: '李亞鵬'},{name: '謝霆鋒'}]
};
let {songs: [one, two, three], history: [first, second, third]} = wangfei;
3. 解構賦值的應用場景
解構賦值在實際開發中有很多應用場景,比如:
- 函數參數的解構賦值,可以簡化函數調用時的參數傳遞。
- 從 API 返回的數據中提取需要的數據。
- 交換變量的值。
下面是一個交換變量值的例子:
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 輸出: 2
console.log(b); // 輸出: 1
在這個例子中,我們使用解構賦值來交換變量 a
和 b
的值。