美文网首页
js变量的解构赋值

js变量的解构赋值

作者: 鸡毛菜菜子 | 来源:发表于2020-04-13 14:03 被阅读0次

参考链接:https://es6.ruanyifeng.com/#docs/destructuring

一、符合Iterator接口类型的结构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。

如果解构不成功,变量的值就等于undefined.

如果等号的右边不是数组(或者严格地说,不是可遍历的结构,参见《Iterator》一章),那么将会报错。es6中有三类结构生来就具有Iterator接口:数组、类数组对象、Map和Set结构。事实上,只要某种数据结构具有 Iterator 接口,都可以采用数组形式的解构赋值。【javascript】es6中的遍历器接口Iteratorhttps://www.cnblogs.com/toulon/p/6403075.html

不可遍历结构

解构赋值允许指定默认值。1.只有当一个数组成员严格等于undefined,默认值才会生效。

上面代码中,如果一个数组成员是null,默认值就不会生效,因为null不严格等于undefined。

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

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

上面最后一个表达式之所以会报错,是因为x用y做默认值时,y还没有声明。

二、对象的解构赋值

对象,各成员并没有一个确定的顺序,所以遍历时先遍历谁后遍历谁并不确定,所以对象并没有不知Iterator接口。所以对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

解构失败,变量值为undefined

    1.对象的解构赋值,可以很方便地将现有对象的方法,赋值到某个变量。

2.如果变量名与属性名不一致,必须写成下面这样。

foo是匹配模式,baz才是变量。

3.如果对一个已声明的变量进行解构,需要使用()将解构部分的代码包围起来,防止引擎会将{}块作为代码块运行。

三、字符串的解构赋值

1、字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。

2、类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值。

四、数值和布尔型的解构赋值

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

上面代码中,数值和布尔值的包装对象都有toString属性,因此变量s都能取到值。

五、函数参数的解构赋值

函数参数的解构也可以使用默认值。

六、作用

1.交换变量值

2.从函数返回多个值

3.函数参数的定义

4.提取JSON数据

5.函数参数默认值

6.遍历Map结构

7.输入模块的指定方式

相关文章

  • 变量的解构赋值

    本文通过学习阮一峰的博客,外加自己的理解,整理了一下我对js变量的解构赋值的理解。 数组的解构赋值 对象的解构赋值...

  • 解构赋值

    解构赋值:ES6 中新增了变量赋值的方式,从数组和对象中提取值,对变量进行赋值。 单独赋值给变量,解构赋值。 解构...

  • ES6学习-变量的解构赋值

    何为解构,即结构分解。 1.数组的解构赋值 在js中,我们会经常给变量赋值,需要一个一个赋值。如 es5赋值 对比...

  • js变量的解构赋值

    参考链接:https://es6.ruanyifeng.com/#docs/destructuring 一、符合I...

  • ES6笔记(解构赋值)

    ES6笔记(解构赋值) 解构赋值 变量的解构: 解构赋值允许指定默认值。 解构赋值必须保证赋值方 被赋值方类型一...

  • 变量的解构赋值

    数组的解构赋值: 解构,就是从数组和对象中提取值,然后对变量进行赋值 解构赋值: 解构不成功,变量的值就等于und...

  • ES6系列之变量的解构赋值

    本篇目录: 数组的解构赋值变量声明并赋值时的解构变量先声明后赋值时的解构不完全解构默认值交换变量解析一个从函数返回...

  • 解构赋值

    解构赋值 数组的解构赋值 嵌套,默认值,展开符 对象的解构赋值 对象解构赋值的本质与简写 对象解构的模式与变量 对...

  • 『ES6脚丫系列』变量的解构赋值

    『ES6脚丫系列』变量的解构赋值 第一章:变量的解构赋值的概念 【01】Q:什么是变量的解构赋值?有哪些方式? 吃...

  • ES6的解构赋值

    一、前言 什么是“解构赋值”呢?就是从数组或者对象中取值,对变量进行赋值,这就是变量的解构赋值。 二、数组的解构赋...

网友评论

      本文标题:js变量的解构赋值

      本文链接:https://www.haomeiwen.com/subject/krnwmhtx.html