JS的對象、數組等處理方法：解構

對象方法簡寫

你可以在定義方法時省略function和 :：

const obj = {
  insteadOfThis: function() {
    // do stuff
  },

  youCanDoThis() {
    // do stuff
  }
}

請注意，以上不是箭頭函數，只是對象方法的簡寫語法。

解構對象

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

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({ x: 3, y: 4 }) // 7

剛開始你可能會有點混亂，因為現在花括號不僅可以用來聲明對象，也可以用來根據上下文對其進行解構。

// 如果花括號在等式的右邊，那么你正在聲明一個對象
const obj = { x: 1, y: 2 }

// 如果花括號在等式左邊，那么你正在解構一個對象
const { x } = obj;

解構數組

數組解構的工作原理與對象解構幾乎相同，但使用方括號而不是花括號：

const arr = ['michael', 'jackson']
const [first, last] = arr
first // michael
last // jackson

它們之間的另一個區別是對象具有屬性名稱，因此必須在解構的時候使用這些屬性名稱。由於數組值是按順序排列的，並且沒有名稱，因此，解構的順序與我們獲得的值是相關聯的。換句話說，first是解構中的第一個變量，因此它獲取數組的第一個值。

對象屬性簡寫

如果屬性名稱與對象中的變量名稱相同，則可以使用屬性簡寫：

// 這里需要寫兩遍 name
const name = 'Michael'
const person = { name: name }

// 對象屬性簡寫
const person = { name }

...展開語法

創建對象或數組時，一種從現有對象或數組的屬性創建新屬性的方法。

// 定義一個person數組
const person = ['Michael', 'Jackson']

// 如果要把 person 數組加到新的 profile 數組里，按下面這么寫的話
const profile = [person, 'developer']

// 結果會是數組里包含着一個數組
profile // [['Michael', 'Jackson'], 'developer']

profile[0] // 這是個數組 ['Michael', 'Jackson']
profile[1] // 這是字符串 'developer'

// 現在 我們用 ...展開語法
const profile = [...person, 'developer']

// 結果就變成了
profile // ['Michael', 'Jackson', 'developer']

// 對象也可以用 ...展開語法
const person = { first: 'Michael', last: 'Jackson' }
const profile = { ...person, occupation: 'developer' }
profile // { first: 'Michael', last: 'Jackson', occupation: 'developer' }

...剩余語法

剩余語法(Rest syntax) 看起來和展開語法完全相同，不同點在於, 剩余參數用於解構數組和對象。從某種意義上說，剩余語法與展開語法是相反的：展開語法將數組展開為其中的各個元素，而剩余語法則是將多個元素收集起來並“凝聚”為單個元素。

const profile = { first: 'Michael', last: 'Jackson', occupation: 'developer' }
const { occupation, ...rest } = profile
occupation // developer
rest // { first: 'Michael', last: 'Jackson' }

剩余語法用於函數參數

function myFunction(first, last, ...rest) {
  return rest
}

console.log(myFunction('Michael', 'Jackson', 'Developer', 'California'))
// output: ['Developer', 'California']