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

1.數組的解構賦值

let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail // [2, 3, 4] let [x, y, ...z] = ['a']; x // "a" y // undefined z // []

不完全解構

let [x, y] = [1, 2, 3]; x // 1 y // 2let [a, [b], d] = [1, [2, 3], 4]; a // 1 b // 2 d // 4

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

let [x, y, z] = new Set(['a', 'b', 'c']);

ES6提供了新的數據結構Set，類似于數組，但是不是數組！而是偽數組！
我們可以通過Array.form將它轉換成數組
Setl里面沒有重復的元素！
在Set里面相當于做了精確相等運算符===
但是兩者有一個細節的地方不同，就是"==="默認NaN不等于自身
而Set進行數據處理的時候，默認NaN等于自身
Set進行判斷時，兩個對象總是不相等的

2.對象的解構賦值

對象的結構賦值和數組的解構賦值有所不同，數組是按元素順序來的，而對象必須變量和屬性同名，否則沒辦法解構

let { a, b } = { b: '我是b', a: '我是a' }; b // '我是b' a // '我是a'

在控制臺打印一下window對象來測試一下對象的解構賦值：

3.字符串的解構賦值

const [a, b, c, d, e] = 'hello'; a // "h" b // "e" c // "l" d // "l" e // "o"

4.實際的應用場景

1.交換值

let a =3 ; let b = 4; [a,b] = [b,a];console.info(a,b)//4 3

2.拿到導入模塊的指定方法

import { SourceMapConsumer, SourceNode } from "source"

3.從函數返回多個值

/ 返回一個數組function example() {return [1, 2, 3]; } let [a, b, c] = example();// 返回一個對象function example() {return {foo: 1,bar: 2}; } let { foo, bar } = example();

總結

以上是生活随笔為你收集整理的ES6中解构赋值深入解读的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。