ES6解構(gòu)賦值實(shí)例詳解

本文實(shí)例講述了ES6解構(gòu)賦值。分享給大家供大家參考，具體如下：

基本用法

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

1.等號(hào)右邊如果不是數(shù)組，將會(huì)報(bào)錯(cuò)（不是可遍歷結(jié)構(gòu)）
2.解構(gòu)賦值 var, let, const命令聲明均適用
3.set結(jié)構(gòu)也可解構(gòu)賦值(具有Iterator接口，可采用數(shù)組形式結(jié)構(gòu)賦值)

set解構(gòu):任何類型的單個(gè)值的集合

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

默認(rèn)值

1.數(shù)組成員的值不嚴(yán)格等于undefined，默認(rèn)值不生效(null的話相應(yīng)值依然為null)

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

2.如果默認(rèn)值是表達(dá)式，表達(dá)式惰性求值，只有在用到的時(shí)候才會(huì)去執(zhí)行

3.默認(rèn)值可以引用結(jié)構(gòu)賦值的其他變量，但該變量必須已聲明

對(duì)象結(jié)構(gòu)賦值

1.數(shù)組按次序排列，對(duì)象變量必須與屬性同名

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

2.變量以前聲明過，使用let賦值會(huì)報(bào)錯(cuò)

3.可用于嵌套結(jié)構(gòu)的對(duì)象

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.對(duì)象結(jié)構(gòu)可以指定默認(rèn)值

(生效條件是對(duì)象屬性值嚴(yán)格等于undefined，null不會(huì)生效，解構(gòu)失敗值為undefined)

5.解構(gòu)模式是嵌套對(duì)象，且子對(duì)象父屬性不存在，報(bào)錯(cuò)

6.已聲明的變量解構(gòu)賦值

var x;
{x}={x:1} //SyntaxError: Unexpected token =
({x}={x:1}) //正確

js會(huì)將{x}理解成代碼塊，不將大括號(hào)寫在行首即可

7.可以將現(xiàn)有對(duì)象的方法賦值到某個(gè)變量

let { sin, cos, log } = Math(Math對(duì)象的名為sin的方法直接賦值給sin變量)

字符串解構(gòu)賦值

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

數(shù)值&布爾值

解構(gòu)賦值規(guī)則：

① 只要等號(hào)右邊不是對(duì)象先將其轉(zhuǎn)化為對(duì)象，
② undefined和null無法轉(zhuǎn)換為對(duì)象，報(bào)錯(cuò)

let a = true
 = {a}
//Object {a: true}

函數(shù)參數(shù)解構(gòu)

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

undefined會(huì)觸發(fā)函數(shù)參數(shù)默認(rèn)值

圓括號(hào)問題

1.變量聲明語句中，模式不能帶有圓括號(hào) let {x:(c)} = {}
2.函數(shù)參數(shù)中，模式不能帶有圓括號(hào)(函數(shù)參數(shù)也屬于變量聲明)
3.整個(gè)模式或嵌套模式中的一層，不可放入圓括號(hào)

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

用途

1.[x, y] = [y, x]
2.函數(shù)返回的多個(gè)值分別賦值
3.函數(shù)參數(shù)與變量名對(duì)應(yīng)
4.提取json數(shù)據(jù)（ajax請(qǐng)求返回?cái)?shù)據(jù)處理中可用到）

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

5.函數(shù)參數(shù)的默認(rèn)值，避免在函數(shù)內(nèi)寫var foo = config.foo || ”

6.遍歷Map結(jié)構(gòu)

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");

更多相關(guān)內(nèi)容可查看本站專題：《ECMAScript6(ES6)入門教程》、《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript字符與字符串操作技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《javascript面向?qū)ο笕腴T教程》

希望本文所述對(duì)大家基于ECMAScript的程序設(shè)計(jì)有所幫助。