[JS]解構賦值

 

解構賦值 是一種特殊的語法，它使我們可以將數組或對象“拆包”為到一系列變量中，因為有時候使用變量更加方便。解構操作對那些具有很多參數和默認值等的函數也很奏效。

let arr = [ "john", "lily" ]
let [ first, second ] = arr
console.log(first, second) // john   lily

let [ firstName, secondName ] = "Neal Caffiry".split(" ")
console.log(firstName, secondName) // Neal   Caffiry

 

數組中不想要的元素也可以通過添加額外的逗號來把它丟棄

let [, firstName, , secondName] = ["jack", "Neal", "lily", "Caffiry"]
console.log(firstName, secondName) // Neal Caffiry

 

等號右側可以是任何可迭代對象

let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3])

 

賦值給等號左側的任何內容

let user = {}; // 這里必須打分號
[user.name, user.age] = "jack 20".split(" ")

console.log(user) // {name: "jack", age: "20"}

 

如果不只是要獲得第一個值，還要將后續的所有元素都收集起來，可以使用三個點 "..." 來再加一個參數來接收“剩余的”元素：

let [name1, name2, name3, ...rest] = ["jack", "lily", "lucy", "alice", "john", "neal"]
console.log(name1, name2, name3) // jack lily lucy
console.log(rest) // ["alice", "john", "neal"] 剩下的元素會組成一個新數組賦值給rest

 

如果賦值語句中，變量的數量多於數組中實際元素的數量，賦值不會報錯。未賦值的變量被認為是 undefined：

let [q, w, e] = ["jack"]
    console.log(w, e) // undefined undefined

 

可以設置默認值

let [m = "lily", n = "john"] = ["jack"]
console.log(m, n) // jack john

 

解構賦值同樣適用於對象

let options = {
  title: "Menu",
  width: 100,
  height: 200
}

let { width, title, height } = options // 改變左邊順序也不會影響

console.log(title);  // Menu
console.log(width);  // 100
console.log(height); // 200

 

練習：

新建一個函數 topSalary(salaries)，返回收入最高的人的姓名。

      如果 salaries 是空的，函數應該返回 null。

      如果有多個收入最高的人，返回其中任意一個即可。

let salaries = {
  "John": 100,
  "Pete": 300,
  "Mary": 250,
  "jack": 300,
}
console.log(topSalary(salaries)) // jack

function topSalary(salaries) {
  return person = (JSON.stringify(salaries) === '{}') ? null : Object.entries(salaries).sort().pop()[0]
}