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框架myJSFrame附API使用帮助
Jun 28 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
简单实现js倒计时功能
Feb 13 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
vue 父组件调用子组件方法及事件
Mar 29 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
JavaScript工具库MyTools详解
Jan 01 Javascript
vue使用nprogress加载路由进度条的方法
Jun 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
无限级别菜单的实现
2006/10/09 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
JavaScript 事件查询综合
2009/07/13 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
javaScript动态添加Li元素的实例
2018/02/24 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
tensorflow实现简单的卷积网络
2018/05/24 Python
解决yum对python依赖版本问题
2019/07/05 Python
Python面向对象封装操作案例详解
2019/12/31 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
python 用struct模块解决黏包问题
2020/11/07 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
计算机专业自荐信
2013/10/14 职场文书
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
计算机专业大学生的自我评价
2013/11/14 职场文书
幼儿园教师培训方案
2014/02/04 职场文书
总会计师岗位职责
2014/02/19 职场文书
教师群众路线心得体会
2014/11/04 职场文书
学生个人评语大全
2015/01/04 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js