数组、对象解构赋值

一. 结构对象

        对象解构是获取对象并将对象内部属性提取到对象外部变量的一种方法

const obj = { x: 1, y: 2 }

// 不使用解构语法
const x = obj.x
const y = obj.y

// 使用解构语法
const { x,y } = obj
x // 1
y // 2

// 你也可以再函数传参中使用解构，但是这里传参只有一个
function add({ x, y }){
  return x + y
}
add(obj) // 3

// 也可以这样
add({ x: 4, y：5 }) // 9

       现在会不会有点乱，花括号{}不仅可以用来声明对象，也可以对上下文进行解构

// 花括号在等号右边，声明一个对象
const obj = { x: 1, y: 2 }

// 花括号在等号左边，解构一个对象
const { x } = obj

二.数组解构

      数组解构和对象结构几乎相同，但是用的是方括号而不是花括号

const arr = [ 'hello', 'world' ]
const [first, second] = arr
first // hello
second // world

对象结构：它们之间的另一个区别是对象具有属性名称，因此必须在解构的时候使用这些属性名称。

数组解构：由于数组值是按顺序排列的，并且没有名称，因此，解构的顺序与我们获得的值是相关联的。也就是说first是解构中的第一个变量，所以它获取数组的第一个值。

三.对象属性简写

     如果属性名称与对象中的变量名称相同，则可以使用属性简写

const name = 'Mike'
const person = { name: name }
person // { name: 'Mike' }
// 简写
const person1 = { name }
person // { name: 'Mike' }

四.'···'展开语法

// 定义一个数组
const student = ['Mike', 'James', 'Wade']

// 如果要把这个数组加到一个新的数组中，比如:
const newStudents = [ student, 'Jack' ]

// 结果是一个数组里面包含一个数组
newStudents // [['Mike', 'James', 'Wade'], 'Jack']
newStudents[0] // Array ['Mike', 'James', 'Wade']
newStudents[1] // String 'Jack'

// 现在用...对象展开语法
const newStudents = [ ...student, 'Jack' ]
newStudents // [ 'Mike', 'James', 'Wade', 'Jack' ]

// 对象也可以使用...展开语法
const info = { name: 'Li', age: '1' }
const extraInfo = { ...info, address: 'Xi’an'}
extraInfo // { name: 'Li', age: '1', address: 'Xi’an' }

五.对象解构赋值

const obj = { a: 2, b: 3, c: 4 }
const { a: x } = obj
x // 2

六.数组解构更加简单的进行变量交换

let a = 3
let b = 4
[a, b] = [b, a]
a // 4
b // 3