前言
在JavaScript中，合理使用...運算子對物件和陣列進行解構賦值等，可以讓我們寫出更加簡潔的程式碼，可以幫我們省下多次重複讀取物件下的某個屬性的繁瑣流程，一定程度上提升了我們的開發效率，但在使用時也有一些注意項，下面我們就來探究一下...運算子在對物件和陣列進行解構賦值的各種用法。
1. 物件解構賦值
1.1 普通物件解構賦值並提供預設值
下面是一個最簡單的物件解構賦值的例子：
let user = {
name: '張三',
age: 18,
sex: '男'
}
let { name, age = 0, sex, weight = '180斤' } = user
console.log(name, age, sex, weight) // 張三 18 男 180斤
以上在解構賦值的過程中，我們分別給user物件的age和weight屬性提供了預設值，由於在user物件中已經存在age屬性，所以使用的是原來的值，weight屬性不存在與該物件中，所以應用預設值。
1.2 物件解構屬性重新命名並提供預設值
下面是在物件進行解構給屬性進行重新命名後再賦預設值的例子：
let user = {
name: '張三',
age: 18,
sex: '男'
}
let { age: age2, name: name2, sex: sex2, weight: myWeight = '180斤' } = user
console.log(name2, age2, sex2, myWeight) // 張三 18 男 180斤
console.log(age) // Uncaught ReferenceError: age is not defined
由於解構賦值的屬性名已經變更，所以變更前的屬性名為未定義狀態。
1.3 物件解構賦值，直接對已有變數進行修改
下面是對外部作用域中，已經存在相同屬性名的變數進行直接修改的例子：
let user = {
name: '張三',
age: 18,
sex: '男'
}
let name = 'vilan';
let age = 20;
let sex = '女';
console.log(name, age, sex); // vilan 20 女
// 需要括號包起來形成整體（否則賦值左邊會被認為是一個程式碼塊，給程式碼塊進行賦值會報錯），並且括號前面需要加分號
({ name, age, sex } = user);
/**
* error: Declaration or statement expected. This '=' follows a block of statements, so if you intended to write a destructuring assignment, you might need to wrap the whole assignment in parentheses.
* 需要宣告或陳述。這個'='跟在語句塊後面，所以如果您打算編寫解構式賦值，可能需要將整個賦值用圓括號括起來。
*/
console.log(name, age, sex) // 張三 18 男
下面是對外部作用域中，已經存在不相同屬性名的變數進行直接修改的例子：
let user = {
name: '張三',
age: 18,
sex: '男'
}
let name2 = '馬哥';
let age2 = '66';
let sex2 = '女';
console.log(name2, age2, sex2); // 馬哥 66 女
({ name: name2, age, sex } = user);
console.log(name2, age2, sex2); // 張三 18 男
以上例子我們透過物件解構重新命名為已經存在的變數名進行直接修改該變數值。
note: 在一些團隊的eslint驗證規範中可能不允許使用;的情況，那麼爲了可以加個{}程式碼塊包裹解構語句
let user = {
name: '張三',
age: 18,
sex: '男'
}
// 不加分號，可以加個程式碼塊
{
({ name, age, sex } = user)
}
console.log(name, age, sex) // 張三 18 男
2.巢狀物件解構賦值
下面是一個基本的巢狀物件解構賦值例子：
const user = {
name: '張三',
age: 18,
sex: '男',
address: {
city: '北京',
street: '朝陽區',
detail: {
house: '01',
room: '302'
}
}
}
let { name, age, sex, address: { city, street, detail: { house, room } } } = user
console.log(name, age, sex, city, street, house, room) // 張三 18 男 北京 朝陽區 01 302
當存在巢狀物件時，我們在使用巢狀的物件屬性時通常會這樣使用user?.address?.city，增加一個可選連運算子(?)，這是因為沒有給物件提供預設值，物件可能為undefined導致報錯。
下面這個方法是一個巢狀物件，我們可以像下面這樣把裡面的所有屬性給預設值：
function getLocation({
name = '李四',
age = 20,
sex = '女',
address = {
city = '北京',
street = '朝陽區',
detail = {
house = '01',
room = '302'
} = {}
} = {}
} = {}) {
console.log(name, age, sex, city, street, house, room) // 李四 20 女 北京 朝陽區 01 302
}
// 直接執行不傳引數
getLocation()
在getLocation方法引數中，我們給最外層物件提供了一個空物件為預設值，這樣就能繼續對內部name、age、sex、address進行解構，接著對address賦預設值為空物件，繼續對內部屬性city、street、detail解構，最後detail內部屬性解構也是同理。
3.陣列進行解構賦值
1.普通陣列進行解構賦值
// 2.1普通陣列解構 let list = ['張三', '18', '男'] let [name, age, sex, weight = '保密'] = list console.log(name, age, sex, weight) // 張三 18 男 保密
2.巢狀陣列進行解構賦值
let list2 = [ ['張三', '18', '男'], ['李四', '20', '女'] ] let [ [name, age, sex], [name2, age2, sex2] ] = list2 console.log(name, age, sex) // 張三 18 男 console.log(name2, age2, sex2) // 李四 20 女
3.使用解構賦值進行陣列轉物件
let list = ['張三', '18', '男']
let persion = {
...list
}
console.log(persion) // {0: "張三", 1: "18", 2: "男"}
總結
在開發中合理利用...運算子進行解構賦值可以為我們的開發提供諸多便利，但也還是要結合自身開發場景進行使用，只要能夠為你的程式碼閱讀起來更清晰，提升程式碼的可維護性，你可以選擇使用它。
