ES6解構賦值學習總結

levinit 發布于2019-08-23 13:59 / 1317人閱讀

摘要：提供了解構賦值的方式，這樣子在賦值多個變量或者進行注釋時可以方便很多，不同場景下也有很多新的應用，個人常使用的有數組的解構賦值，對象的解構賦值和函數參數的解構賦值，函數參數的解構賦值之前總結過，這里寫下數組的和對象的簡單總結吧函數參數的解構

ES6提供了解構賦值的方式，這樣子在賦值多個變量或者進行注釋時可以方便很多，不同場景下也有很多新的應用，個人常使用的有數組的解構賦值，對象的解構賦值和函數參數的解構賦值，函數參數的解構賦值之前總結過，這里寫下數組的和對象的簡單總結吧
函數參數的解構賦值總結點擊這里

一、數組的解構賦值

先來個最簡單的

let [a, b] = [1, 2];
a;//輸出1
b;//輸出2

這種模式就容易為多個變量賦值，因為等號右邊是數組，所以有需要獲取數組元素時，如下使用更為方便

let array = [1,2,3];
let [a, b, c] = array;
a;//輸出1
b;//輸出2
c;//輸出3

當然，數組中的元素是不限類型的

let [a, array, c] = [1, [2,3], 4];
a;//輸出1
array;//輸出[2,3]
c;//輸出4

另外，可將剩余元素賦值給一個變量

let [a, ...b] = [1,2,3,4];
a;//輸出1
b;//輸出[2, 3, 4]

其實只要等號右邊具有Iterator接口均可使用解構賦值

二、對象的解構賦值

先給個最簡單的例子

let {name, sex} = {name:"Jonithan", sex:"male"}
name;//"Jonithan"
sex;//"male"

這里的賦值是變量名對應屬性名賦值，如果變量名與屬性名沒有對應上的話，則會賦值失敗，如下所示

let {name, gender} = {name:"Jonithan", sex:"male"}
name;//"Jonithan"
gender;//undefined，因為沒有對應屬性名

其實以上寫法只是如下寫法的簡寫

let {name:name, sex:sex} = {name:"Jonithan", sex:"male"}
name;//"Jonithan"
sex;//"male"

所以其實是把對應的屬性名提取出來給一個變量，所以可以這樣使用

let {name:username, sex:gender} = {name:"Jonithan", sex:"male"}
username;//"Jonithan"
gender;//"male"

以上僅列出了較為簡單的情況，更多具體情況查詢MDN吧，或者翻看阮老師的《ES6標準入門》

云服務器 GPU云服務器解構賦值機器學習學習總結機器學習總結 javascript學習總結

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

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

ES6學習總結（1）

摘要：返回一個對象，遍歷對象自身和繼承的所有可枚舉屬性不含，與相同和在紅寶書中就已經提到過屬性，表示的是引用類型實例的一個內部指針，指向該實例的構造函數的原型對象。半個月前就決定要將ES6的學習總結一遍，結果拖延癥一犯，半個月就過去了，現在補起來，慚愧慚愧。阮一峰的《ES6標準入門》這本書有300頁左右，除了幾個新的API和js語法的擴展,真正有價值的內容并不多。所謂存在即合理，每部分的...

happyfish 2019-08-20 15:38 評論0 收藏0
ES6 學習筆記（一）let，const和解構賦值

摘要：另外對于已經聲明的變量進行解構賦值時，要非常小心。因此在行首加，將其強制轉化為表達式執行。由于和無法轉為對象，所以對它們進行解構賦值，都會報錯。 let和const let和const是es6新增的兩個變量聲明關鍵字，與var的不同點在于：（1）let和const都是塊級作用域，在{}內有效，這點在for循環中非常有用，只在循環體內有效。var為函數作用域。（2）使用let和con...

iOS122 2019-08-23 15:29 評論0 收藏0
《ES6學習2》變量的解構賦值

摘要：解構賦值的分類數組解構賦值對象解構賦值字符串解構賦值數值解構賦值布爾值解構賦值函數參數解構賦值。嵌套情況默認值解構賦值允許設置默認值，當數組成員嚴格等于，默認值將生效。報錯報錯函數參數的解構賦值函數的參數也可以使用解構賦值和指定默認值 ES6可以從數組和對象中提取值，然后對變量進行賦值。解構賦值的分類：數組解構賦值、對象解構賦值、字符串解構賦值、數值解構賦值、布爾值解構賦值、函數參...

mist14 2019-08-26 13:52 評論0 收藏0
ES6系統學習----從Apollo Client看解構賦值

摘要：第四類布爾值和數值的解構賦值這類解構賦值目前為止我并未在實際開發中遇到，以后遇到會結合實際情況進行說明。解構賦值時，如果等號的郵編時數值或者是布爾值，那么他就會先轉換成對象，再進行解構賦值。一：背景在前一篇關于Apollo Client 的博客中已經說明了Apollo Client 是一個強大的JavaScript GraphQL 客戶端。既然是一個JavaScript的客戶端，他...

Miyang 2019-08-23 15:12 評論0 收藏0
ES6學習第二章變量的解構賦值

摘要：前言前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接變量的解構賦值解構賦值解構賦值允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。對象的解構賦值是根據對象值進行匹配。前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接：變量的解構賦值解構賦值ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。解構賦值是對賦值運...

番茄西紅柿 2021-11-24 09:38 評論0 收藏2637