ES6拓展运算及解构的多种用法

本文介绍javascript解构及三点运算符的多种用法，二者结合使用，让代码更简洁

解构：从对象中提取某个值，并且赋值

三点运算符：可以实现数组的拷贝等

1、三点运算符拷贝

1.1 简单拷贝

三点运算符最简单的用途就是实现对象和数组的拷贝

let arr = [1, 2, 3]
let res = [...arr]//[1,2,3]
//let res = [arr], 结果是[[1,2,3]]

//拷贝对象
let obj = { name: '张三', age: 18 }
let obj2 = { ...obj }//{ name: '张三', age: 18 }

数组和对象都是引用的，如果数组的元素是基本数据类型，深拷贝

当数组中存放复杂数组类型，浅拷贝

对象数组在工作中很常用，用三点运算符拷贝arr，得到arr2。改变arr，arr2也同样改变

//浅拷贝
let arr = [
  { name: '张三', age: 18 },
  {name: '李四', age: 20}
]

let arr2 = [...arr]
console.log(arr2) //[ { name: '张三', age: 18 }, { name: '李四', age: 20 } ]
arr[0].name = '王五'
console.log(arr2) //[ { name: '王五', age: 18 }, { name: '李四', age: 20 } ]

1.2 拷贝特定元素

拷贝除某个键值对以外的其他元素

const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
}
let { a, ...other } = obj
console.log(a) //1
console.log(other) //{  b: 2, c: 3, d: 4}

1.3 连接数组

let arr3 = [...arr1,...arr2]
console.log(arr3);

1.4 用于传参

function sum(...numbers){
    console.log(numbers);//numbers是一个数组的形式
}
sum(1,2,3)

1.5 构造字面量对象

let person = {name: "tom", age: 18}
let person2 = {...person}
//复制的同时修改属性
//默认进行合并
let person3 = {...person, name: "jack",address: "地球"}

2、解构的基础用法

2.1 直接解构

数组及对象都可以解构

对象是key: value的形式，指定key，就能拿到指定的value

let obj = { name: '张三', age: 18, sex: '男' }
//声名变量age和name
const { name, age } = obj
console.log(age)//18

//一个对象解构并且重新命名
//从obj里面解构出name，然后重命名为newName
const {name: newName} = obj
console.log(newName)//张三

数组元素可根据位置，解构出特定的某一项

//数组解构
const arr = [100, 200, 300]
let [c, d] = arr//100, 200
let [a, , b] = arr;//100, 300
console.log(a, b);

2.2 多层解构

连续解构，用于对象嵌套的情况

let obj = {
  name: '张三',
  age: 18,
  sex: '男',
  grades:
  {
    first: 90,
    second: 60,
    third: 60
  }
}

//嵌套解构
//注意：只对first进行了声名赋值，grades为undefined
const { grades: { first } } = obj
console.log(first)//90

//嵌套解构并且重命名
//注意：只对newValue进行了声名赋值，grades以及first都为undefined
const { grades: { first: newValue } } = obj
console.log(newValue)//90

3、结合ES6方法使用

解构及三点运算符，结果ES6的map，reduce， filter，可以大幅度简化代码

3.1 筛选出数组中某个值

筛选对象数组某个属性，对象数组，筛选出某一项，筛选出值，这些值构成一个数组

3.2 结合filter，筛选出数组某一项

筛选对象数组含有某属性的元素，得到元素，元素构成数组

let classMsg = [
    {
        grade: 1,
        name: "jack"
    },
    {
        grade: 3,
        name: "lucy"
    },
    {
        name: "lucy"
    },
]

const res = classMsg.map(({ grade }) => { return grade })//[1,3,undefined]
const res2 = classMsg.filter(({ grade }) => { return grade })
//[ { grade: 1, name: 'jack' }, { grade: 3, name: 'lucy' } ]

3.3 结合reduce，数组增加删除

项目里一个常见的需求，如果怎样，就把该元素添加进数组，否则，什么都不做

let person = {name: "tom", age: 18}
let person2 = {...person}
//复制的同时修改属性
//默认进行合并
let person3 = {...person, name: "jack",address: "地球"}