ES6中變數的解構賦值的用法介紹（附程式碼）

這篇文章帶給大家的內容是關於ES6中變數的解構賦值的用法介紹（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

陣列的解構賦值

基本用法

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

其他

不能使用圓括號的情況

1. 變數宣告語句
2. 函數參數
3. 賦值語句的模式

可以使用圓括號的情況

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

解構賦值的用途

1. 交換變數的值
2. 從函數傳回多個值
3. 函數參數的定義
4. 提取JOSN資料
5. 函數參數的預設值
6. #遍歷Map結構
7. 輸入模組的指定方法

以上是ES6中變數的解構賦值的用法介紹（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！