ES6参数的处理

ES6参数的处理:

1、参数默认值问题：基本使用方法；在默认值中使用其他变量；

2、剩余运算符（Rest）：把散列元素的变成一个集合；使用场景：在函数或解构中使用；

3、扩展运算符：把一个集合变成散元素；函数参数传递，数组和对象的复制；

4、模拟命名参数：使用对象的解构赋值来模拟命名参数；

参数默认值问题：

①基本使用方法：

    function fn(a, b, c) {
            console.log(a, b, c);
        }
        fn(1, 2, 3);
//结果：1 2 3
//若fn()调用时，没有传参，则结果为：undefined undefined undefined 

 注：将undefined赋值给变量时，就可以走默认值。

function fn(a=1, b=2, c=3) {
         console.log(a, b, c);
         }
         fn()
//结果为：1 2 3
//若fn()调用时传一个参数：fn(10);则结果为：10 2 3

       function value() {
            return 20;
        }
        //惰性求值
        function fn(a = value(), b = 2, c = 3) {
            console.log(a, b, c)
        }
        fn();
        // 注：只有当fn()中不给a传实参时，a的值默认为undefined，value()函数才会被调用。

②在默认值中使用其他变量：

     function fn(a = 1, b = a) {
            console.log(a, b);
        }
        fn();
//注：参数赋值顺序为从左到右；先a=1，b=a；若交换顺序，程序报错。

注： fn()函数调用时没有传参，则会走默认赋值，a=c；

涉及到函数参数作用域问题：参数会获取函数外部变量值，无法获取函数内部变量。

        const c = 3;
        function fn(a = c, b = 1) {
            const c = 4;
            alert(a);
            alert(b);
        }
        fn();
//结果为：3 1

剩余运算符：

①把散列元素的变成一个集合：

 // 获取参数，剩余运算符
 // 将1——a;2,3——arr
    function add(a, ...arr) {
        alert(arr);
     }
    add(1, 2, 3); 
//结果：a=1;arr=[2,3];
//注：剩余运算符是将剩余的参数整合给变量/数组arr

②在函数或解构中使用：

//在数组的解构赋值中使用：  
 let [a, ...b] = [1, 2, 3];
//结果：a=1;b=[2,3]

//在对象的解构赋值中使用：
 let {a, b,...c} = {a:1,b:2,c:3,d:4};
//结果：a=1;b=2;c={c:3,d:4}

扩展运算符：

①把一个集合变成散元素：

 function fn(a, b, c) {
            console.log(a, b, c)
        }
      fn([1, 2, 3]);
//结果：a=[1,2,3];  b 、c为undefined

解决上述问题：

  function fn(a, b, c) {
          console.log(a,b,c)
        }
   fn(...[1, 2, 3]);
//结果为：a=1;b=2;c=3

②函数参数传递，数组和对象的复制：

数组的复制：

//浅拷贝
let arr=[1,2,3];
let arr2=[...arr];
arr.push(4);
alert(arr2);
//结果为：arr、与arr2指向不同空间
//arr=[1,2,3,4]
//arr2=[1,2,3]

对象的复制：

   let obj = {
            a: 1,
            b: 2,
            c: 3
        }
        let obj2 = {
            ...obj
        }
        obj.d = 4;

结果：

模拟命名参数：

在Python中：命名参数：fn(start=1,end=2)

类似地，我们可以模拟命名参数:

 function fn({start,end}){
      alert(start);
  }
 fn({start:1,end:2})
//提升语义化

function fn({start,end}){
   alert(start);
 }
 fn({})
//结果为：undefined，走向了默认赋值
//注：若直接写： fn()，会报错
  

 解决上述问题：

function fn({start,end}={}){
   alert(start);
 }
 fn()