沐鳴下載_ES6中的解構賦值

前言

從前我們對變量賦值時,都是通過賦值運算符,右邊賦值給左邊這樣操作的。

let a = 1;
let b = 2;
let c = 3;

let obj = {};
obj.name = 'mm';
obj.age = 18;

現在我們通過模式匹配的方式來賦值。
左邊是解構目標,右邊是解構源。
左右結構要保持一致。

一、數組解構賦值:基本方式

1.1 一一對應

數組的解構是有順序的,是一一對應的。(等號右邊直接寫數組的變量名也可以。)

let [a,b,c] = [1,2,3];
console.log(a,b,c);

let arr = [4,5,6];
let [x,y,z] = arr;

1.2 可嵌套

只要右邊的模式和左邊相同,那麼左邊對應的變量就會被賦予對應的值。

let [a,[b,[c,d]],e] = [1,[2,[3,4]],5];
console.log(a,b,c,d,e);

1.3 不完全解構

如果右邊沒有給值,就當做undefined處理。

let [a,b,c] = [1,2]; // let [a,b,c] = [1,2,undefined];

1.4 可忽略

let [a, , b] = [1,2,3];

二、數組解構賦值:剩餘運算符

2.1 定義

語法:…變量名

作用:可以將右邊數組中剩餘的值解構到左邊,而且是以
數組的形式保存。

let [a, ...b] = [1,2,3,4,5,6];
console.log('a為:', a);
console.log('b為:', b);

2.2 注意

剩餘運算符只能放在最後一個參數的位置上,否則報錯。

let [...b, a] = [1,2,3];
console.log(b);

三、數組解構賦值:默認值

3.1 規則

指定默認值,默認值產生的條件是:右邊數組中對應的數據(====)嚴格等於undefined。

例如下面,y=10就表示,y的默認值為10。

let [x,y=10] = [1]; // let [x,y=10] = [1, undefined];
console.log(x,y);

3.2 特殊情況

let [a=10, b=a] = []; // a=10,b=10
let [a=10, b=a] = [1]; // a=1, b=1
let [a=10, b=a] = [1,2]; // a=1, b=2
let [a=b, b=20] = []; // 報錯(在用b之前還沒初始化值)

分析:
第一行:a和b匹配到undefined,所以採用默認值,a是10,b的值是a,也就是10;
第二行:a匹配到1,b匹配到undefined,所以b的值就是a,也就是1;
第三行:a和b均匹配到數值,因此a為1,b為2;(這裏b不會是默認給到a的值,因為它自己有匹配的值)
第四行:a=b,但是b還沒有初始化,因此報錯。

四、對象解構賦值:基本方式

4.1 映射對應

只有左邊對象的變量名和右邊對象的屬性名相同時,才會取到值。(等號右邊寫對象的變量名也可以。)

let {a, b} = {a:'foo', b:'bar'}; // a='foo' b='bar'

let obj = {
    name: 'mm',
    age: 18
}
let {name, age} = obj; // name='mm' age=18

let {say} = {jump:'jump', sing:'sing'}; // say='undefined' (找不到對應的屬性名,那就給undefined)

4.2 可嵌套

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj; // x='hello' y='world'

左邊:p是一種模式匹配,真正解構的是後面的數組中的x和對象中的y。
因此按照數組解構’hello’賦值給x,按照對象解構’world’賦值給y。
那麼要想獲取對象中p的屬性值呢,直接寫p就行。

let {p} = obj; // p=['hello', {y: 'world'}]

4.3 不完全解構

let {a,b,c} = {a:1,b:2}; // a=1 b=2 c=undefined

4.4 可忽略

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj; // x='hello'

五、對象解構賦值:剩餘運算符

剩下的屬性以對象的形式保留。

let {a, b, ...res} = {a:1, b:2, c:3, d:4, e:5}; // a=1 b=2 res={c:3, d:4, e:5}

六、對象解構賦值:默認值

指定默認值,默認值產生的條件是:對象屬性名(====)嚴格等於undefined。

let {a,b=10,c} = {a:1}; // a=1 b=10 c=undefined
let {x=3} = {x:undefined}; // x=3
let {y=4} = {y:null}; // y=null

七、對象解構賦值:易錯點

對象的解構賦值的內部機制,是先找到同名屬性,然後再賦給對應的變量。真正被賦值的是後者,而不是前者。

例如,等號左邊foo對應右邊的同名屬性是foo,它的值是’foo’,這個值最後賦值給foo對應的變量f而非foo。
簡而言之,這個f和b相當於是一個別名

let {foo:f, bar:b} = {foo:'foo', bar:'bar'}; // f='foo' b='bar'

八、解構賦值的應用

8.1 交換變量

let x=1, y=2;
[x, y] = [y, x];
console.log(x,y); // 2 1

8.2 接收返回值

function foo() {
      return [1,2,3];
}
let [a,b,c] = foo();
console.log(a,b,c); // 1 2 3

function bar() {
      return {
            b1: 'bar1',
            b2: 'bar2'
      }
}
let {b1, b2} = bar();
console.log(b1, b2); // 'bar1' 'bar2'

8.3 獲取jsON數據

var json = {
      name: 'mm',
      age: 18
}
let {name, age, say='暫無數據'} = json;
console.log(name, age); // 'mm' 18 '暫無數據'

8.4 獲取模塊數據

導出模塊時用export,導入模塊時用import。

模塊導出:(文件名為:module.js)

let [a,b,c] = [1,'second',true];
export {
    a,b,c
}

模塊導入:

import {a,b,c} from './module.js';
console.log(a,b,c); // 1,'second',true

總結

  1. 等號左右結構和形式要對應;
  2. 數組解構賦值時,左邊變量的順序和右邊變量值的順序是一一對應的;對象結構賦值時,左右兩側的順序不重要,只要找到就行;
  3. 如果左邊沒有匹配到右邊的值,那麼當做undefined處理,把undefined賦值給左邊;
  4. 剩餘運算符要放在參數末尾的位置上,如果是數組,那麼會以數組的形式賦值給左邊的變量,如果是對象,則以對象形式賦值。
  5. 默認值生效的前提是,右邊對應數組位置或者對象屬性名的數據嚴格等於undefined。(===)
  6. 用途:ajax後台大量的json數據傳遞到瀏覽器客戶端,用解構賦值可以方便地獲取數據。
  7. 用途:功能模塊導入。

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/8890