es6学习之解构时应该注意的点


Posted in Javascript onAugust 29, 2017

前言

本文主要给大家介绍了关于在es6解构时需要注意的一些事项,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

如果要将一个已经声明的变量用于解构赋值,必须非常小心。

// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error

上面代码的写法会报错,因为 JavaScript 引擎会将{x}理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免 JavaScript 将其解释为代码块,才能解决这个问题。

// 正确的写法
let x;
({x} = {x: 1});

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

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
//这实际上说明,对象的解构赋值是下面形式的简写
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };

也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined
let obj = {
 p: [
 'Hello',
 { y: 'World' }
 ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

注意:这时p是模式,不是变量,因此不会被赋值。如果p也要作为变量赋值,可以写成下面这样。

let obj = {
 p: [
 'Hello',
 { y: 'World' }
 ]
};

let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

解构赋值时,如果等号右边是数值和布尔值,则会先转为对象

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

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

function add([x, y]){
 return x + y;
}

add([1, 2]); // 3

上面代码中,函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x和y。对于函数内部的代码来说,它们能感受到的参数就是x和y

undefined就会触发函数参数的默认值。

[1, undefined, 3].map((x = 'yes') => x);
// [ 1, 'yes', 3 ]

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
深入分析js中的constructor和prototype
Apr 07 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 #Javascript
详谈Node.js之操作文件系统
Aug 29 #Javascript
js链表操作(实例讲解)
Aug 29 #Javascript
在页面中引入js的两种方法(推荐)
Aug 29 #Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 #Javascript
使用canvas进行图像编辑的实例
Aug 29 #Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 #jQuery
You might like
PHP中英混合字符串截取函数代码
2011/07/17 PHP
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
python根据unicode判断语言类型实例代码
2018/01/17 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
Python中如何导入类示例详解
2019/04/17 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
学生干部学习的自我评价
2014/02/18 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
会议欢迎词
2015/01/23 职场文书
导游词范文
2015/02/13 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
php引用传递
2021/04/01 PHP
Python中time标准库的使用教程
2022/04/13 Python