前端提高篇(122):es6参数的处理

1.参数默认值问题

基本使用方法：

1.当传入的实参不存在(严格为undefined)，则使用形参上的默认值
2.形参不仅可以接受数值字符串，还可以接受函数，当需要使用默认值时执行该函数，称为惰性求值

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

1.当有多个变量时，是从左往右解析的，右边赋值的形参不能拿到左边使用，如fn(a=b,b=1)
2.形参可以获取函数定义之前的参数，也可以获取该形参左边的形参
3.全局变量依然默认全局可用

// 在默认值中使用其他变量：
let a = 3; // 全局变量
// 形参value使用函数定义前的全局变量a
function fn(value = a){
     
    let a = 4;
    console.log("a:",a);//4
    console.log("value:",value);//3
}
fn();

// const也是如此
const b = 3; // 全局变量
function fn1(value = b){
     
    const b = 4;
    console.log("b:",b);//4
    console.log("value:",value);//3
}
fn1();

// 使用value左边的形参值
function fn2(c = 3, value = c){
     
    console.log("value:",value);//3
}
fn2();


 // 形参value报错，d is not defined
 function fn3(value = d){
     
     const d = 4;
     console.log("d:",d);//4
     console.log("value:",value);//3
 }
 fn3();

2.剩余运算符(Rest)，三个英文半角句点

1.在函数或解构中使用
在函数中，虽然arguments可以用来获取实参，但获取结果是类数组，需转为数组(Array.prototype.slice.call(arguments))，再遍历数组获得参数
2.把散列元素变成一个集合
3.放在最后写，接受剩余元素

// 剩余运算符(Rest)
// 在函数或解构中使用
// 在函数中使用，arguments仅为类数组，需转成数组后遍历，较麻烦
function fn() {
     
    var arguments = Array.prototype.slice.call(arguments)
    console.log(arguments)
}
fn(1, 2, 3); // 输出：[1, 2, 3]

// 用剩余运算符
function fn1(...arr){
     
    console.log(arr);
}
fn1(1, 2, 3); // 输出：[1, 2, 3]

// 在解构数组中使用
let [a,b,...arr] = [1,2,3,4,5];
console.log(arr); // 输出：[3, 4, 5]

// 在解构对象中使用
let {
     d, e, ...f} = {
     d:1, e:2, f:3, g:4, h:5};
console.log(f); // 输出：{f:3, g:4, h:5}

3.扩展运算符，三个英文半角句点

1.把一个集合变成散列元素
2.函数参数传递
3.数组的深拷贝：之前用arr.concat()，现在用扩展运算符：[…arr]
4.对象的深拷贝

// 3.扩展运算符
// 把一个集合变成散列元素
console.log(...[1,2,3]); // 输出：1 2 3
// 函数参数传递
function fn(a,b,c){
     
    console.log(a, b, c);
}
fn(...[1,2,3]); // 将数组拆开，依次传到形参中

// 数组的深拷贝
// 不使用扩展运算符
let arr1 = [1,2,3];
let arr2 = arr1.concat();
arr2.push(4);
console.log(arr1); // 输出[1, 2, 3]

// 使用扩展运算符
let arr3 = [1,2,3]
let arr4 = [...arr3];
arr4.push(4);
console.log(arr3); // 输出[1, 2, 3]

// 对象的深拷贝
let obj = {
     
    a:1,
    b:2,
    c:3
}
let obj2 = {
     ...obj};
obj2.d = 4;
console.log(obj); // obj不变

4.模拟命名参数
使用对象的解构赋值来模拟实现命名参数的功能，提高代码可读性
在es6中，没有命名参数的功能，用解构赋值模拟
在python中有命名参数，是这样的：

fn(start = 1, end = 100);

把参数的含义也写上，与形参对应，即使过了很久，依然可以知道传入的实参大概什么含义

并且，使用命名参数，可以不用匹配形参在所调用方法的形参列表中的顺序，只要参数名称对应即可

// 模拟命名参数
// 使用命名参数，可以不用匹配形参在所调用方法的形参列表中的顺序，只要参数名称对应即可
// fn(start = 1, end = 100); 
// 没有用解构赋值时，想要用命名参数，形参不够语义化
function fn(option){
     
    console.log(option.start, option.end); // 输出 1 100
}
fn({
     start:1, end:100})

// 用解构赋值
// 默认传给形参的是空对象，即两个形参为undefined，此时使用默认值1 和 2
function fn1({
     start=1, end=2} = {
     }){
     
    console.log(start, end); // 输出 1 100
}
fn1({
     start:1, end:100})