序言

ES6允許按照一定模式從數(shù)組和對象中提取值，然后對變量進行復(fù)制，這被稱為解構(gòu)（Destructuring）

數(shù)組的解構(gòu)賦值

基本用法

像上面的例子，可以從數(shù)組中提取值，按照對應(yīng)位置對變量賦值，這種寫法屬于“模式匹配”，只要等號兩邊的模式相同，左邊的變量就會被賦予對應(yīng)的值，如果解構(gòu)不成功，變量的值就等于undefined

像上面因為模式并不匹配，所以a,b,c變量并沒有解析成功，為undefined
還有一種情況是不完全解構(gòu)，即等號左邊的模式只匹配一部分的等號右邊的數(shù)組

事實上，只要某種數(shù)據(jù)結(jié)構(gòu)具有Iterator接口，都可以采用數(shù)組形式的解構(gòu)賦值。具體關(guān)于Iterator接口，會在后面進行詳細解釋

默認值

解構(gòu)賦值允許指定默認值，但是默認值只在沒有賦到值（即為undefined的情況下）生效，如果是null，默認值不生效，因為ES6內(nèi)部是使用嚴格相等運算符（===）來判斷一個位置是否有值的，null不嚴格等于undefined，默認值是不會生效的

如果默認值是一個表達式，那么這個表達式是惰性求值的，即只有在用到時才會求值
默認值可以引用解構(gòu)賦值的其他變量，但該變量必須已經(jīng)聲明

對象的解構(gòu)賦值

基本用法

對象的解構(gòu)與數(shù)組有一個重要的不同。數(shù)組的元素是按次序排列的，變量的取值是由它的位置決定的；而對象的屬性沒有次序，變量必須與屬性同名才能取到正確的值，總而言之，對象的解構(gòu)賦值的內(nèi)部機制是先找到同名屬性，然后再賦值給對應(yīng)的變量
同學(xué)們可以看下下面的例子體會一下

let { bar, foo} = { foo: 'aaa', bar: 'bbb' }; foo // 'aaa' bar // 'bbb' var { foo: baz} = { foo: 'aaa', bar: 'bbb' }; // 等價于baz = 'aaa';

上例中的第二個解構(gòu)賦值，真正被賦值的是后者，而不是前者，foo是匹配的模式，baz才是變量，所以要注意對象的解構(gòu)賦值冒號前的作為模式，只用作匹配，不能被賦值，下面給個稍微復(fù)雜的例子，同學(xué)們自己結(jié)合上面說的理解一下

這里再次提醒一下，冒號前面的都是模式，不會被解構(gòu)賦值，只是用于解構(gòu)賦值的匹配

默認值

默認值和數(shù)組的解構(gòu)賦值類似，需要對象的屬性值嚴格等于undefined才會生效

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

字符串也可以解構(gòu)賦值，這是因為此時字符串被轉(zhuǎn)換成了一個類似數(shù)組的對象。類似數(shù)組的對象都有一個length屬性，因此還可以對這個屬性進行解構(gòu)賦值

數(shù)值和布爾值的解構(gòu)賦值

解構(gòu)賦值的規(guī)則是，只要等號右邊的值不是對象或數(shù)組，就先將其轉(zhuǎn)為對象。

因為123不是對象或數(shù)組，所以轉(zhuǎn)化為對象，toStr就賦值了Number.toString()方法。
由于undefined和null無法轉(zhuǎn)為對象，所以對它們進行解構(gòu)賦值時都會報錯

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

圓括號問題

ES6的規(guī)則是，只要有可能導(dǎo)致解構(gòu)的歧義，就不得使用圓括號，但是這條規(guī)則實際上不那么容易辨別，處理起來相當麻煩。因此建議，只要有可能，就不要在模式中放置圓括號

不能使用圓括號的情況

變量聲明語句

函數(shù)參數(shù)

可以使用圓括號的情況

可以使用圓括號的情況只有一種：賦值語句的非模式部分可以使用圓括號

解構(gòu)賦值的用途

交換變量的值

let x = 1, y = 2; [x, y] = [y, x]; //交換x,y的值

從函數(shù)返回多個值

function example(){return [1, 2, 3]; } let [a, b, c] = example();

函數(shù)參數(shù)的定義

function f([x, y, z]){...} f([1, 2, 3]);

提取JSON數(shù)據(jù)

let jsonData = {id: 42,status: "OK",data: [867, 5309] }; let {id, status, data: number} = jsonData;

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

任何部署了Iterator接口的對象都可以用for…of循環(huán)遍歷。Map結(jié)構(gòu)原生支持Iterator接口，配合變量的解構(gòu)賦值獲取鍵名和鍵值非常方便

var map = new Map(); for(let [key, value] of map){...}

輸入模塊的指定方法

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

小伙伴們今天的學(xué)習(xí)就到這里了，如果覺得本文對你有幫助的話，歡迎轉(zhuǎn)發(fā)，評論，收藏，點贊！！！
每天學(xué)習(xí)進步一點點，就是領(lǐng)先的開始。如果想繼續(xù)提高，歡迎關(guān)注我，或者關(guān)注公眾號”禎民講前端“。大量前端技術(shù)文章，面試資料，技巧等助你更進一步！

http://weixin.qq.com/r/phC2rt3ED4BwrZnN90W0 (二維碼自動識別)

總結(jié)

以上是生活随笔為你收集整理的json解析 子类和父类同名属性如何赋值_想学变量的解构赋值？看完这一篇就够了...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。