[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 }