zoukankan      html  css  js  c++  java
  • vue解构赋值_ES6解构赋值

    写vue或react项目,我们经常在接收到数据的时候,需要对数据进行二次加工操作,一些传统的办法可以实现对数据的加工。但利用到ES6的解构赋值,则更为简单。

    解构赋值主要分为对象的解构和数组的解构,在没有解构赋值的时候,我们的赋值是这样的

    let arr = [1,2,3]

    let a= arr[0]

    let b= arr[1]

    let c= arr[2]

    这样写很繁琐,解构赋值可以轻松解决上面的问题。

    一、数组的解构赋值

    let arr = [0,1,2]

    let [a,b,c]=arr

    console.log(a)//0

    console.log(b) //1

    console.log(c) //2

    但是很多时候,数据并非一一对应的,并且我们希望得到一个默认值

    let arr = [,1,2]

    let [a='我是默认值',b,c] =arr

    console.log(a)//'我是默认值'

    console.log(b) //1

    console.log(c) //2

    从这个例子可以看出,在解构赋值的过程中,a=undefined时,会使用默认值

    那么当a=null时呢?当a=null时,那么a就不会使用默认值,而是使用null

    //数组的拼接

    let a = [0,1,2]

    let b= [3,4,5]

    let c=a.concat(b)

    console.log(c)//[0,1,2,3,4,5]

    let d=[...a,...b]

    console.log(d)//[0,1,2,3,4,5]

    //数组的克隆//假如我们简单地把一个数组赋值给另外一个变量

    let a = [0,1,2,3]

    let b=a

    b.push(4)

    console.log(a)//[0,1,2,3,4]

    console.log(b) //[0,1,2,3,4]

    因为这只是简单的把引用地址赋值给b,而不是重新开辟一个内存地址,所以a和b共享了同一个内存地址,该内存地址的更改,会影响到所有引用该地址的变量,那么用下面的方法,把数组进行克隆一份,互不影响。

    let a = [0,1,2,3]

    let b=[...a]

    b.push(4)

    console.log(a)//[0,1,2,3]

    console.log(b) //[0,1,2,3,4]

    二、对象的解构赋值

    对象的解构赋值和数组的解构赋值其实类似,但是数组的数组成员是有序的

    而对象的属性则是无序的,所以对象的解构赋值简单理解就是等号的左边和右边的解构相同

    let {name,age} = {name:"swr",age:28}

    console.log(name)//'swr'

    console.log(age) //28

    对象的解构赋值是根据key值进行匹配

    let { name:Name,age } = { name:'swr',age:28}

    console.log(Name)//'swr'

    console.log(age) //28

  • 相关阅读:
    阿里安全归零实验室招聘各路大牛!offer好说!
    露脸!钉钉通过SOC2隐私性原则审计,安全和隐私保护达超一流国际标准
    BAT齐聚阿里安全-ASRC生态大会:呼吁联合共建网络安全白色产业链
    v3-4_-vict-、-vinc-胜利,征服
    Grammar01 语法七要素之一_词类
    Grammar00_英语学习铁律
    SpokenEnglish01_ When's it due?
    SpringBoot31 重识Spring01-环境搭建、Actuator监控、属性配置、多环境配置
    Shrio04 自定义Realm
    Shrio03 Authenticator、配置多个Realm、SecurityManager认证策略
  • 原文地址:https://www.cnblogs.com/dashenba/p/14267870.html
Copyright © 2011-2022 走看看