本文實例講述了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 //undefinedfoo //"aaa"loc //"bbb"baz //ReferenceError: baz is not defined
2.變量以前聲明過,使用let賦值會報錯
3.可用于嵌套結構的對象
var node = { loc: { start: { line: 1, column: 5 } }}var {loc:{start:{line}}} = nodeline //1loc //ReferenceError: loc is not definedstart //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//hlet {length:len} = 'hello' len//5(字符串本身包含length屬性)
數值&布爾值
解構賦值規則:
① 只要等號右邊不是對象先將其轉化為對象,
② undefined和null無法轉換為對象,報錯
let a = true = {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");
更多相關內容可查看本站專題:《ECMAScript6(ES6)入門教程》、《JavaScript數組操作技巧總結》、《JavaScript字符與字符串操作技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript錯誤與調試技巧總結》及《javascript面向對象入門教程》
希望本文所述對大家基于ECMAScript的程序設計有所幫助。
新聞熱點
疑難解答