ES6中参数解析

---

https://segmentfault.com/a/1190000008594196

扩展运算符(…)

var arr = [1, 3, 20]
// 可以不继续使用apply()方法
console.log(Math.max(...arr))//20

// 可以很好的和构造函数一起使用
new Date(...[2016, 5, 6]); // //Mon Jun 06 2016 00:00:00 GMT+0800 (中国标准时间)

REST 参数

rest 参数和扩展运算符虽然一样的语法，在这里你就可以看出作者强调的 arguments 和 parameters 的区别了。扩展运算符用于函数调用的参数（arguments）中，而 rest 参数用于函数声明的参数（parameters）中。

1. rest 参数和扩展运算符是一样的语法，但是他不是将数组展开成一个个的参数，而是将一个个参数转换为数组。

   function Foo(...options) {
     console.log(options)// 1,2,1,3
   }
   Foo('1', '2', [1, 3])

2. 如果没有实参传递，将被视为空数组[]

   function Foo(...options) {
     console.log(options.length) // 0
   }
   Foo()

3. 好处用在函数的参数是可变的时候，但是不能无限制的使用,他只能是最后一个参数，并且函数声明必须只有一个rest参数

   • 不是最后一个声明参数时的问题

     function Foo(...options, b) {
       console.log(options, b)
     }
     Foo('q', 1)// SyntaxError: parameter after rest parameter

   • 不止一个rest参数时的问题

     function Foo(...options1, ...options2) {
       console.log(options1, options2)
     }
     Foo('q', 1)// SyntaxError: parameter after rest parameter

默认值

1. es5中可以使用||实现默认值

   function Foo(param1, param2) {
     param1 = param1 || 10
     param2 = param2 || 9
     console.log(param1, param2) //10, 9
   }
   Foo()

缺陷：这个函数中是通过检查传入参数是否是undefined来考虑赋值为默认值，但是如果传入是0或者null时，就要另外做判断了。

1. ES6 中的默认参数

   function Foo(param1 = 10, param2 = 9) {
     console.log(param1, param2)
   }
   Foo()//10, 9
   Foo(0, null)// 0, null

2. 默认参数另一个有意思的特性是在方法声明是可以引用其他参数和变量作为默认参数，javascript是在调用的时候才计算默认参数的

   function myFunction(a=10, b=a) {
        console.log('a = ' + a + '; b = '  + b);
   }
   myFunction();     // a=10; b=10
   myFunction(22);    // a=22; b=22
   myFunction(2, 4);    // a=2; b=4

解构赋值

解构赋值是 ES6 的新特性，让我们可以从数组或者对象中提取值并赋值给变量，语法上类似于对象和数组字面量

1. es5中经常使用配置对象来处理大量的可选参数，但是缺陷是在调用的时候才能看到参数的个数

   function initOptions(options) {
     var name = options.name,
         age = options.age,
         image = options.image;
   	//   init code
   }
   var options = {
     name: '张三',
     age: 22,
     image: '/a.png'
   }
   initOptions(options)

2. es6中我们可以很清晰的看到传参的个数

   function initOptions({name, age, image}) {
   
   	//   init code
     console.log(name, age, image)
   }
   var options = {
     name: '张三',
     age: 22,
     image: '/a.png'
   }
   initOptions(options)

3. 数组的解构赋值

   let [a, b] = [1, 2]

4. 对象的解构赋值

   //对象的属性没有次序，变量必须与属性同名，才能取到正确的值
   let obj = {
     foo: 'aaa',
     bar: 'bbbb',
     tes: '1111'
   }
   let {foo, bar} = obj