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 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
jQuery.extend 函数详解
Feb 03 Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 Javascript
我所理解的JavaScript中的this指向
Sep 04 Javascript
Vue+Flask实现图片传输功能
Apr 01 Vue.js
页面缩放兼容性处理方法(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禁用cookie后session设置方法分析
2016/10/19 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
利用aardio给python编写图形界面
2017/08/21 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
Python pickle模块实现对象序列化
2019/11/22 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
建筑专业自荐信
2013/10/18 职场文书
同学聚会欢迎辞
2014/01/14 职场文书
留学经费担保书
2014/05/12 职场文书
副处级干部考察材料
2014/05/17 职场文书
企业安全生产标语
2014/06/06 职场文书
生死抉择观后感
2015/06/09 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
宣传部部长竞选稿
2015/11/21 职场文书