ES6的解構賦值實例詳解

這次帶給大家的是ES6的解構賦值實例詳解，我們知道ES6是非常強大的，這篇文章就給大家好好分析一下。

基本用法

let [x, y, ...z] = ['a']
//"a", undefined, []

1.等號右邊如果不是陣列，將會報錯（不是可遍歷結構）
2.解構賦值var, let, const指令宣告皆適用
3.set結構也可解構賦值(具有Iterator介面，可採用陣列形式結構賦值)

set解構:任何型別的單一值的集合

let [x, y, z] = new Set(["a", "b", "c"])
x //"a"

預設值

1.陣列成員的值不嚴格等於undefined，預設值不生效(null的話對應值依然為null)

[x=1, y=2, z=3, o=4] = ['a', , undefined, null]
//"a", 2, 3, null、

#2.如果預設值是表達式，表達式惰性求值，只有在用到的時候才會去執行

3.預設值可以引用結構賦值的其他變量，但該變數必須已宣告

物件結構賦值

1.陣列依序排列，物件變數必須與屬性同名

var {bar, foo, baz: loc} = {foo: 'aaa', baz: 'bbb'}
bar //undefined
foo //"aaa"
loc //"bbb"
baz //ReferenceError: baz is not defined

2.變數以前宣告過，使用let賦值會報錯

3.可用於巢狀結構的物件

var node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
}
var {loc:{start:{line}}} = node
line //1
loc //ReferenceError: loc is not defined
start //ReferenceError: start is not defined

line是變數，loc,start都是模式

相信看了以上介紹你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

橫向不間斷滾動效果代碼

JS引擎運行時是什麼樣的

JS的使用過程中如何自訂console物件

#

以上是ES6的解構賦值實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！