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

  • 相关阅读:
    关于JSON可能出现的错误,待更/todo
    mongoose的安装与使用(书签记录) 2017
    HTTP的学习记录3--HTTPS和HTTP
    HTTP的学习记录(二)头部
    HTTP(一)概述
    LeetCode 455. Assign Cookies
    LeetCode 453. Minimum Moves to Equal Array Elements
    LeetCode 448. Find All Numbers Disappeared in an Array
    LeetCode 447. Number of Boomerangs
    LeetCode 416. Partition Equal Subset Sum
  • 原文地址:https://www.cnblogs.com/dashenba/p/14267870.html
Copyright © 2011-2022 走看看