ES6学习---解构

原创 2016年08月29日 14:27:24

什么是解构?

ES6允许按照一定模式,从数组盒对象中提取值,对变量进行赋值,称为解构,即解构赋值

在ES6之前,给变量赋值只能直接指定值,例如:var a=1;  var b=2;感觉很麻烦。。

 

在ES6中,可以给数组、对象、字符串、函数参数进行解构赋值

 

...x表示剩余的元素到数组结束,只能放在最后的位置

 

x的值为1,由于第二个没有值,所以y为undefined,z为从第二个值之后到数组结束的值,相当于slice(2)=>即为一个空数组[]

默认值,只有当数组成员为undefined时才生效

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

 

若等号右边是不可遍历的结构,则报错   eg:let [foo]=1;let [foo]={}

对象解构赋值的内部机制:先找到同名属性,然后再赋值给对应的变量

 

对于字符串的解构赋值:

会把字符串hello转化为字符数组,再分别对应赋值

还可以进行字符串长度的赋值

解构赋值的用途:

通过解构赋值,可以使变量值的交换更加方便简洁  

也可以使函数的返回多个值,并且取出他们的值也更加容易

更方便提取json数据

感想:

解构赋值使给变量赋值更加方便,但是书写时要更加注意,嵌套的结构要一一对应,不然就会出错,但是这种方式的可读性较差,一般项目中不会使用过于复杂的解构赋值

版权声明:本文为博主原创文章,未经博主允许不得转载。

ES6新特性-------解构、参数、模块和记号(续)

六、解构   解构提供了一个方便的地从对象或数组中提取数据的方法,请看下面的例子: 1 2 3 4 5 6 7 ...
  • hsany330
  • hsany330
  • 2016年11月30日 16:49
  • 341

深入浅出ES6(六):解构 Destructuring

什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这种赋值语法极度简洁,同时还比传统的属性访问方法更为清晰。 通常来说,你很可能这样访问数组中的前三个元...
  • lgh1117
  • lgh1117
  • 2016年04月28日 23:08
  • 966

ES6——Day3(字符串的解构赋值+函数参数解构赋值)

1、字符串也可以进行解构赋值 形成一个类似于“数组”的对象。 案例1-1:简单的字符串(类似于“数组”) const [a,b,c,d,e] ="Hello"; console.log(a);...
  • zxy9602
  • zxy9602
  • 2017年03月10日 18:07
  • 313

ES6 变量解构赋值的用途

变量的解构赋值
  • web1504
  • web1504
  • 2017年05月15日 17:21
  • 562

ES6学习——新的语法:函数参数解构

解构赋值也可以发生在函数传参的时候,ES6中函数参数的灵活性大大提高了。函数参数的解构既可以用数组形式,也可以用对象形式,先看两个简单的例子: function foo( [ x, y ] ) { ...
  • kittyjie
  • kittyjie
  • 2016年01月01日 15:56
  • 6525

ECMAScript6(ES6)标准之解构赋值语法及应用

在七种方案解决JavaScript交换两个变量值的问题中 我写的最后一种方案就是用到了ES6的解构赋值语法[a, b] = [b, a]下面我来详细说明一下什么是解构赋值数组解构基本概念按照一定模式...
  • q1056843325
  • q1056843325
  • 2016年12月18日 20:53
  • 1902

ECMAScript 6 学习系列课程 (ES6 默认值和解构赋值的使用)

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。对于ES5标准,我们定义一个变量,需要这样写var a = 1; var b = 2; var...
  • jiangbo_phd
  • jiangbo_phd
  • 2016年07月12日 14:59
  • 1988

ES6学习——新的语法:数组解构(Array Destructuring)

上一篇文章讲了Object的解构,这篇讲一下Array的解构,概念大同小异,只是写法会有一些不同,先看个简单的例子: let [x, y] = ['a', 'b','c']; // x = 'a'; ...
  • kittyjie
  • kittyjie
  • 2015年12月31日 10:03
  • 3235

ES6学习——新的语法:对象解构(Object Destructuring)

解构在ES6中应该是一种新的语法,在其他语言中我没怎么见到这种语法,也可以说是赋值操作的另一种形式,因为解构的整个定义都在规范的赋值操作符章节下面,有兴趣的可以看规范的12.14.5。目前浏览器对这个...
  • kittyjie
  • kittyjie
  • 2015年12月30日 16:55
  • 5604

ES6之——变量的解构赋值

一、数组的结构赋值1>、什么是解构?ES6允许我们队数组和对象中提取值,对变量进行赋值,这被叫做“解构”。 通常我们像下面这样为变量赋值:var a = 1; b = 2; c = 3...
  • u014695532
  • u014695532
  • 2016年07月03日 14:01
  • 3024
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ES6学习---解构
举报原因:
原因补充:

(最多只允许输入30个字)