想学变量的解构赋值?看完这一篇就够了

简介: 想学变量的解构赋值?看完这一篇就够了

序言

      ES6允许按照一定模式从数组和对象中提取值,然后对变量进行复制,这被称为解构(Destructuring)


数组的解构赋值

基本用法

640.png

      像上面的例子,可以从数组中提取值,按照对应位置对变量赋值,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值,如果解构不成功,变量的值就等于undefined

640.png

      像上面因为模式并不匹配,所以a,b,c变量并没有解析成功,为undefined

还有一种情况是不完全解构,即等号左边的模式只匹配一部分的等号右边的数组

640.png

      事实上,只要某种数据结构具有Iterator接口,都可以采用数组形式的解构赋值。具体关于Iterator接口,会在后面进行详细解释


默认值

      解构赋值允许指定默认值,但是默认值只在没有赋到值(即为undefined的情况下)生效,如果是null,默认值不生效,因为ES6内部是使用严格相等运算符(===)来判断一个位置是否有值的,null不严格等于undefined,默认值是不会生效的

640.png

      如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到时才会求值

默认值可以引用解构赋值的其他变量,但该变量必须已经声明


640.png

对象的解构赋值

基本用法

      对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值是由它的位置决定的;而对象的属性没有次序,变量必须与属性同名才能取到正确的值,总而言之,对象的解构赋值的内部机制是先找到同名属性,然后再赋值给对应的变量

同学们可以看下下面的例子体会一下

640.png

   上例中的第二个解构赋值,真正被赋值的是后者,而不是前者,foo是匹配的模式,baz才是变量,所以要注意对象的解构赋值冒号前的作为模式,只用作匹配,不能被赋值,下面给个稍微复杂的例子,同学们自己结合上面说的理解一下

640.png

      这里再次提醒一下,冒号前面的都是模式,不会被解构赋值,只是用于解构赋值的匹配


默认值

      默认值和数组的解构赋值类似,需要对象的属性值严格等于undefined才会生效


字符串的解构赋值

      字符串也可以解构赋值,这是因为此时字符串被转换成了一个类似数组的对象。类似数组的对象都有一个length属性,因此还可以对这个属性进行解构赋值

640.png


数值和布尔值的解构赋值

      解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。

640.png

      因为123不是对象或数组,所以转化为对象,toStr就赋值了Number.toString()方法。

由于undefined和null无法转为对象,所以对它们进行解构赋值时都会报错

640.png

函数参数的解构赋值


640.png


圆括号问题

      ES6的规则是,只要有可能导致解构的歧义,就不得使用圆括号,但是这条规则实际上不那么容易辨别,处理起来相当麻烦。因此建议,只要有可能,就不要在模式中放置圆括号


不能使用圆括号的情况

变量声明语句


640.png


函数参数


640.png


可以使用圆括号的情况

      可以使用圆括号的情况只有一种:赋值语句的非模式部分可以使用圆括号


解构赋值的用途

交换变量的值

640.png

从函数返回多个值

640.png

函数参数的定义

640.png

提取JSON数据

640.png

遍历Map结构

      任何部署了Iterator接口的对象都可以用for…of循环遍历。Map结构原生支持Iterator接口,配合变量的解构赋值获取键名和键值非常方便

640.png

输入模块的指定方法

640.png

      小伙伴们今天的学习就到这里了,如果觉得本文对你有帮助的话,欢迎转发,评论,收藏,点赞!!!

目录
相关文章
|
2月前
|
JavaScript
ES6之变量的解构赋值
ES6之变量的解构赋值
|
2月前
|
JavaScript 前端开发
变量和对象的解构赋值
变量和对象的解构赋值
26 0
|
2月前
|
JSON JavaScript 前端开发
ES6 变量的解构赋值
ES6 变量的解构赋值
|
2月前
|
JavaScript
解构赋值及其原理
解构赋值及其原理
35 1
|
2月前
|
移动开发 前端开发 JavaScript
web前端之ES6的实用深度解构赋值方法、复杂的解构赋值
web前端之ES6的实用深度解构赋值方法、复杂的解构赋值
40 1
|
8月前
|
JavaScript 前端开发
什么是解构赋值?
什么是解构赋值?
28 1
|
7月前
ES6学习(二)—变量的解构赋值
ES6学习(二)—变量的解构赋值
|
8月前
变量解构赋值
变量解构赋值
27 0
|
10月前
|
JSON JavaScript 前端开发
ES6解构赋值有这一篇就够了
ES6解构赋值有这一篇就够了
ES6-变量的解构赋值
前言 大家好,今天和大家分享一下ES6中变量的解构赋值。 一、解构赋值是什么? ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值,这被称为解构赋值