[JS]解构赋值

 
解构赋值 是一种特殊的语法,它使我们可以将数组或对象“拆包”为到一系列变量中,因为有时候使用变量更加方便。解构操作对那些具有很多参数和默认值等的函数也很奏效。
1 let arr = [ "john", "lily" ]
2 let [ first, second ] = arr
3 console.log(first, second) // john   lily
4 
5 let [ firstName, secondName ] = "Neal Caffiry".split(" ")
6 console.log(firstName, secondName) // Neal   Caffiry

 

数组中不想要的元素也可以通过添加额外的逗号来把它丢弃
1 let [, firstName, , secondName] = ["jack", "Neal", "lily", "Caffiry"]
2 console.log(firstName, secondName) // Neal Caffiry

 

等号右侧可以是任何可迭代对象
1 let [a, b, c] = "abc"; // ["a", "b", "c"]
2 let [one, two, three] = new Set([1, 2, 3])

 

赋值给等号左侧的任何内容
1 let user = {}; // 这里必须打分号
2 [user.name, user.age] = "jack 20".split(" ")
3 
4 console.log(user) // {name: "jack", age: "20"}

 

如果不只是要获得第一个值,还要将后续的所有元素都收集起来,可以使用三个点 "..." 来再加一个参数来接收“剩余的”元素:
1 let [name1, name2, name3, ...rest] = ["jack", "lily", "lucy", "alice", "john", "neal"]
2 console.log(name1, name2, name3) // jack lily lucy
3 console.log(rest) // ["alice", "john", "neal"] 剩下的元素会组成一个新数组赋值给rest

 

如果赋值语句中,变量的数量多于数组中实际元素的数量,赋值不会报错。未赋值的变量被认为是 undefined:
1 let [q, w, e] = ["jack"]
2     console.log(w, e) // undefined undefined

 

可以设置默认值
1 let [m = "lily", n = "john"] = ["jack"]
2 console.log(m, n) // jack john

 

解构赋值同样适用于对象
 1 let options = {
 2   title: "Menu",
 3   width: 100,
 4   height: 200
 5 }
 6 
 7 let { width, title, height } = options // 改变左边顺序也不会影响
 8 
 9 console.log(title);  // Menu
10 console.log(width);  // 100
11 console.log(height); // 200

 

练习:

新建一个函数 topSalary(salaries),返回收入最高的人的姓名。
      如果 salaries 是空的,函数应该返回 null。
      如果有多个收入最高的人,返回其中任意一个即可。
 1 let salaries = {
 2   "John": 100,
 3   "Pete": 300,
 4   "Mary": 250,
 5   "jack": 300,
 6 }
 7 console.log(topSalary(salaries)) // jack
 8 
 9 function topSalary(salaries) {
10   return person = (JSON.stringify(salaries) === '{}') ? null : Object.entries(salaries).sort().pop()[0]
11 }
posted @ 2020-03-04 14:34  冯风风  阅读(3784)  评论(0编辑  收藏  举报