变量的解构赋值

所谓的解构赋值，就是把某个对象或者数组中的数据，当作变量，给解放出来，这样，今后就能够当作变量直接使用了!!!；
再也不用每个值一遍遍的用.或者 [] 赋值

解构:将数组的数据或者对象的属性取出部分作为变量

// 对象 
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

解构 + 重命名 + 默认值,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

在react的dva框架中我们经常会使用到解构,我们一般会在在函数的传参中经常使用,话不多说,给个例子吧

const add = (state, {
    payload: todo }) => {
    
 return state.concat(todo) } 
 add("1", {
    payload: "2" })
 //调用时 "1"赋值给state payload值为"2"且被重命名为todo

对象的反向解构，当对象中的键和值字段一致时可以只写一个来重新构建一个对象

const name = '拓路者', age = 18
const user = {
    name, age }  
// { name: '拓路者', age: 18 }
 
// 定义对象方法时，可省去 function 关键字。 app.model({ 
 reducers: {
     
   add() {
   }  // 等同于 add: function() {} 
 },  
 effects: {
     
   *addRemote() {
   }  // 等同于 addRemote: function*() {} 
    }, 
 })

函数参数的解构

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)

看一下打印结果就知道了

那么我们还要要注意这几点:

与数组解构有一个重要的不同，数组的元素是按次序排列的，变量的值由它的位置决定对象解构是没有次序，变量必须与属性同名
如果我们在解构声明变量时，定义了对象中不存在的属性，那么这个变量的值为undefined。我们可以给变量设置默认值，当对象中没有对应的属性时，这个变量的值就是设置的默认值。

如果这些都能理解的话,你在工作中使用解构赋值就能够得心应手了!!!

(免费获取最新完整前端课程关注vx公众号:前端拓路者coder,回复:资料
如果这个文章对你有用的话,欢迎点赞转发关注,让更多的小伙伴看到呀,毕竟分享是一个程序员最基本的美德!!!
如果有不对的请大佬指教)

ES6专题--2.什么?解构赋值这些你必须知道?

变量的解构赋值