ES6扩展运算符和解构赋值

一. 扩展运算符

// 1.数组扩展运算符(它好比rest参数的逆运算，将一个数组拆分成以逗号分割的参数序列)
let arr = [1, 2]
console.log(...arr) // 1, 2 数组的拆分，将一个数组拆分成以逗号分割的参数序列

console.log([0, ...arr, 3, 4]) // [0, 1, 2, 3, 4] 数组的合并，将新的数据合并在数组中

let newArr = [...arr]
console.log(newArr) // [1, 2] 数组的拷贝，这样可以拷贝一个新的数组，新数据更改就不会影响旧的arr的数据

let arr1 = [3, 4, 5]
arr1.forEach(item => {
  arr = [...arr, item]
})
console.log(arr) // [1, 2, 3, 4, 5] 数组的循环添加，往常我们可以用push的方式，现在也可以使用扩展运算符

// 2.对象的扩展运算符
let obj = {
  name: 'Hello',
  age: '23'
}
let newObj = {...obj}
console.log(newObj) // {name: 'Hello', age: '23'} 对象的拷贝，这样可以拷贝一个新的对象，新数据更改就不会影响旧的obj数据

console.log({say: 'Text', ...obj}) // {say: 'Text', name: 'Hello', age: '23'} 对象的合并，将新的数据合并在对象中

二. 解构赋值

// 1.数组的解构赋值 备注: 以数组的形式来定义变量名，并通过一一匹配的方式以数组给定变量值
let [a, b, c] = [1, 2, 3]  
console.log(a, b, c) // 1, 2, 3 一一对应可以进行变量赋值

let [a, [[b], c]] = [1, [[2], 3]];
console.log(a, b, c) // 1, 2, 3 只要是一一对应，不管几层，都可以进行赋值操作

let [a, b, c] = [1, 2]
console.log(a, b, c) // 1, 2 undefined 要是变量名没有找到对应的值，就会抛出undefined

function funArr() {
  return [1, 2]
}
let [a, b, c] = funArr()
console.log(a, b, c) // 1, 2 undefined 当我们要拿数组中的某个值时，通过数组的解构赋值就可以直接拿到 备注(数组中他会按照顺序依次去哪，最后没有的会抛出undefined)

// 2.对象的解构赋值 备注：以对象的形式来定义变量名，并通过一一匹配的方式以对象给定变量值
let {name, age} = {name: 'Hello', age: '23'}
console.log(name, age) // Hello, 23 注意定义的变量名一定要和赋值的对象属性名一致

let obj = { name: 'Hello', age: '23'}
let {name} = obj
console.log(name) // Hello 当我们要拿到对象中的某一个值时，我们就可以直接使用对象的解构赋值，就可以自动拿到对象中和你变量名相同的属性值，简洁了代码

function funObj() {
  return { 
    name: 'Hello', 
    age: '23'
  }
}
let {name, age, say} = funObj()
console.log(name, age, say) // Hello, 23, undefined 同样，我们可以通过解构赋值一次拿到多个数据 备注(当我们需要拿的值找不到时，就会抛出undefined)