解构赋值

解构赋值

相信大家在接触JavaScript时都会了到解构赋值,解构赋值在我们常用的有对象解构数组解构那么本文章将简单的介绍一下这两种解构赋值。

什么是解构赋值?

解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。通俗来讲,解构赋值就是将一个属性赋给其他变量。

数组解构

在ES6中,它允许按照一定的模式从数组和对象中提取之,然后对变量进行赋值,这个操作称之为解构
关于数组解构,我将会举几个案例,来简单的介绍一下数组解构。
首先是数组解构的基本用法:

let [a,[b],d]=[1,[2],4];

它的基本格式大概是这样的,也就是说,在进行赋值的时候,只要等号两边的模式相同,左边的三个变量就会被赋上对应的属性值,也就是说,在数组解构赋值中,变量的取值是由它的位置决定。在其中,如果我们写了如下的代码:`

let [a,[b],d]=[1,[2,3],4];

就会发现,解构值并不是完全都会被接收,那么未被接收的解构值就会被忽略掉。如果进行数组解构的时候我们等号两边并未按照格式去写,这也是很多初学者会犯的错误,赋值时并不是按照数组去写,那么我们的代码就会报错。

默认值

在解构赋值时,我们允许指定默认值,如:

let [x,y='b']=['a']

这在解构赋值中是被允许的,而且我们的默认值可以引用解构赋值的其他变量,但是该变量必须已经声明,不然的话就会报错,

let[x=1,y=x][2]
let[x=1,y=x]=[1,2]

在ES6内部使用严格使用(===)运算符判断一个位置是否有值,如果一个数组成员不严格等于undefined,则默认值不会生效,如:

let[x=1]=[undefined];

对象解构赋值

与数组解构赋值不同的是,对象解构赋值并不是按照次序排列,而是取决于它的变量名,变量必须与属性同名才能取到正确的值。

let{obj}={obj:'123',fun:'aaa'}
默认值

在对象解构赋值中也会指定默认值,并且默认值生效条件是对象的属性严格等于undefined

var{x:y=3}={x:5}

如果解构失败,那么变量的值就会等于undefined。

let{obj}={fun:'123'}

如果解构模式是嵌套的对象,并且子对象所在父属性存在 ,那么代码就会报错,如:

let{obj:(fun)}={fun:'123'}

如果我们要将一个已经声明的变量用于解构赋值,应该讲解构赋值看作是一个表达式,并用括号将其括起。

let x;
({x}={x:1})

对象解构赋值可以很方便的将现有对象的方法赋值给某个变量。

let{log,sin,cos}=Math

最后,我们要知道,我们可以对数组进行对象属性的解构,因为数组的本质是特殊的对象。

let arr=[1,2,3];
let{0:first,[arr.length-1]:last}=arr;

其实,解构赋值还有字符串解构赋值,数值和布尔解构赋值,函数参数解构赋值,在这里我们就不一一介绍了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值