全网ES6解构赋值实例

253 阅读2分钟

最近看到网上一次案例用到ES6解构赋值,然后我也运用到实际的项目中,发现真的比较实用,对工作帮助比较大,我就这里记录一下,你看了之后有帮助的话,记得点赞关注,我会持续更新下去的,谢谢

数组解构

数组解构包括了拼接、复制、修改

1数组拼接

var a = [1,2,3]
var b = [4,5,6]
var c = [...a,...b]

复制数组

在工作中,有时候会需要复制数组,但是复制出来的数组做修改不能改变原数组

var a = [1,2,3]
var b = [...a]
b[0] = 2
b = [2, 2, 3]
a = [1, 2, 3]

修改数组里面的对象值

在工作中,经常需要修改数组里面的某个对象条件成立里面的值,

var a = [{name:'a',age:15},{name:'b',age:18}]
var age = 15
var sum = 18
a.map(item => {
	if(item.age == sum) return {...item,age}
    else return item
})
a = [{name:'a',age:15},{name:'b',age:15}]

对象解构

对象解构就分为两种,一种是赋值、一种是修改

赋值

var a= {name:'a' ,age: 15}
var {name, age} = a

赋值连续

let obj = {a:{b:{c:1}}}
console.log(obj.a.b.c)

const {a:{b:{c}}} = obj
console.log(c)

赋值连续改键名

let obj2 = {a:{b:2}}
console.log(obj.a.b)

const {a:{b:data}} = obj
console.log(data)

修改对象里面某个值

var a= {name:'a' ,age: 15}
var b = {...a,age:18}



b ={name: "a", age: 18}

删除对象里面某个值

//删除性别gender字段
var a= {name:'a' ,age: 15,gender: 女}
var {gender, ...form} = a



form ={name: "a", age: 18}

把数组下面的对象里面的两个字段取出来组成一个新的对象

原始数据

county_list:[
 {
    "code": "110101",
    "name": "小明",
  },
  {
    "code": "110102",
    "name": "小细",
  },
  {
    "code": "110103",
    "name": "小刘",
  },
]

使用的方法

let province_list = {}
county_list.map((item) => { province_list[item.code] = item.name });

最终要的对象效果

province_list: {
    110000: '小明',
    120000: '小刘'
},

最后

E6解构赋值真的给我们的工作带来很大的帮助,希望朋友们也能快速的用起来,提高工作效率!!!