ES6 解构赋值详解

2022年7月12日08:15:23

对象的解构赋值

变量名与属性名相同时使用,用 {} 包裹

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';functionstartServer(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
  • 作者:朝阳39
  • 原文链接:https://blog.csdn.net/weixin_41192489/article/details/123073918
    更新时间:2022年7月12日08:15:23 ,共 1160 字。