快捷搜索:  汽车  科技

es6变量声明方式(小白学ES6新属性解构赋值简直太好用了)

es6变量声明方式(小白学ES6新属性解构赋值简直太好用了)let [a [[b] c]] = [1 [[2] 3]];结果:使用嵌套数组进行解构let [a b c] = [1 2 3];以上代码的意思是从数组中取值,按照对应的位置给变量赋值,此时:a = 1,b = 2,c = 3从本质上来说,ES6的这种写法类似于“模式匹配”,所以,解构需要等号两边类型一致,左边的变量就会被赋予相对应的值。

前面学习了JS的模板字符串感觉真的是太好用了,今天学到了一个ES6的新特性——解构赋值,发现这个功能用起来也是太爽了,在处理数组,给多个变量赋值的时候真的是方便好多,现在我把学习过程中的重点知识以及里面遇到的坑分享出来做一个总结,以便于以后的复习查阅。

什么是解构赋值?

ES6中允许按照一定模式从数组和对象中提取值,然后再对变量进行赋值,这样的操作称为解构赋值。

在ES6以前,在变量赋值的时候只能为变量指定对应的值:

let a = 1; let b = 2; let c = 3;

从ES6以后,允许用以下方式写:

let [a b c] = [1 2 3];

以上代码的意思是从数组中取值,按照对应的位置给变量赋值,此时:

a = 1,b = 2,c = 3

从本质上来说,ES6的这种写法类似于“模式匹配”,所以,解构需要等号两边类型一致,左边的变量就会被赋予相对应的值。


1.数组的解构赋值

使用嵌套数组进行解构

let [a [[b] c]] = [1 [[2] 3]];

结果:

a = 1,b = 2,c = 3


let [ third] = ["one" "two" "three"];

结果:

third的值为:"three"


let [first third] = ["one" "two" "three"];

结果:

first = "one" thrid = "three"


解构赋值允许指定默认值:

let [x y = '100'] = [10];

结果:

x = 10 y = 100

关于在指定默认值的时候有一个坑,具体请看下面两个代码案例:

let [x = 1] = [undefined]; console.log(x);

let [x = 1] = [null]; console.log(x);

上述两块代码x的值分别是多少呢?我当时没有在代码中测试,猜的结果都是1,但是在控制台试了一下,发现并不都是1,而是1和null,结果如图:

es6变量声明方式(小白学ES6新属性解构赋值简直太好用了)(1)

undefined

es6变量声明方式(小白学ES6新属性解构赋值简直太好用了)(2)

null

这是为什么呢?通过查阅相关资料发现:

ES6内部使用的是严格相等运算符(===)来判断某个位置是否有值,所以,当一个数组变量中存在不严格等于undefined的值时,默认值是不生效的,怎么理解这句话呢?其实很好理解,我们在控制台测试一下null和undefined是否严格相等即可,例如:

undefined == null // true
undefined === null // false

  • 测试效果:

es6变量声明方式(小白学ES6新属性解构赋值简直太好用了)(3)

undefined == null、undefined === null


2.对象的解构赋值

解构不仅可以用于数组,还可以用于对象。

现有如下对象:

const user = { name: '残破的蛋蛋' age: 18 sex: '男' weight: 500 };

现在我想单独把姓名和年龄两个对象属性拿出来并赋值,可以这样写:

({age name} = {name: '残破的蛋蛋' age: 18}); console.log(name age); // 残破的蛋蛋 18

对象的解构与数组不同的是:数组的元素是按次序排列的,变量的值是由它的位置决定的,但是对象的属性没有固定的次序,但是变量名称必须与属性名称相同才能取到值。

let {gender} = {name: '残破的蛋蛋' age: 18}); console.log(gender); // undefined

上述代码中,由于左边的变量在右边没有对应的同名属性,导致无法正确的取到值,所以结果为undefined。

如果变量名与属性名不一致,必须按照如下格式写:

({sex: gender} = {name: '残破的蛋蛋' age: 18 sex: '男'}); console.log(gender);

相当于是给sex起了一个别名——gender。

3.字符串的解构赋值

字符串也是可以解构赋值的,因为在解构赋值中,字符串被转换成了一个类数组的对象。

const [a b c d e] = 'Hello'; console.log(a b c d e); // H e l l o


以上就是我所学习的三种常用解构赋值,在学习的过程我也了解到不光是对象、数组和字符串字符串能进行解构,其实,数值,布尔值,函数的参数都可以解构赋值,但是我认为解构的初衷是要从集合中快速获取成员,所以对原始类型解构意义不大,因为我也仅仅是了解了有这么个东西,至于以后真的用到了,到时候再翻翻手册吧。

刚刚上手JS,如果文中有写的不足的地方,还请各位大佬批评指正,感激不尽。

猜您喜欢: