js數組、對象解構，對象解構賦值

一. 結構對象

        對象解構是獲取對象並將對象內部屬性提取到對象外部變量的一種方法

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 = { ...obj, 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