ES6入門之變量的解構賦值

gityuan 發布于2019-08-23 16:51 / 3466人閱讀

摘要：數組的解構賦值基本用法允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為結構。如下以上都會報錯但是如果左邊為數組，右邊為字符串，將會取字符串的第一個下標的值對于結構，同樣可以使用數組的解構賦值。

數組的解構賦值 基本用法

ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為結構。

在ES6之前想要為變量賦值，只能指定其值，如下：

let a = 1;
let b = 2

而在ES6中可以寫成這樣，如下：

let [a,b] = [1,2]
// a = 1, b = 2

值得注意的是，等式兩邊的值要對等，這樣左邊的變量才會被賦上右邊對應的值，如果不對等左邊的值將會出現undefined，如下寫法：

let [foo,[[bar],baz]] = [1,[[2],3]]
foo // 1
bar // 2
baz // 3

注意：只有左右兩邊的 格式一定要對等，數量可以不對等。

let [a,b,c] = [1,2]
a = 1, b = 2, c = undefined

let [a,,c] = [1,2,3]
a = 1, c = 3

let [a, ...b] = [1,2,3]
a = 1, b = [2,3]

let [a] = []
let [b,a] = [1]
a = undefined

還有一種情況，等號左邊為數組，但是等號右邊為其他值，將會報錯。如下：

let [a] = 1;
let [a] = false;
let [a] = NaN;
let [a] = undefined;
let [a] = null;
let [a] = {};

以上都會報錯

但是如果左邊為數組，右邊為字符串，將會取字符串的第一個下標的值

let [a] = "121321"  a = "1"
let [a] = "adgasg"  a = "a"

對于Set結構，同樣可以使用數組的解構賦值。

let [x,y,z] = new Set([1,2,3])
x = 1, y = 2, z = 3

默認值

解構賦值允許指定默認值

let [a = 3] = []        // a:3
let [a = 3,b] = [,4]    // a:3 b:4
let [a = 3,b] = [5,4]   // a:5 b:4

特殊

let [a = 3] = [undefined]   // a:3
let [a = 3] = [null]        // a:null

Tips: 在es6中使用嚴格相等運算符，在結構賦值中如果需要默認值生效，則應對等的值為undefined的時候才會采用默認值，否則還是使用賦值。上面中null 不嚴格等于undefined++

如果默認值的賦值為一個表達式，只有當等號右邊的賦值沒有值為undefined的時候，才會取表達式中的值，如下：

function demo(){
    console.log("demo")
}

let [a = demo()] = []   // a: demo
let [a = demo()] = [1]  // a : 1

對象的解構賦值

與數組的不同點是，數組的元素必須和賦值的元素要位置一致才能正確的賦值，而對象的解構賦值則是等號兩邊的變量和屬性同名即可取到正確的值。否則值為 undefined

let {a,b} = {a:"23",b:"3"}
let {a,b} = {b:"3",a:"23"}

// 上面兩個的值 都是 a: 23 b: 3

let {a,b} = {a:"3",c:"d"}
//a: 3 b: undefined

對象的解構賦值還有將某一個現有對象的方法賦值到一個新的變量，如下：

let {sin,cos} = Math
// Math 中的sin cos 方法將賦值給變量 sin cos

let {log} = console
// log(2)  ===  console.log(2)

如果等號左邊的變量名不能和等號右邊的對象的屬性名一致，則必須寫成如下格式：

let {a:b} = {a:"ss"}     // b：ss
//a是屬性名，b才是實際賦值的變量名

對象的解構賦值一樣是可以嵌套解構的，如下：

第一種：

let obj = {
    p:[
        "Hello",
        {y:"world"}
    ]
}

let {p:[x,{y}]} = obj 
// x: Hello, y: world

這邊的p只是屬性不是變量，如果p想賦值可以寫成：

let {p,:[x,{y}]} = obj

第二種：
const a = {
    loc: {
        t :1,
        b :{
            c:1,
            d:2    
        }
    }
}
let {loc:{t,b:{c,d}}} = a
或者
let {loc,loc:{t,b,b:{c,d}}} = a

嵌套賦值

let o = {}, arr = []

({foo:o.prop,bar: arr[0]} = {foo:123,bar:true})
//o: 123, arr = [true]

如果解構模式是嵌套的對象，如果子對象所在的父屬性不存在，則會報錯，如下：

let {foo:{bar}} = {baz:"baz"} //報錯

默認值

let {x = 3} = {}
// x: 3

let {x,y = 5} = {x : 1}
// x: 1, y: 5

let {x: y = 5} = {}
// y = 5

let {x: y = 5} = {x : 4}
// y = 4

let {x: y = "hhhh"} = {}
//y = "hhhh"

Tips:以上左邊 x為屬性名，y為變量


let {x = 5} = {x: undefined}
// x: 5

let {x = 4} = {x: null}
// x: null

同數組一樣遵循 嚴格等于 
只有右邊為undefined的時候默認值才會生效

注意點：

1）不能將已聲明的變量用于解構賦值，因為已經是一個代碼塊。

字符串的解構賦值

如果賦值的對象是數組，字符串將被分割為數組的格式，一一對應賦值

let [a,b] = "ha"
// a = h , b = a

同時可以獲得字符串的長度：

let {length:len} = "12121"
// len = 5

數值和布爾值的解構賦值

如果等號右邊是數字或者布爾值 則轉換成對象或者說，除了是數組和對象，其他值都將轉換成對象，null 和 undefined 除外。如下：

let {t:s} = 123
let {t: s} = true

函數參數的解構賦值

function add([x,y]){
    return x+y
}
add([3,5]) // 8

[[3,5],[6,7]].map(([a,b]) => a + b)
//8 , 13

function m({x=3, y=4} = {}){
    return [x,y]
}
m({x:33,y:8})     // [33,8]
m({x:32})         // [32,4]
m({})             // [3,4]
m()               // [3,4]

function m({x,y} = {x=0,y=0}){
    return [x,y]
}
m({x:33,y:8})     // [33,8]
// 代替右邊的 x:0, y:0 所以是傳值 33  8

m({x:32})         // [32,undefined]
//因為傳值替代右邊的賦值，但是只有x沒有y
//所以y是取   左邊y的默認值，因為你沒有賦值 為undefined

m({})             // [undefined,undefined] 
// 取左邊x,y的默認值，因為沒有賦值 為undefined

m()               // [0,0]
// 沒有傳值，使用本身的賦值 都是0

其他 不能使用圓括號的情況

變量聲明語句

函數參數

賦值語句的模式

可以使用圓括號的情況

賦值語句的非模式部分，可以使用圓括號

解構賦值的用途

交換變量的值

從函數返回多個值

函數參數的定義

提取JOSN數據

函數參數的默認值

遍歷Map結構

輸入模塊的指定方法

歡迎關注 公眾號【小夭同學】

ES6入門系列

ES6入門之let、cont

GPU云服務器云服務器解構賦值 php的變量賦值 php 賦值類的變量 ES6入門

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

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

帶你入門 JavaScript ES6 (一)

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

lindroid 2019-08-21 18:24 評論0 收藏0
JavaScript基礎之ES6對象解構賦值

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

sutaking 2019-08-22 15:31 評論0 收藏0
ES6入門之函數的擴展

摘要：如果所有函數都是尾調用，那么完全可以做到每次執行時，調用幀只有一項，這將大大節省內存。等同于等同于注意，只有不再用到外層函數的內部變量，內層函數的調用幀才會取代外層函數的調用幀，否則就無法進行尾調用優化。 showImg(https://segmentfault.com/img/bVbrTHp?w=1080&h=1920); 1. 函數參數的默認值 1.1 用法在ES6之前是不能為...

dackel 2019-08-02 16:15 評論0 收藏0
ES6入門之函數的擴展

摘要：如果所有函數都是尾調用，那么完全可以做到每次執行時，調用幀只有一項，這將大大節省內存。等同于等同于注意，只有不再用到外層函數的內部變量，內層函數的調用幀才會取代外層函數的調用幀，否則就無法進行尾調用優化。 showImg(https://segmentfault.com/img/bVbrTHp?w=1080&h=1920); 1. 函數參數的默認值 1.1 用法在ES6之前是不能為...

graf 2019-08-23 17:10 評論0 收藏0
新手快速學習ES6語法,用最快的速度入門ES6就看這里

摘要：的作用域與命令相同只在聲明所在的塊級作用域內有效。數值和布爾值的解構賦值解構賦值時，如果等號右邊是數值和布爾值，則會先轉為對象。上面代碼中，數值和布爾值的包裝對象都有屬性，因此變量都能取到值。默認值解構賦值允許指定默認值。最近正在學習ES6,對于ES6的語法有一些自己的理解, 想寫這篇文章幫助跟我一樣的新手快速入門ES6而不至于連代碼都看不懂. 至于開發環境的搭建什么...

vspiders 2019-08-20 16:50 評論0 收藏0