博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
翻译: JavaScript中对象解构的3种实际应用
阅读量:5891 次
发布时间:2019-06-19

本文共 1752 字,大约阅读时间需要 5 分钟。

(渣渣翻译,如果看翻译不开心可以看->, )

现在你可能非常熟悉js中解构的概念了!解构这个概念来自2015年ES6草案, 但如果你需要更深一步的了解它, Mozilla有一篇更深入的文章说明它是如何工作的。(文章底部)

但是,了解解构如何工作并不等于我们了解了如何使用它。使用这三个解构模式可以让你的代码更加清晰, 更强大, 更具可读性。

Named Function Arguments (命名函数参数)

相较于我们通过传入参数的位置来控制参数,解构模式用于形式参数是一个很好的代替方式.你只需按名称指定参数,而不是按照与函数签名相同的顺序排序参数。例如,在Python中:

def sum(a=1, b=2, c=3):    return a + b + csum(b=5, c=10)复制代码

就像你所看到的一样, 参数的顺序并不是问题, 你通过名字指定了他们。命名参数相较于基于位置的参数命名有以下的好处:

  1. 调用函数时, 可以省略一个或者多个参数
  2. 当传参的时候,顺序并不是问题
  3. 调用可能存在于其他地方的函数时,代码更具可读性

虽然JavaScript中不存在真正的命名参数,但我们可以使用解构模式来实现所有3个相同的好处。这是和上面python相同功能的代码, 但是在js中我们可以这样:

const sum = ({a=1, b=2, c=3}) => {    return a + b + c;}sum({
b: 5, a: 1}); // 9复制代码

这种模式符合我们命名参数的所有目标。我们能够省去参数c,顺序无关紧要,我们通过名称引用它们来分配我们的参数。这一切都可以通过对象解构来实现。

Cleanly Parse a Server Response (清晰解析服务响应)

通常我们只关注服务响应内容里的data,或者只关注在data中的一个特定字段。在这个例子中,你可以使用解构来仅获取该字段的值,同时忽略服务器通常发回的许多其他内容。这是一个代码示例:

const mockServer = () => {    return new Promise((resolve, reject) => {        setTimeout(() => {            resolve({                'status': 200,                'content-type': 'application/json',                'data': {                    dataInfo: 42                }            })        }, 1000);    })}mockServer().then(({data: {dataInfo = 100 }}) => {    console.log(dataInfo);})复制代码

此模式允许您在解析参数时从对象中提取值。你还可以自由的设置默认值!

Setting Default Values During Assignment (在赋值的时候给默认值)

给变量或常量赋值时的常见情况是,如果范围中当前不存在时,则给一个默认值。

在没有解构之前, 你可能通过以下代码来实现这个功能:

var nightMode = userSettings.nightMode || false;复制代码

但这需要为每个赋值写一行代码。通过解构,您可以同时处理所有的赋值及提供默认值。

const userSettings = { fontSize: 'large', nightMode: true };const {    nightMode = false,    language = 'en',    fontSize = 'normal'} = userSettings;console.log(nightMode, language, fontSize);复制代码

解构模式也能应用于react组件中的state.

我希望你能够将一些这些模式应用到你的代码中!查看下面的链接,了解有关解构的更多信息。

(完)

转载地址:http://iobsx.baihongyu.com/

你可能感兴趣的文章
jQuery EasyUI API 中文文档 - 组合(Combo)
查看>>
10个关于 Dropbox 的另类功用(知乎问答精编)[还是转来了]
查看>>
Oracle体系结构
查看>>
用Modelsim仿真QII FFT IP核的时候出现的Error: Illegal target for defparam
查看>>
javascript Error对象详解
查看>>
nc 局域网聊天+文件传输(netcat)
查看>>
每天一个linux命令(25):linux文件属性详解
查看>>
go微服务框架go-micro深度学习(三) Registry服务的注册和发现
查看>>
python 重载方法有哪些特点 - 老王python - 博客园
查看>>
在Fedora8上安装MySQL5.0.45的过程
查看>>
设计模式之命令模式
查看>>
android 测试 mondey
查看>>
Spring AOP项目应用——方法入参校验 & 日志横切
查看>>
用Fiddler或Charles进行mock数据搭建测试环境
查看>>
使用REST-Assured对API接口进行自动化测试
查看>>
GitHub发布史上最大更新,年度报告出炉!
查看>>
王潮歌跨界指导HUAWEI P20系列发布会 颠覆传统 眼界大开!
查看>>
王高飞:微博已收购一直播 明年一季度重点是功能与流量打通
查看>>
趣头条发行区间7至9美元 预计9月14日美国上市
查看>>
新北市长侯友宜:两岸交流应从隔壁最亲近的人开始
查看>>