沐鳴下載_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
總結
- 等號左右結構和形式要對應;
- 數組解構賦值時,左邊變量的順序和右邊變量值的順序是一一對應的;對象結構賦值時,左右兩側的順序不重要,只要找到就行;
- 如果左邊沒有匹配到右邊的值,那麼當做undefined處理,把undefined賦值給左邊;
- 剩餘運算符要放在參數末尾的位置上,如果是數組,那麼會以數組的形式賦值給左邊的變量,如果是對象,則以對象形式賦值。
- 默認值生效的前提是,右邊對應數組位置或者對象屬性名的數據嚴格等於undefined。(===)
- 用途:ajax後台大量的json數據傳遞到瀏覽器客戶端,用解構賦值可以方便地獲取數據。
- 用途:功能模塊導入。
站長推薦
1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲
2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入
鏈接: http://www.fly63.com/article/detial/8890