es6基礎0x008：解構賦值

xiaoxiaozi 發布于2019-08-23 13:07 / 1465人閱讀

摘要：概述實不相瞞，解構賦值非常叼，特別是和其他一起使用的時候，那如何簡單的說解構賦值呢，打個比方解構賦值就是一個硬幣拆分機，將所有的一毛五毛一塊硬幣投入硬幣拆分機，他就自動將所有的硬幣分好了，拿出你要的就行了解構數組可以從一個數組從取出你想要的

0x000 概述

實不相瞞，解構賦值非常叼，特別是和其他es6一起使用的時候，那如何簡單的說解構賦值呢，打個比方：解構賦值就是一個硬幣拆分機，將所有的一毛、五毛、一塊硬幣投入硬幣拆分機，他就自動將所有的硬幣分好了，拿出你要的就行了！

0x001 解構數組

可以從一個數組從取出你想要的一個數據或者一組數據

普通

let [a, b, c]=[1,2,3]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

和剩余參數一起用

let [a, b, ...c]=[1,2,3,4,5]
console.log(a) // 1
console.log(b) // 2
console.log(c) // [3,4,5]

省略一些參數

let [a, , ...c]=[1,2,3,4,5]
console.log(a) // 1
console.log(c) // [3,4,5]

參數不夠

let [a, b, c]=[1,2]
console.log(a) // 1
console.log(b) // 2
console.log(c) // undefined

參數不夠又不想要undefined，可以使用默認參數

let [a, b, c=3]=[1,2]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

對已有變量解構賦值

let a, b
[a, b]=[1,2]
console.log(a, b)// 1,2

0x002 有趣的數組解構栗子

交換兩個變量

let a=1,b=2
[a, b]=[b, a]
console.log(a) // 2
console.log(b) // 1

獲取一個正則匹配的結果

let [,match]="hello world".match(/h(e)/) 
// 匹配的結果是 ["he", "e", index: 0, input: "hello world", groups: undefined]

console.log(match) // "e"

0x003 解構對象

可以從對象中取出對象的一個屬性值，或者一個子對象

普通

let {a, b}={a:1,b:2}
console.log(a) // 1
console.log(b) // 2

剩余屬性

let {a,...b}={a:1,b:2,c:3}
console.log(a) // 1
console.log(b) // {b:2,c:3}

屬性不夠

let {a, b, c}={a:1,b:2}
console.log(a) // 1
console.log(b) // 2
console.log(c) // undefined

屬性不夠可以使用默認參數

let {a, b, c=3}={a:1,b:2}
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

給新的變量賦值

let {a:aa, b:bb}={a:1,b:2}
console.log(aa) // 1
console.log(bb) // 2

給新的變量賦值并提供默認值

let {a:aa, b:bb, c:cc=3}={a:1,b:2}
console.log(aa) // 1
console.log(bb) // 2
console.log(cc) // 3

很深的對象也可以解構

let {name, books:[book]}={name:"haha",books:["book1"]}
console.log(name) // "haha"
console.log(book) // "book1"

迭代中的解構

for(let {name} of [{name:1},{name:2}]){
    console.log(name) // 1 2
}

解構函數形參

let register({name, pwd}){
    console.log(name, pwd)
}
register({name:"1",pwd:"2"}) //1,2

給已有變量賦值，比較特殊

let a,b
({a, b}={a:1,b:2}) // 需要提升優先級，否則 {a, b} 會被解析成代碼塊
console.log(a, b)// 1, 2

云服務器 GPU云服務器解構賦值對象解構解構函數 ES6

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

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

JavaScript基礎之ES6對象解構賦值

摘要：具體的分析暫時不討論解決的方式很簡單，把上面的代碼塊變成一段表達式就小明總結解構賦值是提供一個十分方便的表達式。的解構賦值小明的對象賦值這里可以被賦予初始值小明對象的屬性不存在能夠賦值給多個變量對象解構賦值 ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構(Destructuring)。 --- 阮一峰《ECMAScript...

sutaking 2019-08-22 15:31 評論0 收藏0
ES6基礎知識01(let,const,解構賦值)

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。解構賦值允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。對象的解構賦值對象的屬性沒有次序，變量必須與屬性同名。 ES6 新增特性整理講解新增命令 1.let命令 ES6新增了let命令，用來聲明變量。它的用法類似于var，但是也存在新的特性。 - **let所聲明的變量，只在le...

MSchumi 2019-08-22 17:36 評論0 收藏0
ES6基礎知識01(let,const,解構賦值)

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。解構賦值允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。對象的解構賦值對象的屬性沒有次序，變量必須與屬性同名。 ES6 新增特性整理講解新增命令 1.let命令 ES6新增了let命令，用來聲明變量。它的用法類似于var，但是也存在新的特性。 - **let所聲明的變量，只在le...

Gilbertat 2019-08-02 10:34 評論0 收藏0
ES6基礎

一、塊級作用域 1. var 首先看看ES5中得變量聲明方式 if (true) { var a = 2 } console.log(a) // 2 以上代碼等同于 var a if (true) { a = 2 } console.log(a) 以上可知：在塊內部定義變量變量提升，到函數最頂部通過var聲明的變量，無論在何處聲明，均為全局作用域 2.let 和 ...

BigTomato 2019-08-23 16:57 評論0 收藏0