全网整合营销服务商

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

免费咨询热线: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++中引用和指针有什么区别?(代码说明)  大同网页,大同瑞慈医院官网?  新网站制作渠道有哪些,跪求一个无线渠道比较强的小说网站,我要发表小说?  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt?  独立制作一个网站多少钱,建立网站需要花多少钱?  如何在IIS管理器中快速创建并配置网站?  如何在VPS电脑上快速搭建网站?  制作网站的公司有哪些,做一个公司网站要多少钱?  如何彻底卸载建站之星软件?  如何获取免费开源的自助建站系统源码?  北京的网站制作公司有哪些,哪个视频网站最好?  如何设计高效校园网站?  建站与域名管理如何高效结合?  电脑免费海报制作网站推荐,招聘海报哪个网站多?  网站制作的步骤包括,正确网址格式怎么写?  如何在IIS中新建站点并配置端口与物理路径?  如何用PHP工具快速搭建高效网站?  nginx修改上传文件大小限制的方法  如何在宝塔面板创建新站点?  c# 在ASP.NET Core中管理和取消后台任务  公司网站制作需要多少钱,找人做公司网站需要多少钱?  如何快速打造个性化非模板自助建站?  高防网站服务器:DDoS防御与BGP线路的AI智能防护方案  如何规划企业建站流程的关键步骤?  交易网站制作流程,我想开通一个网站,注册一个交易网址,需要那些手续?  已有域名建站全流程解析:网站搭建步骤与建站工具选择  如何使用Golang安装API文档生成工具_快速生成接口文档  建站之星好吗?新手能否轻松上手建站?  常州自助建站工具推荐:低成本搭建与模板选择技巧  建站之星安装路径如何正确选择及配置?  黑客如何利用漏洞与弱口令入侵网站服务器?  保定网站制作方案定制,保定招聘的渠道有哪些?找工作的人一般都去哪里看招聘信息?  广州网站设计制作一条龙,广州巨网网络科技有限公司是干什么的?  JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)  学校为何禁止电信移动建设网站?  XML的“混合内容”是什么 怎么用DTD或XSD定义  建站主机如何选?高性价比方案全解析  长沙企业网站制作哪家好,长沙水业集团官方网站?  网站制作难吗安全吗,做一个网站需要多久时间?  制作充值网站的软件,做人力招聘为什么要自己交端口钱?  如何用花生壳三步快速搭建专属网站? 

您的项目需求

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