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 相关文章推荐
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
浅谈js中变量初始化
Feb 03 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 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
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
php生成rss类用法实例
2015/04/14 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
Js 中debug方式
2010/02/07 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
使用python实现个性化词云的方法
2017/06/16 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
创业计划书的写作技巧及要点
2014/01/31 职场文书
求职简历自我评价范例
2014/03/12 职场文书
法人委托书范本
2014/09/15 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python