成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript基礎(chǔ)之ES6對(duì)象解構(gòu)賦值

sutaking / 1627人閱讀

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

對(duì)象解構(gòu)賦值

ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)(Destructuring)。
--- 阮一峰《ECMAScript 6 入門》

具體的對(duì)象解構(gòu)賦值的規(guī)則可以參考 對(duì)象的解構(gòu)賦值, 說的很詳細(xì)。

作為一個(gè)前端程序員，對(duì)于ES6這個(gè)新的語法表達(dá)式，肯定是需要熟練使用的，下面是我個(gè)人的一些理解。給大家分享一下。

在ES6沒有出現(xiàn)以前，我們是這樣把對(duì)象中的值賦給變量的。

// 第一版
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這個(gè)對(duì)象被多次調(diào)用，不好...... 于是ES6來了。被修改為下面這樣?

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

暫時(shí)沒有人說不好了。

當(dāng)我們想把對(duì)象中的屬性值賦給變量的時(shí)候。一般需要考慮兩個(gè)因素。分別是屬性值、變量。而屬性是通過屬性名決定的，變量是通過變量名決定的。所以，最后決定因素就是屬性名，變量名。當(dāng)我們能夠確定屬性名和變量名的時(shí)候，它們對(duì)應(yīng)的屬性值和變量值之間的賦值關(guān)系也就確定了。

所以在ES6的解構(gòu)賦值中，大致可以分為兩種情形。屬性名與被賦值的變量名一致與不一致

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

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

let user = {name: "小明", age: 12};
let {name: userName, age: userAge} = user;
console.log(userName); // "小明"
console.log(userAge);  // 12
2. 屬性名與變量名一致

當(dāng)屬性名稱與變量名稱一致的，就只需要顯示的指定變量名。

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

這里的語法結(jié)構(gòu)跟前面也不一樣，把變量名和屬性名合并在一起。

當(dāng)然了，上面是常見的賦值情況，還有一些其他條件下也是需要考慮的。

其他關(guān)注點(diǎn)
1. 屬性不存在，但是依然賦給變量

當(dāng)要給變量賦值的屬性不存在，會(huì)給變量提供一個(gè)默認(rèn)值undefined

let user = {name: "小明", age: 12};
let { address: userAddress} = user;
console.log(userAddress);  //userAddress的就是undefined
2. 變量賦予默認(rèn)值

當(dāng)要給變量賦值的屬性不存在的時(shí)候，變量是能夠被賦予默認(rèn)值

// 屬性不存在
let user = {name: "小明", age: 12};
let {address: userAddress = "上海"} = user;
console.log(userAddress); // 由于user中不存在address屬性，所以u(píng)serAddress的值是默認(rèn)值 `上海`

// 屬性存在
let user = {name: "小明", age: 12};
let {name: userName = "小天"} = user;
console.log(userName); // userName => "小明"
// 因?yàn)閷傩源嬖?，變量無法獲取默認(rèn)值
3. 同一個(gè)屬性賦給多個(gè)變量

對(duì)象中的一個(gè)屬性值是可以同時(shí)賦予給多個(gè)變量。

let user = {name: "小明", age: 12};
let { name: userName, name: user1Name} = user; 
console.log(userName); // "小明"
console.log(user1Name); // "小明"
4. 嵌套賦值

解構(gòu)賦值是可以嵌套，而且是從對(duì)象最外層開始查找

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

let {course: { score }} = user
console.log(score) // 90
5. let 是否必要

前面的例子中，都是是let {xxx} = {xxx} 的形式。于是就會(huì)覺得使用解構(gòu)賦值就一定需要使用let、const、var。 其實(shí)不是的。let {xxx} = {xxx} 這只是其中的一種方, 聲明完變量后就對(duì)其進(jìn)行賦值。 解構(gòu)賦值是對(duì)變量的賦值，只要是變量都是可以進(jìn)行賦值的。
例如:

let name;
let user = {name: "小明", age: 12};
{name} = user;
// Uncaught SyntaxError: Unexpected token =
// 程序報(bào)錯(cuò)了，還是需要使用let ?。 
// 這里程序報(bào)的錯(cuò)誤是SyntaxError(語法錯(cuò)誤)，在程序預(yù)編譯的時(shí)候發(fā)生的。具體的分析暫時(shí)不討論

解決的方式很簡(jiǎn)單，把上面的代碼塊變成一段表達(dá)式就OK

let name;
let user = {name: "小明", age: 12};
({name} = user); 
console.log(name)
總結(jié)

解構(gòu)賦值是ES6提供一個(gè)十分方便的表達(dá)式。 在開始的時(shí)候，上面那么多的規(guī)則，很難記住。于是為了理解。我把ES6代碼轉(zhuǎn)變成下面這種方式，于是很快就明白了。

// ES6 的解構(gòu)賦值
let user = {name: "小明", age: 12};
let {name: userName} = user;

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93504.html

相關(guān)文章

  • ES6學(xué)習(xí)手稿之基本類型擴(kuò)展

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

    tommego 評(píng)論0 收藏0

  • ES6學(xué)習(xí)（二）之解構(gòu)賦值及其原理

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

    chunquedong 評(píng)論0 收藏0

  • ES6之解構(gòu)賦值

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

    Simon 評(píng)論0 收藏0

  • 帶你入門 JavaScript ES6 (一)

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

    lindroid 評(píng)論0 收藏0

  • javascript基礎(chǔ)之模塊

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

    keithyau 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<