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 相关文章推荐
!DOCTYPE声明对JavaScript的影响分析
Apr 12 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
Vue计算属性的学习笔记
Mar 22 Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
JavaScript制作3D旋转相册
Aug 02 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维护文件系统
2006/10/09 PHP
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
php编写的简单页面跳转功能实现代码
2013/11/27 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
js获取height和width的方法说明
2013/01/06 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
实例分析javascript中的异步
2020/06/02 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
python代码区分大小写吗
2020/06/17 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
python中pdb模块实例用法
2021/01/15 Python
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
杭州联环马网络笔试题面试题
2013/08/04 面试题
追悼会子女答谢词
2014/01/28 职场文书
离职报告范文
2014/11/04 职场文书
成绩单家长意见
2015/06/03 职场文书
Python学习之迭代器详解
2022/04/01 Python
Redis批量生成数据的实现
2022/06/05 Redis
Python四款GUI图形界面库介绍
2022/06/05 Python