JavaScript一文搞懂解构赋值

·  阅读 291
JavaScript一文搞懂解构赋值

这是我参与更文挑战的第6天,活动详情查看更文挑战

如果你是一名前端程序员那么对ES6肯定是非常熟悉的啦,在工作中我们常常会使用到ES6的解构赋值的语法,给我们的编码带来带来了极大的方便,那么对于还不清楚怎么用的同学看完这篇文章就能完全搞懂啦!!!

变量的解构赋值

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

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

复制代码

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)

复制代码

看一下打印结果就知道了

image.png

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

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

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

分类:
前端
标签: