为JavaScript函数设置默认参数值

技术背景

在JavaScript中，为函数参数设置默认值是一个常见需求。在不同的JavaScript版本中，实现默认参数值的方式有所不同。早期版本没有直接的语法支持，开发者需要使用一些技巧来模拟；而从ES6/ES2015开始，语言规范中正式引入了默认参数的特性。

实现步骤

ES6及以后版本

从ES6开始，可以直接在函数定义中为参数指定默认值。示例代码如下：

function read_file(file, delete_after = false) {
    // Code
}

当调用read_file函数时，如果没有为delete_after参数传递值，或者传递的值为undefined，则delete_after将使用默认值false。

ES6模拟默认命名参数

可以通过解构来模拟默认命名参数：

function myFor({ start = 5, end = 1, step = -1 } = {}) {
    // Use the variables `start`, `end` and `step` here
    ...
}

// sample call using an object
myFor({ start: 3, end: 0 });

// also OK
myFor();
myFor({});

ES2015之前的版本

在ES2015之前，有多种方法可以实现默认参数值。一种常用的方法是通过typeof检查参数是否为undefined：

function foo(a, b) {
    a = typeof a !== 'undefined' ? a : 42;
    b = typeof b !== 'undefined' ? b : 'default_b';
    ...
}

另一种方法是使用逻辑或运算符||，但这种方法有局限性，当传递的参数为假值（如false、null、undefined、0或""）时，会使用默认值：

function read_file(file, delete_after) {
    delete_after = delete_after || "my default here";
    //rest of code
}

如果需要处理多个参数，可以将参数作为对象传递，并将其与包含默认值的对象合并：

function read_file(values) {
    values = merge({ 
        delete_after : "my default here"
    }, values || {});

    // rest of code
}

// simple implementation based on $.extend() from jQuery
function merge() {
    var obj, name, copy,
        target = arguments[0] || {},
        i = 1,
        length = arguments.length;

    for (; i < length; i++) {
        if ((obj = arguments[i]) != null) {
            for (name in obj) {
                copy = obj[name];

                if (target === copy) {
                    continue;
                }
                else if (copy !== undefined) {
                    target[name] = copy;
                }
            }
        }
    }

    return target;
};

使用lodash库

如果不使用ES6，并且使用lodash库，可以使用_.defaultTo方法来简洁地设置默认参数：

var fn = function(a, b) {
    a = _.defaultTo(a, 'Hi');
    b = _.defaultTo(b, 'Mom!');

    console.log(a, b);
}

核心代码

ES6默认参数示例

function foo(x = 11, y = 31) {
    console.log(x + y);
}

foo(); // 42
foo(5, 6); // 11
foo(0, 42); // 42

ES5模拟默认参数示例

function foo(x, y) {
    x = (x !== undefined) ? x : 11;
    y = (y !== undefined) ? y : 31;
    console.log(x + y);
}

foo(0, 42); // 42

最佳实践

• 使用ES6语法：如果项目支持ES6及以上版本，优先使用ES6的默认参数语法，它简洁且直观。
• 处理假值：如果需要处理假值作为有效参数，避免使用逻辑或运算符||，而是使用typeof检查或比较undefined。
• 分离必需参数和可选参数：将必需参数和可选参数分开，可选参数可以作为对象传递，提高代码的可读性和可维护性。

常见问题

兼容性问题

ES6的默认参数语法在一些旧浏览器（如Internet Explorer）和部分较旧版本的浏览器（如Microsoft Edge）中不支持。为了保证代码的兼容性，可以使用ES5的方法，或者使用转译器（如Babel）将ES6代码转换为ES5代码。

高阶函数问题

在使用默认参数与高阶函数（如forEach、map和reduce）结合时，可能会出现问题。例如，map方法会传递三个参数给回调函数，而parseInt函数有一个可选的第二个参数，这可能导致意外的结果。建议将必需参数和可选参数分开，避免此类问题。