ES6專題--2.什麼?解構賦值這些你必須知道?

變量的解構賦值

所謂的解構賦值，就是把 某個對象或者數組中的數據，當作變量，給解放出來，這樣，今後就能夠當作變量直接使用了!!!；
再也不用每個值一遍遍的用.或者 [] 賦值

1. 解構:將數組的數據或者對象的屬性取出部分作爲變量

// 對象 
const user = { name: '前端拓路者', age: 2, sex:'men' }
// 聲明的變量名和對象的key值字段一致，然後只拿我們所需要的
const { name, age } = user
console.log(`${name} : ${age}`)  // 前端拓路者 : 2
// 數組 
const arr = [1, 2, 3] 
const [sb, hb] = arr  
//會根據變量的位置，一一對應的賦值給變量 
console.log(sb, hb)  // 1  2

2. 解構 + 重命名 + 默認值,a:b就是將重命名爲b;那麼解構賦值過程就有點複雜了,我們來個小栗子吧

let { a: x = 0, b: y = 2, c: z } = { a: "11", y: "22", z: "33" }
 // 以下爲爲方便理解而模擬執行的過程，並非真實處理過程
//前面的a是匹配模式  後面的x纔是變量
// 1. 先找到初的變量進行解構賦值
let { a, b, c } = { a: "11", y: "22", x: "33" }
 // a => 11  b => 無值undefined  c => 無值undefined 

// 2. 將聲明的字段重命名  [聲明的字段 ：重命名後的字段]
let x = a, y = b, c = z 
//注意，雖然上步"聲明"了a b c，但它們依舊是未定義狀態，且打印 它們會拋錯 error: (a b c) is not defined

// 3. 判斷該變量是否有值，無值時才賦值等號後默認值 
let x = a = "11"  //有值，不用賦值默認值0 
let y = b = "2"  //無值，賦值默認值2
let z = c         //無值且無默認值 undefined

3. 在react的dva框架中我們經常會使用到解構,我們一般會在在函數的傳參中經常使用,話不多說,給個例子吧

const add = (state, { payload: todo }) => { 
 return state.concat(todo) } 
 add("1", { payload: "2" })
 //調用時 "1"賦值給state  payload值爲"2"且被重命名爲todo

4. 對象的反向解構，當對象中的鍵和值字段一致時可以只寫一個來重新構建一個對象

const name = '拓路者', age = 18
const user = { name, age }  
// { name: '拓路者', age: 18 }
 
// 定義對象方法時，可省去 function 關鍵字。 app.model({ 
 reducers: {  
   add() {}  // 等同於 add: function() {}  
 },  
 effects: {  
   *addRemote() {}  // 等同於 addRemote: function*() {} 
    }, 
 })

5. 函數參數的解構

function add([x=1,y=1]){
       // var x = x ||1;
       // var y = y ||1;
        return x+y
    };
    add([2,3]);
    //[x,y]=[2,3] 2+3=5
    
     //參數對象
     function add2({x=0,y=0}){
         return x+y
     };
     add2({x:3,y:4})
     //{x=0,y=0} = {x:3,y:4}

    //函數參數解構的默認值
    function fun({x=0,y=0} = {}){
        return [x,y]
    };
    //{x=0,y=0} = {x:3,y:5}
    fun({x:3,y:5}) //[3,5]
    fun({x:3})    // [3,0]   {x=0,y=0}  ={x:3}
    fun();//{x=0,y=0}  ={}  [0,0]
    fun({})
    //還有這種
     function fun2({x,y}={x:0,y:0}){
        return [x,y]
    }
    //{x,y} = {x:3,y:5}
    fun2({x:3,y:5}) // [3,5]
    fun2({x:3})  // {x,y} = {x:3}   [3,undefined]
    fun2();//{x,y}={x:0,y:0}   [0,0]
    fun2({})  //{x,y} = {}  [undefined,undefined]
    //這裏有些面試題就是喜歡搞這些花裏胡哨的,上面的例子要自己好好動手試驗下是不是,好好理解下

一個函數返回的數組能不能解構呢???

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

看一下打印結果就知道了

那麼我們還要要注意這幾點:

1. 與數組解構有一個重要的不同，數組的元素是按次序排列的，變量的值由它的位置決定 對象解構是沒有次序，變量必須與屬性同名
2. 如果我們在解構聲明變量時，定義了對象中不存在的屬性，那麼這個變量的值爲undefined。我們可以給變量設置默認值，當對象中沒有對應的屬性時，這個變量的值就是設置的默認值。

如果這些都能理解的話,你在工作中使用解構賦值就能夠得心應手了!!!

(免費獲取最新完整前端課程關注vx公衆號:前端拓路者coder,回覆:資料
如果這個文章對你有用的話,歡迎點贊轉發關注,讓更多的小夥伴看到呀,畢竟分享是一個程序員最基本的美德!!!
如果有不對的請大佬指教)