对象的解构赋值
变量名与属性名相同时使用,用 {} 包裹
let config = { server: 'localhost', port: '8080', timeout: 900, } let {server,port} = config console.log(server, port) //"localhost" "8080"
可以自定义变量名:
let {timeout : t} =config console.log(t) //900
将对象的属性值赋值给已经声明过的变量,需要在外面加上小括号:
let config = { server: 'localhost', port: '8080', timeout: 900, } let server = '127.0.0.1'; let port = '80'; ({server,port} = config) //用()赋值 console.log(server, port) //"localhost" "8080"
为函数传参时,也可以使用解构赋值的方式
let config = { server: 'localhost', port: '8080', timeout: 900, } let server='127.0.0.1'; let port ='80'; let timeout ='100'; function startServer(configValue){ console.log(configValue) } startServer({server,port,timeout} = config)
赋值的变量名在对象中找不到与之匹配的属性名,这个变量的值会变成undefined。
可以为变量设置默认值:
let config = { server: 'localhost', port: '8080' } let {server,port,timeout=0} = config console.log(timeout)
数组的解构赋值
变量顺序与数组中元素的顺序要保持一致,用 [ ] 包裹
const arr = ['a','b'] const [x,y] = arr console.log (x,y) /"a" "b"
如果想跳过数组中的某个元素,可以采取下面这种方法:
const days = ['Thursday','Friday','Saturday','Sunday'] const [,,sat,sun] = days console.log (sat,sun) //"Saturday" "Sunday"
配合剩余操作符(…)将数组中剩余的所有元素以数组的形式赋值给变量(剩余操作符在使用时只能被放置在最后)
const [x, ...y] = ['a', 'b', 'c']; // x='a'; y=['b', 'c']
解构赋值的妙用——互换赋值
解构赋值实现便捷的互换赋值(不再需要临时中间变量)
let a=1, b=2; [b,a] = [a,b] console.log(a,b) //2 1