JavaScript基礎之ES6對象解構賦值

對象解構賦值

ES6 容許按照必定模式，從數組和對象中提取值，對變量進行賦值，這被稱爲解構(Destructuring)。
--- 阮一峯《ECMAScript 6 入門》

具體的對象解構賦值的規則能夠參考 對象的解構賦值, 說的很詳細。

做爲一個前端程序員，對於ES6這個新的語法表達式，確定是須要熟練使用的，下面是我我的的一些理解。給你們分享一下。

在ES6沒有出現之前，咱們是這樣把對象中的值賦給變量的。

// 初版
var obj = {name: '小明', age: 12, sex: '男'};
var name = obj.name;
var age = obj.age;
var sex = obj.sex;
var phone = obj.phone // phone => undefined

而後有人說這裏，var被使用屢次, 很差。 因而修改成下面這樣?

// 第二版
var obj = {name: '小明', age: 12, sex: '男'};
var name = obj.name,
    age = obj.age,
    sex = obj.sex,
    phone = obj.phone;

有人說，obj這個對象被屢次調用，很差...... 因而ES6來了。被修改成下面這樣?

// 第三版
let obj = {name: '小明', age: 12, sex: '男'};
let {name, age, sex, phone} = obj

暫時沒有人說很差了。

當咱們想把對象中的屬性值賦給變量的時候。通常須要考慮兩個因素。分別是屬性值、變量。而屬性是經過屬性名決定的，變量是經過變量名決定的。因此，最後決定因素就是屬性名，變量名。當咱們可以肯定屬性名和變量名的時候，它們對應的屬性值和變量值之間的賦值關係也就肯定了。

因此在ES6的解構賦值中，大體能夠分爲兩種情形。屬性名與被賦值的變量名一致與不一致

1. 屬性名與變量名不一致

當屬性名稱與變量名稱不一致的，須要顯式的指定屬性名。這樣才能把屬性值給賦值到變量中。
例如:

let user = {name: '小明', age: 12};
let {name: userName, age: userAge} = user;
console.log(userName); // '小明'
console.log(userAge);  // 12

2. 屬性名與變量名一致

當屬性名稱與變量名稱一致的，就只須要顯示的指定變量名。

let user = {name: '小明', age: 12};
let {name, age} = user;
console.log(name);
console.log(age);

這裏的語法結構跟前面也不同，把變量名和屬性名合併在一塊兒。

固然了，上面是常見的賦值狀況，還有一些其餘條件下也是須要考慮的。

其餘關注點

1. 屬性不存在，可是依然賦給變量

當要給變量賦值的屬性不存在，會給變量提供一個默認值undefined

let user = {name: '小明', age: 12};
let { address: userAddress} = user;
console.log(userAddress);  //userAddress的就是undefined

2. 變量賦予默認值

當要給變量賦值的屬性不存在的時候，變量是可以被賦予默認值

// 屬性不存在
let user = {name: '小明', age: 12};
let {address: userAddress = '上海'} = user;
console.log(userAddress); // 因爲user中不存在address屬性，因此userAddress的值是默認值 `上海`

// 屬性存在
let user = {name: '小明', age: 12};
let {name: userName = '小天'} = user;
console.log(userName); // userName => '小明'
// 由於屬性存在，變量沒法獲取默認值

3. 同一個屬性賦給多個變量

對象中的一個屬性值是能夠同時賦予給多個變量。

let user = {name: '小明', age: 12};
let { name: userName, name: user1Name} = user; 
console.log(userName); // '小明'
console.log(user1Name); // '小明'

4. 嵌套賦值

解構賦值是能夠嵌套，並且是從對象最外層開始查找

let user = {name: '小明', age: 12, course: {name: '數學', score: 90}};
let {course} = user;
console.log(course);  // {name: "數學", score: 90}

let {course: { score }} = user
console.log(score) // 90

5. let 是否必要

前面的例子中，都是是let {xxx} = {xxx} 的形式。因而就會以爲使用解構賦值就必定須要使用let、const、var。 其實不是的。let {xxx} = {xxx} 這只是其中的一種方, 聲明完變量後就對其進行賦值。 解構賦值是對變量的賦值，只要是變量都是能夠進行賦值的。
例如:

let name;
let user = {name: '小明', age: 12};
{name} = user;
// Uncaught SyntaxError: Unexpected token =
// 程序報錯了，仍是須要使用let ?。 
// 這裏程序報的錯誤是SyntaxError(語法錯誤)，在程序預編譯的時候發生的。具體的分析暫時不討論

解決的方式很簡單，把上面的代碼塊變成一段表達式就OK

let name;
let user = {name: '小明', age: 12};
({name} = user); 
console.log(name)

總結

解構賦值是ES6提供一個十分方便的表達式。 在開始的時候，上面那麼多的規則，很難記住。因而爲了理解。我把ES6代碼轉變成下面這種方式，因而很快就明白了。

// ES6 的解構賦值
let user = {name: '小明', age: 12};
let {name: userName} = user;

// ES5 的對象賦值
let userName; (這裏能夠被賦予初始值)
let user = {name: '小明', age: 12};
if (user.name !== undefined) {   // 對象的屬性不存在
    userName =  user.name  // user.name 可以賦值給多個變量