JavaScript基礎之ES6對象解構賦值

sutaking 發布于2019-08-22 15:31 / 1619人閱讀

摘要：具體的分析暫時不討論解決的方式很簡單，把上面的代碼塊變成一段表達式就小明總結解構賦值是提供一個十分方便的表達式。的解構賦值小明的對象賦值這里可以被賦予初始值小明對象的屬性不存在能夠賦值給多個變量

對象解構賦值

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 能夠賦值給多個變量

GPU云服務器云服務器解構賦值對象解構之基礎篇匿名對象賦值

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93504.html

ES6學習手稿之基本類型擴展

摘要：它是一個通用標準，奠定了的基本語法。年月發布了的第一個版本，正式名稱就是標準簡稱。結語的基本擴展還有一些沒有在這里詳細介紹。前言 ES6標準以及頒布兩年了，但是，好像還沒有完全走進我們的日常開發。這篇文章從ES6的基本類型擴展入手，逐步展開對ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創造的，該公司1996年11月將JavaSc...

tommego 2019-08-21 18:25 評論0 收藏0
ES6學習（二）之解構賦值及其原理

摘要：基本原理解構是提供的語法糖，其實內在是針對可迭代對象的接口，通過遍歷器按順序獲取對應的值進行賦值。屬性值返回一個對象的無參函數，被返回對象符合迭代器協議。迭代器協議定義了標準的方式來產生一個有限或無限序列值。更多系列文章請看 1、基本語法 1.1、數組 // 基礎類型解構 let [a, b, c] = [1, 2, 3] console.log(a, b, c) // 1, 2, ...

chunquedong 2019-08-23 16:19 評論0 收藏0
ES6之解構賦值

摘要：解構賦值允許指定默認值內部使用嚴格相等運算符，判斷一個位置是否有值。默認值可以引用解構賦值的其他變量，但該變量必須已經聲明。注意，對象的解構賦值可以取到繼承的屬性。解構賦值使得輸入語句非常清晰。數組解構只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值。 let [a, b, c] = [1, 2, 3]; 如果解構不成功，變量的值就等于 undefined。 let [foo,...

Simon 2019-08-26 10:40 評論0 收藏0
帶你入門 JavaScript ES6 (一)

摘要：是國際組織于年月日發布的第六版，正式名為通常被成為或。二模版字面量提供一種簡單實現表達式嵌套的字符串字面量操作，簡而言之就是能夠以簡單的方法實現字符串拼接操作。本文同步帶你入門 JavaScript ES6 (一)，轉載請注明出處。 ES6: 是 ECMA國際組織于 2015 年 6 月 17 日發布的 ECMAScript 第六版，正式名為 ECMAScript 2015,通常被...

lindroid 2019-08-21 18:24 評論0 收藏0
javascript基礎之模塊

摘要：兩者對比就像下面這樣通過對象把函數向外開放而使用的模塊就像下面通過導出方法當然了，的模塊肯定是比匿名函數自執行更加高級的一種封裝了。相比于匿名函數，模塊具有下面幾種特點。什么是ES6模塊? 在ES6中，每個文件就是一個模塊，有自己的作用域。在一個文件里面定義的變量、函數、類，都是私有的，對其他文件不可見。在看到這里的時候感覺很熟悉，這不就是匿名函數自執行，然后一個個匿名函數放在一個個...

keithyau 2019-08-22 15:43 評論0 收藏0