聊聊 ES6 解构(下) | 8月更文挑战

129 阅读3分钟

大家好,我是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(下)》第二章,部分有自己改写

关于解构我想说的,应该已经说完了,今晚可以安心睡个觉了。

鉴于我自身还是个小菜鸟,文中如果有什么错误的地方,还请大佬在评论区告诉我,我及时作出改正,以免误人子弟。

当然你也可以加我个微信,咱俩一块儿吹牛逼呗?😃😃😃