函数的扩展

Posted 2021-02-07 xlj-code

一、设置默认参数

ES6之前，给函数设置默认参数是这样做的：

function fn(a) {
    if(typeof y === undefined){
        a = a || ‘hello‘;
    }
    console.log(a);
}
fn(‘hi‘);   // ‘hi‘
fn(false);   // false

这里之所以要判断一下，是因为我们本意是函数没有传值时才给参数 a 设置为 ‘hello‘，但是如果调用函数时传入了布尔值 false，也会把参数 a 设置为 ‘hello‘。

 

在 ES6 中允许为函数的参数设置默认值，直接写在参数的后面即可：

function fn(a = ‘hello‘) {
    console.log(a);
}
fn(‘hi‘);   // ‘hi‘
fn(false);   // false

非常的简洁，严谨，不用判断，不过有一点需要注意，参数变量是默认声明的，所以，在函数体内，不能再使用 let 或者 const 再次声明：

function fn(a = ‘hello‘) {
    let a = ‘hi‘;   // error
    const a = ‘ha‘;   // error
}

 

二、rest参数

ES6之前，获取函数多余的参数用的是 arguments：

function fn(a) {
    for(var i = 0; i < arguments.length; i ++){
        console.log(arguments[i]);
    }
    console.log(a);   
}
fn(1, 2, 3);
// 1
// 2
// 3
// 1

而且这里 arguments 对象包括的是所有的参数，并不是严格意义上的多余的参数。

 

ES6 中，现在就可以使用 rest参数，用来完成获取多余的参数这件事了，很方便，语法为 ...变量名：

function fn(a, ...value) {
    value.forEach(function (item) {
        console.log(item);
    });
}
fn(1, 2, 3);
// 2
// 3

函数体内，value 变量就是一个数组，包含传入的2个多余的参数 2、3。

这里有一点需要注意，rest参数 只能放在最后面，不然就报错：

function fn(a, ...value, b) {   // error
    
}

 三、箭头函数

ES6允许使用箭头( => )来定义函数，这里定义一个最简单的函数：

var sayHi = () => {
    alert(‘hi‘);
}

// 等价于

function sayHi() {
    alert(‘hi‘);
}

需要传参的话把参数写在圆括号里即可：

var add = (a, b) => {
    console.log(a + b);
}

//等同于

function add(a, b){
    console.log(a + b);
}
add(10, 20);   // 20

如果参数只有一个，也可以不使用圆括号：

var fn = a => {
    console.log(a);
}
fn(100);   // 100

而且如果只有一条语句，甚至花括号也可以省略。

var fn = a => console.log(a);
fn(100);   // 100

这里还有一种极其简单的替代写法：

var fn = a => a;

// 等同于

var fn = function(a){
    return a;
}
console.log(fn(10));   // 10

但是这种写法需要谨慎使用，比如返回的是一个对象就需要外面包一个圆括号，不然报错：

var fn = () => {username: ‘tom‘, age: 24};   // error

// 需要这样才可以

var fn = () => ({username: ‘tom‘, age: 24});