es6中变量的解构赋值与其在函数中的应用

最近在用react写项目，也用到了redux，想要提高自己的技术（逼格），所以就看了下react-reudx的源码。想着平时用到最多的就是connect方法就点进去看了下，发现了一处代码非常难理解，代码如下：

重点在函数的参数上，这种传值方式还真是没见过，但是见多识广的我并没有慌张，猜想这应该是es6的新特性，多方查找之后终于弄清楚是解构赋值。

解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。（出自阮一峰的《ECMAScript 6 入门》）

比如：

let {a, b} = {a: 1, b: 2}

// 这段代码等同于：
let a = 1
let b = 2

而且解构可以制定默认值：

 

let {c, d = 4} = {c: 3}
console.log(c, d) // 3 4

还有一点，在es6中函数的参数可以设定默认值

function func(x, y = 0){
  console.log(y) // 0
}

知道这些，对于我们理解这段代码的函数参数部分就足够了

 function connect(
    mapStateToProps,
    mapDispatchToProps,
    mergeProps,
    {
      pure = true,
      areStatesEqual = strictEqual,
      areOwnPropsEqual = shallowEqual,
      areStatePropsEqual = shallowEqual,
      areMergedPropsEqual = shallowEqual,
      ...extraOptions
    } = {}
  ) {
    // some code...
  }

第四个参数的意思就是，在使用connect函数时如果不传这个参数，就使用默认值{}对前面的参数就行解构赋值，由于这是一个空对象，所以参数全部使用默认值。

我可能解释的不是很清楚，或是其中可能有理解错误的地方，大家可以看看阮一峰大神的博客进行详细深入的理解。