1. 程式人生 > >【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都是模式

4.物件結構可以指定預設值
(生效條件是物件屬性值嚴格等於undefined,null不會生效,解構失敗值為undefined)
5.解構模式是巢狀物件,且子物件父屬性不存在,報錯
6.已宣告的變數解構賦值

    var x;
    {x}={x:1} //SyntaxError: Unexpected token =
    ({x}={x:1}) //正確
js會將{x}理解成程式碼塊,不將大括號寫在行首即可

7.可以將現有物件的方法賦值到某個變數
let { sin, cos, log } = Math(Math物件的名為sin的方法直接賦值給sin變數)

字串解構賦值

const [a,b] = 'hello' a//h
let {length:len} = 'hello' len//5(字串本身包含length屬性)

數值&布林值

解構賦值規則:

  • 只要等號右邊不是物件先將其轉化為物件,
  • undefined和null無法轉換為物件,報錯
let a = true
{b} = {a}
//Object {a: true}

函式引數解構

[[1,2],[3,4]].map((a,b)=>a+b) //[3,7]
function({x=0,y=0}={}){
    return [x,y]
}

undefined會觸發函式引數預設值

圓括號問題

1.變數宣告語句中,模式不能帶有圓括號 let {x:(c)} = {}
2.函式引數中,模式不能帶有圓括號(函式引數也屬於變數宣告)
3.整個模式或巢狀模式中的一層,不可放入圓括號

賦值語句的非模式部分可使用

用途

1.[x, y] = [y, x]
2.函式返回的多個值分別賦值
3.函式引數與變數名對應
4.提取json資料(ajax請求返回資料處理中可用到)

    ({
        needServicePwd: this.needServicePwd,
        needImgCode: this.needImgCode,
        needSmsCode: this.needSmsCode
    } = data)

5.函式引數的預設值,避免在函式內寫var foo = config.foo || ”
6.遍歷Map結構

    var map = new Map();
    map.set('first', 'hello');
    map.set('second', 'world');

    for (let [key, value] of map) {
      console.log(key + " is " + value);
    }

7.引用模組的指定方法

    const { SourceMapConsumer, SourceNode } = require("source-map");