ES6解构赋值学习总结

levinit 发布于2019-08-23 13:59 / 1172人阅读

摘要：提供了解构赋值的方式，这样子在赋值多个变量或者进行注释时可以方便很多，不同场景下也有很多新的应用，个人常使用的有数组的解构赋值，对象的解构赋值和函数参数的解构赋值，函数参数的解构赋值之前总结过，这里写下数组的和对象的简单总结吧函数参数的解构

ES6提供了解构赋值的方式，这样子在赋值多个变量或者进行注释时可以方便很多，不同场景下也有很多新的应用，个人常使用的有数组的解构赋值，对象的解构赋值和函数参数的解构赋值，函数参数的解构赋值之前总结过，这里写下数组的和对象的简单总结吧
函数参数的解构赋值总结点击这里

一、数组的解构赋值

先来个最简单的

let [a, b] = [1, 2];
a;//输出1
b;//输出2

这种模式就容易为多个变量赋值，因为等号右边是数组，所以有需要获取数组元素时，如下使用更为方便

let array = [1,2,3];
let [a, b, c] = array;
a;//输出1
b;//输出2
c;//输出3

当然，数组中的元素是不限类型的

let [a, array, c] = [1, [2,3], 4];
a;//输出1
array;//输出[2,3]
c;//输出4

另外，可将剩余元素赋值给一个变量

let [a, ...b] = [1,2,3,4];
a;//输出1
b;//输出[2, 3, 4]

其实只要等号右边具有Iterator接口均可使用解构赋值

二、对象的解构赋值

先给个最简单的例子

let {name, sex} = {name:"Jonithan", sex:"male"}
name;//"Jonithan"
sex;//"male"

这里的赋值是变量名对应属性名赋值，如果变量名与属性名没有对应上的话，则会赋值失败，如下所示

let {name, gender} = {name:"Jonithan", sex:"male"}
name;//"Jonithan"
gender;//undefined，因为没有对应属性名

其实以上写法只是如下写法的简写

let {name:name, sex:sex} = {name:"Jonithan", sex:"male"}
name;//"Jonithan"
sex;//"male"

所以其实是把对应的属性名提取出来给一个变量，所以可以这样使用

let {name:username, sex:gender} = {name:"Jonithan", sex:"male"}
username;//"Jonithan"
gender;//"male"

以上仅列出了较为简单的情况，更多具体情况查询MDN吧，或者翻看阮老师的《ES6标准入门》

idc机房托管混合云解构赋值机器学习学习总结机器学习总结 javascript学习总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99886.html

ES6学习总结（1）

摘要：返回一个对象，遍历对象自身和继承的所有可枚举属性不含，与相同和在红宝书中就已经提到过属性，表示的是引用类型实例的一个内部指针，指向该实例的构造函数的原型对象。半个月前就决定要将ES6的学习总结一遍，结果拖延症一犯，半个月就过去了，现在补起来，惭愧惭愧。阮一峰的《ES6标准入门》这本书有300页左右，除了几个新的API和js语法的扩展,真正有价值的内容并不多。所谓存在即合理，每部分的...

happyfish 2019-08-20 15:38 评论0 收藏0
ES6 学习笔记（一）let，const和解构赋值

摘要：另外对于已经声明的变量进行解构赋值时，要非常小心。因此在行首加，将其强制转化为表达式执行。由于和无法转为对象，所以对它们进行解构赋值，都会报错。 let和const let和const是es6新增的两个变量声明关键字，与var的不同点在于：（1）let和const都是块级作用域，在{}内有效，这点在for循环中非常有用，只在循环体内有效。var为函数作用域。（2）使用let和con...

iOS122 2019-08-23 15:29 评论0 收藏0
《ES6学习2》变量的解构赋值

摘要：解构赋值的分类数组解构赋值对象解构赋值字符串解构赋值数值解构赋值布尔值解构赋值函数参数解构赋值。嵌套情况默认值解构赋值允许设置默认值，当数组成员严格等于，默认值将生效。报错报错函数参数的解构赋值函数的参数也可以使用解构赋值和指定默认值 ES6可以从数组和对象中提取值，然后对变量进行赋值。解构赋值的分类：数组解构赋值、对象解构赋值、字符串解构赋值、数值解构赋值、布尔值解构赋值、函数参...

mist14 2019-08-26 13:52 评论0 收藏0
ES6系统学习----从Apollo Client看解构赋值

摘要：第四类布尔值和数值的解构赋值这类解构赋值目前为止我并未在实际开发中遇到，以后遇到会结合实际情况进行说明。解构赋值时，如果等号的邮编时数值或者是布尔值，那么他就会先转换成对象，再进行解构赋值。一：背景在前一篇关于Apollo Client 的博客中已经说明了Apollo Client 是一个强大的JavaScript GraphQL 客户端。既然是一个JavaScript的客户端，他...

Miyang 2019-08-23 15:12 评论0 收藏0
ES6学习第二章变量的解构赋值

摘要：前言前言该篇笔记是第二篇变量的解构赋值。这一章原文链接变量的解构赋值解构赋值解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。对象的解构赋值是根据对象值进行匹配。前言该篇笔记是第二篇变量的解构赋值。这一章原文链接：变量的解构赋值解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。解构赋值是对赋值运...

番茄西红柿 2021-11-24 09:38 评论0 收藏2637