带有默认参数的 JavaScript 函数

JavaScript functions with default params

本文关键字：JavaScript 函数 参数 默认      更新时间：2023-09-26

我目前使用以下函数来检查三个参数以查看是否有任何传递，如果没有发送参数，这是在设置默认值时执行此操作的最佳方法吗？

function setupSlideshow(t, e, s) {
    e = e || '.slideshow';
    s = s || '> li';
    t = t || 70;
    $timeout(function() {
        $(e).cycle({
            swipe: true,
            slides: s,
            fx: 'scrollHorz',
            pager: '.cycle-pager',
            timeout: 0
        });
    }, t);
}

通过使用setupSlideshow(70);这会将我的超时设置为 70 毫秒，但在设置元素时，使用 setupSlideshow('.new-slideshow'); 不起作用。

setupSlideshow(70);
setupSlideshow('.new-slideshow');
setupSlideshow('.new-slideshow','.slide');

我想你已经忘记了参数总是必须按顺序输入......这里的第一个参数是超时的时间（以毫秒为单位），第二个参数是幻灯片元素。如果您省略了时间完成，则幻灯片元素将是第一个参数，因此该函数将其视为您的时间。

jQuery用来解决这个问题的一种方法是使用一个option参数。这包括传递一个对象供函数使用，如下所示：

function setupSlideshow(options) {
    options = options || {};
    e = options.e || '.slideshow';
    s = options.s || '> li';
    t = options.t || 70;
    $timeout(function() {
        $(e).cycle({
            swipe: true,
            slides: s,
            fx: 'scrollHorz',
            pager: '.cycle-pager',
            timeout: 0
        });
    }, t);
}
setupSlideshow({t:70});
setupSlideshow({e:'.new-slideshow'});
setupSlideshow({e:'.new-slideshow',s:'.slide'});

使用这种技术对于这种用法很有用，但是当可能有太多选项并且没有很好的文档时，也可能成为一个问题制造者，因此请保持干净并注释:)

参数必须按照定义它们的顺序传递给函数。所以;

setupSlideshow('.new-slideshow');

此处的参数将传递给函数中的t变量。

您要做的是：

setUpSlideshow(false, '.new-slideshow', '.slide');

这会将false传递给 t 变量，并更改为默认值。

或者，您可能需要考虑使用"选项"/"参数"对象... ：

function setupSlideshow(args) {
    e = e in args ? args.e : '.slideshow';
    s = s in args ? args.s : '> li';
    t = t in args ? args.t : 70;
    ...
}
args = {
    e: '.new-slideshow',
    s: '.slide'
};
setupSlideshow( args );

默认参数的旧函数方式如下：

function x(param1, param2){
  param1 = param1 || 'param1_default';
  param2 = param2 || 'param2_default';
  console.log(param1, param2);
  //etc
}

像这样更好的方法：

使用函数销毁和默认值

function x({param1='param1_default', param2='param2_default'}={}){
  console.log(param1, param2);
//etc
}
x(); //returns 'param1_default', 'param2_default'
x({}); //returns 'param1_default', 'param2_default'
x({param1:'a'}); //returns 'a', 'param2_default'
x({param1:'a', param2:'b'}); //returns 'a', 'b'

这里实际发生的是，我们从论证中解构出来。如果未提供参数，则使用默认值 - 即 = {}。在这种情况下，由于默认空对象没有字段，解构将采用默认值。

就我有限的JS而言，我想我已经有了这个。

但是，目前您编写e = e || '.slideshow';尝试将e作为变量访问的地方，浏览器将其解释为参数。将其更改为以下内容：

var e = e || '.slideshow', s = s || '> li', t = t || 70;

看看下面的实现。使用默认参数"features = []"，代码可以在 ES6 中变得非常简洁。

ES6：新

function setUserAccess(features = []){
    return features;
};
setUserAccess(); // []

ES5：旧

function setUserAccess(features){
    features = features || [];
    return features;
};
setUserAccess(); // []
相关文章：