JavaScript高级学习：ES6新特性05——函数的ES6扩展用法

提示：
本文为JavaScript栏目：JavaScript高级系列——ES6新特性章节 第五章

---

前言

本文讲解函数的ES6扩展用法。

---

提示：以下是本篇文章正文内容，下面案例可供参考

函数的ES6扩展用法

设置形参的默认值

ES5的方式设置形参的默认值

设置默认值方案一

function show(name, age) {
    name=name||"张三";
    age=age||20;
    console.log(name,age);

}
show();              //张三 20
show("李四");         //李四 20
show("李四",25);      //李四 25
show(false,30);       //张三 30
show("false",30);       //false 30
show("张三丰",0);      //张三丰 20  此时age的值依然是默认的20

虽然方案一有bug，但是绝大多数下，还是方案一的使用频率高

设置默认值方案二

function show(name, age) {
    if (typeof name==="undefined"){
        name="张三";
    }
    if (typeof age==="undefined"){
        age=20;
    }
    console.log(name,age);
}
show("张三丰",0);      //张三丰 0

ES6的方式设置形参的默认值

function show2(name = "张三", age = 18) {
    console.log(name,age);
}
show2();                //张三 18
show2("李四");            //李四 18
show2("张小华",20);        //张小华 20

设置默认值的参数应该放在所有形参的最后面

function show3(name, age = 18) {
    console.log(name,age);
}
show3();                //undefined 18
show3("李四");            //李四 18
show3("张小华",20);        //张小华 20

与之对比，设置默认值的参数，放在形参前面，此时给的默认值无意义

function show4(name="张三", age ) {
    console.log(name,age);
}
show4();                // 张三 undefined
show4("李四");            //李四 undefined
show4("张小华",20);        //张小华 20
// 此时给的默认值无意义
show4(undefined,20);        //张三 20

设置默认值的构造函数

function Stu(x=0,y=0) {
    this.x=x;
    this.y=y;
}
let stu=new Stu();
console.log(stu);           //Stu {x: 0, y: 0}
let stu2 = new Stu(3,5);
console.log(stu2)           //Stu {x: 3, y: 5}

配合解构赋值来设置参数的默认值

ES5写法：

function info({x, y = 5}) {
    console.log(x,y);
}
info({});     //undefined 5
info();     //报错，

这里{x,y=5}后面如果不赋值的话，参数是一个有默认值的解构表达式，不代表你的参数有默认值。

所以如果在参数中给解构赋值，那么该方法在调用的时候，一个参数都不传递就会报错

ES6写法

function info({x, y = 5}={}) {
    console.log(x,y);
}
info();     //undefined 5

完整的解构方式赋予参数默认值应该这样写：{x,y}={y:3}，但是不推荐使用。

匿名函数的length方法的运用

console.log((function () { }).length);     				//0
console.log((function (name) { }).length);  			//1
console.log((function (name,age=18) { }).length);     	//1---有默认值的参数不参与length的计算
console.log((function (name,age=18,sex) { }).length);   //1---有默认值的参数后的参数也不参与length的计算

处理参数不确定个数的方式

ES5处理参数不确定个数的方式

function add(type) {
    let sum=0;
   // 如果此时，type参数不希望参与计算，那么我们必须在for循环中单独判断
    for (let i = 0; i < arguments.length; i++) {
        sum+=arguments[i];
    }
    console.log(sum);
}
add(1,3,5); //9

ES5方案的弊端：

• 箭头函数不能使用arguments关键字。
• 确定的参数和不确定参数都计算在arguments中华，不方便区分。如果此时，某个参数不希望参与计算，那么我们必须在for循环中单独判断

ES6处理参数不确定个数的方式

ES6解决方案

(…wyz)的写法统称rest参数，表示不确定参数个数

传递的参数都会在自动封装到自定义的参数名（wyz）表示的数值中

function add2(...wyz) {
    let sum=0;
    for (let i = 0; i < wyz.length; i++) {
        sum+=wyz[i];
    }
    console.log(sum);
}
add2(1,2,3,4,5);

rest参数前定义的参数不会封装到定义的参数中。

function add3(type, ...ldh) {
    console.log(type);//jia
    console.log(ldh);//(5)[1, 2, 3, 4, 5]
}
add3("jia",1,2,3,4,5);