全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:400-708-3566

es6学习之解构时应该注意的点

前言

本文主要给大家介绍了关于在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 ]

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。


# es6解构  # es6的解构  # es6的解构赋值  # ES6知识点整理之函数数组参数的默认值及其解构应用示例  # 解析JavaScript的ES6版本中的解构赋值  # 深入浅出讲解ES6的解构  # ES6解构赋值实例详解  # 深入理解ES6之数据解构的用法  # ES6解构赋值的功能与用途实例分析  # ES6学习之变量的解构赋值  # ES6新特性之解构、参数、模块和记号用法示例  # 基于ES6作用域和解构赋值详解  # ES6 对象的新功能与解构赋值介绍  # ES6知识点整理之数组解构和字符串解构的应用示例  # 的是  # 是一个  # 就会  # 也要  # 说了  # 不多  # 但在  # 将其  # 要注意  # 给大家  # 然后再  # 可以使用  # 要将  # 那一刻  # 这篇文章  # 表面上  # 报错  # 谢谢大家  # 会将  # 则会 


相关文章: c# await 一个已经完成的Task会发生什么  建站之星好吗?新手能否轻松上手建站?  如何通过FTP服务器快速搭建网站?  建站之星导航如何优化提升用户体验?  交易网站制作流程,我想开通一个网站,注册一个交易网址,需要那些手续?  建站之星伪静态规则如何设置?  佛山企业网站制作公司有哪些,沟通100网上服务官网?  建站之星如何防范黑客攻击与数据泄露?  广州网站设计制作一条龙,广州巨网网络科技有限公司是干什么的?  香港服务器建站指南:免备案优势与SEO优化技巧全解析  公司网站建设制作费用,想建设一个属于自己的企业网站,该如何去做?  如何在阿里云域名上完成建站全流程?  如何在腾讯云服务器快速搭建个人网站?  武汉网站制作费用多少,在武汉武昌,建面100平方左右的房子,想装暖气片,费用大概是多少啊?  网站设计制作公司地址,网站建设比较好的公司都有哪些?  建站主机选哪种环境更利于SEO优化?  Python如何创建带属性的XML节点  商务网站制作工程师,从哪几个方面把握电子商务网站主页和页面的特色设计?  电视网站制作tvbox接口,云海电视怎样自定义添加电视源?  如何在阿里云通过域名搭建网站?  官网自助建站系统:SEO优化+多语言支持,快速搭建专业网站  如何快速生成ASP一键建站模板并优化安全性?  大连企业网站制作公司,大连2025企业社保缴费网上缴费流程?  如何通过万网虚拟主机快速搭建网站?  如何配置WinSCP新建站点的密钥验证步骤?  攀枝花网站建设,攀枝花营业执照网上怎么年审?  如何做网站制作流程,*游戏网站怎么搭建?  如何选择CMS系统实现快速建站与SEO优化?  如何在万网开始建站?分步指南解析  制作公司内部网站有哪些,内网如何建网站?  如何在建站之星绑定自定义域名?  关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)  如何挑选最适合建站的高性能VPS主机?  青岛网站建设如何选择本地服务器?  企业网站制作公司网页,推荐几家专业的天津网站制作公司?  Python多线程使用规范_线程安全解析【教程】  网站插件制作软件免费下载,网页视频怎么下到本地插件?  如何通过虚拟机搭建网站?详细步骤解析  早安海报制作网站推荐大全,企业早安海报怎么每天更换?  云南网站制作公司有哪些,云南最好的招聘网站是哪个?  网站建设设计制作营销公司南阳,如何策划设计和建设网站?  建站主机如何选?高性价比方案全解析  家具网站制作软件,家具厂怎么跑业务?  如何通过宝塔面板实现本地网站访问?  如何快速搭建高效服务器建站系统?  如何获取免费开源的自助建站系统源码?  专业的网站制作设计是什么,如何制作一个企业网站,建设网站的基本步骤有哪些?  如何获取PHP WAP自助建站系统源码?  移民网站制作流程,怎么看加拿大移民官网?  免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况? 

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。