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 相关文章推荐
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
jquery实用代码片段集合
Aug 12 Javascript
Ajax 数据请求的简单分析
Apr 05 Javascript
javascript级联下拉列表实例代码(自写)
May 10 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
swiper实现异形轮播效果
Nov 28 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 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
PHP实现下载功能的代码
2012/09/29 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
Jquery选择子控件"大于号"和" "区别介绍及使用示例
2013/06/25 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
js实现开关灯效果
2020/03/30 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
Python迭代和迭代器详解
2016/11/10 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
盛大笔试题
2016/11/05 面试题
集体备课反思
2014/02/12 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
毕业实习计划书
2015/01/16 职场文书
2015年维修工作总结
2015/04/25 职场文书
答谢酒会主持词
2015/07/02 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
oracle重置序列从0开始递增1
2022/02/28 Oracle
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS