大家好,我是Chuck,一个不那么正经却热爱前端的孩儿。
昨晚睡觉的时候,突然想起来点事情,点开了掘金,一看上文,这是什么东西?怎么忘了好多东西呢?
这篇文章接上文 聊聊 ES6 解构|8月更文挑战。 主要谈一下我们使用解构还有哪些主要的应用场景?
先上个脑图给各位大哥大姐说一下大体。
默认值赋值
就像函数的参数可以有默认值外,我们解构时也可以使用默认值,当解构的值不存在时,便会应用我们的默认值。
大家需要注意的是,如果默认值使用一个对象/数组的话,记得千万不要绕晕自己哦,因为这样子的代码可能会导致可读性极速下降!
正确答案是: x.y = 300, y.y = 400, z.y = 42
没看出来的同学可以多看几遍聊聊 ES6 解构|8月更文挑战。,如果还是不太清楚,欢迎在下方留言,也可以在文末加我微信一起探讨。
解构实参
首先来想一个问题,当我们调用一个函数的时候,实参是怎么传递给形参的呢?如果形参与实参是一个赋值的过程,那么自然而然的它也是可以解构的!!!
来看一个🌰
解构数组可以,那解构对象必然也可以,而且解构对象还会有一个意想不到的惊喜,我们继续往下看!
利用对象解构,我们甚至可以使用具名参数了(这个也太棒了!!)同时这也意味着我们得到了可选参数的功能,不想传递的参数直接就pass!!
值得注意的是,解构实参的时候,嵌套解构,默认值等等都可以使用,甚至也可以和ES6新增的 ... 一起使用!
嵌套解构在此我就不唠叨了,省的显得我很唠叨,这里重点说一下默认值,这个地方特别容易出错?怎么说呢?来看一段代码:
仔细看,看完之后你一定是这个表情
我看到的时候也是一脸迷惑,不过没关系,下面有两张图给大家解释一下为什么会出现这个情况:
因此,通过这个🌰,我们一定要意识到,搞清楚解构的默认值和参数的默认值是非常重要的!
解构并重组
突然有一天老板找到你说:XXX,给我实现一下这个需求。搞不定别想下班,让你天天摸鱼!
需求是:你有两个配置对象,一个是 userConfig ,另一个是默认的配置 defaultConfig, userConfig你需要在保留userConfig内容的同时在userConfig上面添加defaultConfig的一些默认属性。
简而言之就是 userConfig 上面有的属性还保留,没有的属性就采用defaultConfig的属性。
看完需求,你会心一笑,就这?
一个 Object.assign() 之后,你转身就要下班!
突然老板来了说,Object.assign() 不行,假如defaultConfig有一个options的对象,那么Object.assign()只能是浅拷贝,不行,继续做!!!
可恶,要怎么办呢?可以用解构来做!!!
let defaultConfig = {
options: {
remove: true,
enable: false,
instance: {}
},
log: {
warn: true,
error: true
}
};
let userConfig = {
options: {
remove: false,
instance: null
}
};
({
options: {
remove = defaults.options.remove,
enable = defaults.options.enable,
instance = defaults.options.instance
} = {},
log: {
warn = defaults.log.warn,
error = defaults.log.error
} = {}
}) = defaultConfig;
userConfig = {
options: { remove, enable, instance },
log: { warn, error }
};
// 以上作法会在全局作用域暴露一些无用的变量,更好的做法是应用ES6的块作用域
// 在最外层添加一个 {}
{
({
options: {
remove = defaults.options.remove,
enable = defaults.options.enable,
instance = defaults.options.instance
} = {},
log: {
warn = defaults.log.warn,
error = defaults.log.error
} = {}
}) = defaultConfig;
userConfig = {
options: { remove, enable, instance },
log: { warn, error }
};
}
本文代码来自《你不知道的JavaScript(下)》第二章,部分有自己改写
关于解构我想说的,应该已经说完了,今晚可以安心睡个觉了。
鉴于我自身还是个小菜鸟,文中如果有什么错误的地方,还请大佬在评论区告诉我,我及时作出改正,以免误人子弟。
当然你也可以加我个微信,咱俩一块儿吹牛逼呗?😃😃😃