实用的ES特性——函数篇

http://caibaojian.com/es6/let.html
参考文档

从参考文档中提取一部分可能平时用得上的特性，针对性记忆。

1.函数默认值

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

1.1-基础用法

//ES5
function log(x, y) {
  y = y || 'World';
  console.log(x, y);
}

// ES6
function log(x, y = 'World') {
  console.log(x, y);
}

//上面两种写法输出一样
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

从上面这个例子可以看出来ES6的写法优雅很多，而且更加直观。非常实用。

除了简洁，ES6 的写法还有两个好处：首先，阅读代码的人，可以立刻意识到哪些参数是可以省略的，不用查看函数体或文档；其次，有利于将来的代码优化，即使未来的版本在对外接口中，彻底拿掉这个参数，也不会导致以前的代码无法运行。

1.2-与变量解构赋值结合

要结合对象的解构赋值基础一起看

以下是对象解构赋值的基本用法，从对象中寻找相同的key，并生成两个单独变量——x，y。

var {x, y} = {}  // x:undefined, y:undefined}
var {x, y} = {x:1,y:2,z:3} // x:1, y:2

解构赋值可以加上默认值，避免undefined出现

var {x = 1, y} = {}  // x：1, y:undefined}
var {x, y = 3} = {x:1,y:2,z:3} // x:1, y:2

再进一步，让解构赋值出现在function的参数位置。理解为从传入的对象中取出key为x，y的值，并且让x，y成为函数的参数。
通过下面的代码我们可以知道

1. 解构赋值可以从一个对象中提取部分需要的变量
2. 给解构赋值设定默认值后，传入空对象，可以得到默认值
3. 必须传入对象，不然函数会报错

function test({x = 3,y}){
  console.log('x:' + x +';y:' + y)
}

test({}) // x:3;y:undefined 
test({x:1,y:2}) // x:1;y:2
test() // Error: Uncaught TypeError: Cannot destructure property 'x' of 'undefined' as it is undefined.

最后，就是结合解构赋值的默认值和函数参数的默认值

function test({x, y} = {x:3,y:4}){
  console.log('x:' + x +';y:' + y)
}

test({}) // x:undefined;y:undefined
test({x:1,y:2}) // x:1;y:2
test() //x:3;y:4

function test2({x= 11,y = 12 } = {x:3,y:4}){
  console.log('x:' + x +';y:' + y)
}
test2({}) // x:11;y:12 // 传入空对象，函数默认值无效，解构赋值默认值生效。
test2({x:1,y:2}) // x:1;y:2
test2() //x:3;y:4 // 不传入对象，函数默认值生效，解构函数默认值无效。

同时利用结合解构赋值的默认值和函数参数的默认值，可以保证函数在传入空对象，或者不传入时，都有默认值，避免程序出错，同时还可以根据传入为空或空对象，给于不同的默认值。

（待完善）