資訊專欄INFORMATION COLUMN
摘要：解構(gòu)是很重要的一個部分。解構(gòu)代碼如下上面的代碼表示聲明兩個變量然后。實際業(yè)務(wù)中長方形的是不能沒有值的。都算正常值的范疇。解構(gòu)進階解構(gòu)時同時使用重命名和設(shè)置默認值的語法。若有，若沒有屬性，那么將賦值為。
Destructuring解構(gòu)是ES6很重要的一個部分。和箭頭函數(shù)、let、const 同等地位，解構(gòu)可能是你日常用到最多的語法之一了。解構(gòu)是什么意思呢？它是js 表達式，允許我們從數(shù)組、對象、map、set 中抽取數(shù)據(jù)同時為多個變量賦值。
解構(gòu)入門首先讓我們初步了解下解構(gòu)解決哪些問題。你可能從后臺得到 person 的數(shù)據(jù)如下：
const person = {
first: "xi",
last: "xi",
country: "china",
city: "beijing"
};
// 需要多帶帶獲得 first和 last 的值
const first = person.first;
const last = person.last;
想從 person 對象中獲取到數(shù)據(jù)不得不寫大量重復(fù)的代碼。此時解構(gòu)的價值就體現(xiàn)出來了。解構(gòu)代碼如下：
const { first, last } = person;
上面的代碼表示聲明兩個變量 first last,然后 first = person.first, last = person.last。如果你還行獲取 person的 city,只需進行如下操作：
const { first, last, city } = person;
以上： 解構(gòu)可以減少重復(fù)的代碼
解構(gòu)之重命名有時后臺返回的命名比較狗血，你不喜歡或者變量名在該作用域中已經(jīng)被占用了。例如：
const country = "USA";
const person = {
first: "xi",
last: "xi",
country: "china",
city: "beijing"
};
const {first, last, country?} = person;
此時你仍想獲取 person 中的 coutry 數(shù)據(jù)怎么辦呢？為此解構(gòu)重命名功能就閃亮登場。
// personCountry is whart you needs
const {first, last, country: personCountry} = person;
解構(gòu)之設(shè)置默認值
ES6為我們提供了設(shè)置默認值的語法。解構(gòu)也一樣。下面大家思考一下，在對一個 object 進行解構(gòu)時，若對應(yīng)的對象屬性不存在那會怎樣呢？
const rect = {
width: 150
}
const { height, width } = rect;
console.log(height);//undefined
運行代碼我們看到 height === undefined。實際業(yè)務(wù)中長方形的 height 是不能沒有值的。為了增強程序的健壯性，我們經(jīng)常會給 height 一個默認值。height || 150。下面介紹解構(gòu)設(shè)置默認值的語法
const rect = {
width: 150
}
const { height = 150, width = 300 } = rect;
console.log(height, width);//150, 150
?在解構(gòu)設(shè)置默認值的語法中， 我們要特別注意只有當 value 的值嚴格等于 undefined 時，默認值才會生效。null, false, 0都算正常值的范疇。
解構(gòu)進階解構(gòu)時同時使用重命名和設(shè)置默認值的語法。直接上代碼：
const person = { first: "xi", last: "yuanyuan" };
const { middle: middleName = "xixi" } = person;
console.log(middleName); // "xixi"
若可以理解上面的代碼，那你的 es6水平已經(jīng)很好了。下面對上述語句做簡單說明：
首先我們聲明了一個變量middleName
其次我們查詢 person的 middle 屬性，看其是否有值。若有，middleName = person.middle
若 person 沒有 middle 屬性， 那么將middleName賦值為"xixi"。
refsJavaScript’s Destructuring
歡迎訪問個人博客 ?xixi小站?
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88695.html
摘要：被解構(gòu)的數(shù)據(jù)項位于賦值運算符的右側(cè)，可以是任何數(shù)組和對象的組合，允許隨意嵌套。數(shù)組模式位于賦值運算符的左側(cè)，被結(jié)構(gòu)的數(shù)組在其右側(cè)。 解構(gòu)是ES6的新特性，用于從JavaScript對象和數(shù)組中提取數(shù)據(jù)，語法上比ES5所提供的更加簡潔、緊湊、清晰。它不僅能減少你的代碼量，還能從根本上改變你的編碼方式。用的越多，你就會發(fā)現(xiàn)越多塑造數(shù)據(jù)和函數(shù)的方式，這些實現(xiàn)方式在過去幾乎是不可能的。本文將深...
摘要：一概念對象是屬性的集合，從對象里取值，只能逐個取，而解構(gòu)賦值表達式可以實現(xiàn)批量取值，賦值。賦值操作符等號兩邊的解構(gòu)要一致才能正確賦值解構(gòu)賦值表達式是賦值表達式的語法糖。三數(shù)組解構(gòu)賦值數(shù)組的屬性名稱叫索引，表示的是位置。 一、概念 對象是屬性的集合，從對象里取值，ES3/5只能逐個取，而解構(gòu)賦值表達式可以實現(xiàn)批量取值，賦值。 // 數(shù)據(jù)對象person var person = { ...
摘要：的新特性哪些適合使用我們參考使用進行開發(fā)的思考文章推薦的新特性，僅使用三星的。另外推薦閱讀探秘系列的新特性是否通過轉(zhuǎn)換后還有兼容問題團隊中又同學正在驗證，我們驗證的環(huán)境是，我們最終會使用三星特性加上兼容性的。 showImg(https://segmentfault.com/img/bVrjev); 最近項目中的一個模塊正式引入的ES6，由于是引入新技術(shù)，也遇到了一些問題，下面分享下整...
一直以來，我對ES6都不甚感興趣，一是因為在生產(chǎn)環(huán)境中使用ES5已是處處碰壁，其次則是只當這ES6是語法糖不曾重視。只是最近學習react生態(tài)，用起babel來轉(zhuǎn)換jsx之余，也不免碰到諸多用上ES6的教程、案例，因此便稍作學習。這一學習，便覺得這語法糖實在是甜，忍不住嘗鮮，于是記錄部分自覺對自己有用的方法在此。 箭頭函數(shù)(Arrow Functions) 箭頭函數(shù)是一個典型的語法糖，即創(chuàng)造了一種...
閱讀 808·2021-11-24 09:38
閱讀 1010·2021-11-11 11:01
閱讀 3255·2021-10-19 13:22
閱讀 1542·2021-09-22 15:23
閱讀 2844·2021-09-08 09:35
閱讀 2780·2019-08-29 11:31
閱讀 2134·2019-08-26 11:47
閱讀 1578·2019-08-26 11:44
