ES6學習（變量解構賦值）

解構賦值含義：容許按照必定模式，從數組和對象中提取值，對變量進行賦值，只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值

一、數組解構賦值 右側必須是一個數組

let [a, b, c] = [1, 2, 3];
// 若是不是數組，則會報錯
let [e] = 5
console.log(e)
// 若是左側變量名多於右側，則左側多的變量賦值不成功爲undefined
let [a,b,c,d] = [2,3];
console.log(a,b,c,d) //2  3  undefined  undefined
// 若是左側出現展開運算符時；右側對應的值會放到一個數組中
let [a,...b] = [1,2]
console.log(a,b)   // 1  [2]
let [c,...d] = [1,[3,4]]
console.log(c,d)// 1  [[3,4]]
// 若是右側的值多於左側的變量，那麼只匹配對應的值，多餘的值則不會解構  嵌套解構
let [aa,bb] = [1,[3,4],66]
let [cc,[dd]] = [1,[3,4],66]
console.log(aa,bb) //1  [3,4]
console.log(cc,dd) //1  3
// 二、解構賦值容許指定默認值
let [a1,b1=2] = [1];
console.log(a1,b1) //1  2
// 只有左側對應的值嚴格等於undefined時，默認才生效
let [a2,b2=3]=[2,false];
let [a3,b3=3]=[2,undefined];
console.log(a2,b2);  //2  false
console.log(a3,b3);  //2  3
// 默認值能夠引用解構賦值的其餘變量，但該變量必須已經聲明。
let [a4,b4=a4] = [3];
let [a6=1,b6=a6] = [];
let [a5=b5,b5] = [3,5];
let [a7=b7,b7] = []; //ReferenceError: b7 is not defined
console.log(a4,b4)  //3  3
console.log(a5,b5)  //3  5
console.log(a6,b6)  //1  1

二、對象的解構賦值

對象解構 是根據變量名來進行解構賦值的 沒有順序，若是左側沒有在右側找到一樣的名稱，則該變量是undefined先找到同名屬性，而後再賦給對應的變量。真正被賦值的是後者，而不是前者。因此咱們寫代碼的時候必定要注意

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
console.log(bar,foo)  //bbb  aaa
let { bar, foo } = { foo: 'aaa' };
console.log(bar,foo) //undefined  aaa
let { bar:foo, foo:bar } = { foo: 'aaa', bar: 'bbb' };
let {  foo:bar } = { foo: 'aaa', bar: 'bbb' };
console.log(bar,foo) //foo is not defined
// 也能夠對內置對象進行解構 例如Math
let {floor,ceil,round} = Math;
console.log(floor(3.5))  //3
console.log(ceil(3.5)) //4
console.log(round(3.5)) //4
// 對象也能夠嵌套解構
let {fn,fn:{fn1}} = {fn:{fn1:3}}
console.log(fn) //{fn1:3}
console.log(fn1) // 3
// 對象的解構也能夠指定默認值  默認值生效的條件是，對象的屬性值嚴格等於undefined。
var {obj1 = 3} = {};
var {obj2 = 3} = {obj2:undefined};
var {obj3 = 3} = {obj3:null};
console.log(obj1,obj2,obj3) //3  3  null
// 注意  不能將大括號寫在行首，JavaScript 引擎會將{obj4}理解成一個代碼塊，從而發生語法錯誤。
let obj4;
// {obj4} = {obj3:5};
({obj4} = {obj4:5})
// 能夠對數組進行對象屬性的解構
// 都有一個length屬性，所以還能夠對這個屬性解構賦值。
let {0:first,length:len} = [2,4,5]
console.log(first) //2
console.log(len) //3

三、字符串的解構賦值 就是把字符串展開，分別對應左側一個變量

const [str1, str2, str3] = 'hello';
const {length}= 'hello';
console.log(str1,str2,str3,length)  //h  e  l  5
// 只要等號右邊的值不是對象或數組，就先將其轉爲對象。因爲undefined和null沒法轉爲對象，因此對它們進行解構賦值，都會報錯。
let {toString:s} = 55
let dddd = s.toString(444)
console.log(typeof dddd)

四、解構賦值有什麼用？

（1）、交換賦值更方便

let x = 1;
let y = 2;
​
[x, y] = [y, x];

（2）、函數返回值，能夠直接解構對應不一樣的變量

function example() {
    return {
        foos: 1,
        bars: 2
    };
}
let { foos, bars } = example();

（3）、函數傳參更方便 若是向函數中傳入數組或對象的話，不使用解構那咱們還須要從數組或對象中去取值；若是解構，則咱們能夠在函數中直接使用變量的值

function f([x, y, z]) {
    // 這裏能夠直接使用 數組的值 1 2 3
}
f([1, 2, 3]);

（4）、以快速提取 JSON 數據中有用的值 後臺接口給咱們返回的字段，咱們不必定所有都用，這是咱們能夠把用到的字段解構出來使用。

let jsonData = {
    data: [867, 5309],
    success:true,
    massage:"成功",
    status:200
};
​
let { status, data,success } = jsonData;

（5）、for...of循環遍歷 任何部署了 Iterator 接口的對象，

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
​
for (let [key, value] of map) {
    console.log(key + " is " + value);
}

（6）、引入模塊的時候，可使用解構來，輸出須要使用的一些方法

// 例如vue3 的引入 直接使用其內的函數
 import { ref, reactive,readonly,toRaw } from 'vue'

歡迎關注公衆號（web學習吧），一塊兒學習進步:

本文使用 mdnice 排版