javascript - 为 JavaScript 函数设置默认参数值

Question

我希望 JavaScript 函数具有我设置默认值的可选参数，如果未定义该值（如果传递该值则忽略该值）。在 Ruby 中，你可以这样做：

def read_file(file, delete_after = false)
  # code
end

这在 JavaScript 中有效吗？

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

score 3473 · Accepted Answer

从ES6/ES2015 开始，默认参数在语言规范中。

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

只是工作。

参考：默认参数 - MDN

如果未传递任何值或未定义，则默认函数参数允许使用默认值初始化形式参数。

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

// the `= {}` below lets you call the function without any parameters
function myFor({ start = 5, end = 1, step = -1 } = {}) { // (A)
    // Use the variables `start`, `end` and `step` here
    ···
}

ES2015 之前，

有很多方法，但这是我的首选方法——它可以让你传入任何你想要的东西，包括 false 或 null。( typeof null == "object")

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

score 618 · Accepted Answer

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

如果它不是假值，则分配给delete_after的值，否则分配字符串。有关更多详细信息，请查看Doug Crockford 对语言的调查并查看有关 Operators 的部分。delete_after"my default here"

如果您想传入虚假值，即false、null、或undefined，则此方法不起作用。如果您需要传入 falsey值，则需要使用Tom Ritter's answer中的方法。0""

在处理函数的多个参数时，允许使用者在对象中传递参数参数然后将这些值与包含函数默认值的对象合并通常很有用

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;
};

使用

// will use the default delete_after value
read_file({ file: "my file" }); 

// will override default delete_after value
read_file({ file: "my file", delete_after: "my value" });

score 153 · Accepted Answer

我发现像这样简单的东西更简洁易读。

function pick(arg, def) {
   return (typeof arg == 'undefined' ? def : arg);
}

function myFunc(x) {
  x = pick(x, 'my default');
}

score 66 · Accepted Answer

在 ECMAScript 6 中，您实际上将能够准确地编写您所拥有的内容：

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

如果它不存在，这将设置delete_after为false或undefined。您现在可以将像这样的 ES6 功能与 Babel 等转译器一起使用。

有关详细信息，请参阅 MDN 文章。

score 30 · Accepted Answer

默认参数值

JavaScript使用 ES6，您可能会执行与为函数参数设置默认值相关的最常见的习惯用法之一。我们多年来这样做的方式应该看起来很熟悉：

function foo(x,y) {
 x = x || 11;
 y = y || 31;
 console.log( x + y );
}
foo(); // 42
foo( 5, 6 ); // 11
foo( 5 ); // 36
foo( null, 6 ); // 17

这种模式是最常用的，但是当我们传递像这样的值时很危险

foo(0, 42)
foo( 0, 42 ); // 53 <-- Oops, not 42

为什么？因为0 is falsy, 所以x || 11 results in 11, 不是直接传入的 0。为了解决这个问题，有些人会改写更详细的检查，如下所示：

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

我们现在可以检查添加的一个很好的有用语法，ES6以简化将默认值分配给缺失参数的过程：

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

foo(); // 42
foo( 5, 6 ); // 11
foo( 0, 42 ); // 42
foo( 5 ); // 36
foo( 5, undefined ); // 36 <-- `undefined` is missing
foo( 5, null ); // 5 <-- null coerces to `0`
foo( undefined, 6 ); // 17 <-- `undefined` is missing
foo( null, 6 ); // 6 <-- null coerces to `0`

x = 11在函数声明中更像是x !== undefined ? x : 11比更常见的习语x || 11

默认值表达式

Function默认值可以不仅仅是简单的值，如 31；它们可以是任何有效的表达式，甚至是function call：

function bar(val) {
 console.log( "bar called!" );
 return y + val;
}
function foo(x = y + 3, z = bar( x )) {
 console.log( x, z );
}
var y = 5;
foo(); // "bar called"
 // 8 13
foo( 10 ); // "bar called"
 // 10 15
y = 6;
foo( undefined, 10 ); // 9 10

如您所见，默认值表达式是惰性求值的，这意味着它们仅在需要时运行——即，当参数的参数被省略或未定义时。

默认值表达式甚至可以是内联函数表达式调用——通常称为立即调用函数表达式(IIFE)：

function foo( x =
 (function(v){ return v + 11; })( 31 )
) {
 console.log( x );
}
foo(); // 42

score 16 · Accepted Answer

该解决方案在 js 中对我有用：

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

score 12 · Accepted Answer

我强烈建议在 javascript 中使用默认参数值时要格外小心。当与高阶函数（如forEach、map和reduce. 例如，考虑这行代码：

['1', '2', '3'].map(parseInt); // [1, NaN, NaN]

parseInt 有一个可选的第二个参数function parseInt(s, [radix=10])，但是 map 调用parseInt带有三个参数：（element、index和array）。

我建议您将所需参数与可选/默认值参数分开。如果您的函数需要 1、2 或 3 个必需参数，而默认值对这些参数没有意义，请将它们设为函数的位置参数，任何可选参数都应作为单个对象的命名属性跟随。如果您的函数需要 4 个或更多，那么通过单个对象参数的属性提供所有参数可能更有意义。

在您的情况下，我建议您像这样编写您的deleteFile 函数：（根据评论进行编辑）...instead

// unsafe
function read_file(fileName, deleteAfter=false) {
    if (deleteAfter) {
        console.log(`Reading and then deleting ${fileName}`);
    } else {
        console.log(`Just reading ${fileName}`);
    }
}

// better
function readFile(fileName, options) {
  const deleteAfter = !!(options && options.deleteAfter === true);
  read_file(fileName, deleteAfter);
}

console.log('unsafe...');
['log1.txt', 'log2.txt', 'log3.txt'].map(read_file);

console.log('better...');
['log1.txt', 'log2.txt', 'log3.txt'].map(readFile);

运行上面的代码片段说明了潜伏在未使用参数的默认参数值背后的危险。

score 11 · Accepted Answer

只需使用未定义的显式比较。

function read_file(file, delete_after)
{
    if(delete_after === undefined) { delete_after = false; }
}

score 10 · Accepted Answer

作为更新...使用 ECMAScript 6，您最终可以在函数参数声明中设置默认值，如下所示：

function f (x, y = 7, z = 42) {
  return x + y + z
}

f(1) === 50

正如所引用的 - http://es6-features.org/#DefaultParameterValues

score 9 · Accepted Answer

作为一个长期的C ++开发人员（Rookie to web development :)），当我第一次遇到这种情况时，我在函数定义中进行了参数分配，就像问题中提到的那样，如下所示。

function myfunc(a,b=10)

但请注意，它不能在浏览器中一致地工作。对我来说，它适用于我桌面上的 chrome，但不适用于 android 上的 chrome。正如上面许多人提到的那样，更安全的选择是 -

    function myfunc(a,b)
    {
    if (typeof(b)==='undefined') b = 10;
......
    }

此答案的目的不是重复其他人已经提到的相同解决方案，而是告知函数定义中的参数分配可能适用于某些浏览器，但不要依赖它。

score 8 · Accepted Answer

对于有兴趣让代码在 Microsoft Edge 中工作的任何人，请不要在函数参数中使用默认值。

function read_file(file, delete_after = false) {
    #code
}

在该示例中，Edge 将抛出错误“期望')'”

为了解决这个问题

function read_file(file, delete_after) {
  if(delete_after == undefined)
  {
    delete_after = false;
  }
  #code
}

截至 2016 年 8 月 8 日，这仍然是一个问题

score 6 · Accepted Answer

如果您正在使用ES6+，您可以通过以下方式设置默认参数：

function test (foo = 1, bar = 2) {
  console.log(foo, bar);
}

test(5); // foo gets overwritten, bar remains default parameter

如果您需要ES5语法，可以通过以下方式进行：

function test(foo, bar) {
  foo = foo || 2;
  bar = bar || 0;
  
  console.log(foo, bar);
}

test(5); // foo gets overwritten, bar remains default parameter

在上述语法中，使用了OR运算符。OR如果可以将其转换为，则运算符始终返回第一个值，否则true返回右侧值。当函数在没有相应参数的情况下被调用时，参数变量（bar在我们的示例中）undefined由 JS 引擎设置为。undefined然后转换为 false，因此OR运算符返回值 0。

score 5 · Accepted Answer

根据语法

function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) {
   statements
}

您可以定义形式参数的默认值。并使用typeof函数检查未定义的值。

score 5 · Accepted Answer

function helloWorld(name, symbol = '!!!') {
    name = name || 'worlds';
    console.log('hello ' + name + symbol);
}

helloWorld(); // hello worlds!!!

helloWorld('john'); // hello john!!!

helloWorld('john', '(>.<)'); // hello john(>.<)

helloWorld('john', undefined); // hello john!!!

helloWorld(undefined, undefined); // hello worlds!!!

score 5 · Accepted Answer

如果您想使用最新的ECMA6语法，请使用它：

function myFunction(someValue = "This is DEFAULT!") {
  console.log("someValue --> ", someValue);
}

myFunction("Not A default value") // calling the function without default value
myFunction()  // calling the function with default value

它被称为default function parameters。如果没有传递任何值或未定义，它允许使用默认值初始化形式参数。注意：它不适用于 Internet Explorer 或更旧的浏览器。

为了最大可能的兼容性，请使用：

function myFunction(someValue) {
  someValue = (someValue === undefined) ? "This is DEFAULT!" : someValue;
  console.log("someValue --> ", someValue);
}

myFunction("Not A default value") // calling the function without default value
myFunction()  // calling the function with default value

这两个函数具有完全相同的行为，因为这些示例中的每一个都依赖于这样一个事实，即undefined如果在调用该函数时没有传递参数值，则参数变量将是。

score 5 · Accepted Answer

ES6：正如大多数答案中已经提到的，在 ES6 中，您可以简单地初始化一个参数和一个值。

ES5：大多数给定的答案对我来说都不够好，因为在某些情况下我可能不得不将虚假值传递给函数，例如0,null和undefined。要确定参数是否未定义，因为那是我传递的值而不是由于根本没有定义而未定义的值，我这样做：

function foo (param1, param2) {
   param1 = arguments.length >= 1 ? param1 : "default1";
   param2 = arguments.length >= 2 ? param2 : "default2";
}

score 4 · Accepted Answer

function throwIfNoValue() {
throw new Error('Missing argument');
}
function foo(argValue = throwIfNoValue()) {
return argValue ;
}

这里 foo() 是一个函数，它有一个名为 argValue 的参数。如果我们在此处的函数调用中不传递任何内容，则将调用函数 throwIfNoValue()，并将返回的结果分配给唯一的参数 argValue。这就是函数调用可以用作默认参数的方式。这使代码更加简化和可读。

这个例子取自这里

score 3 · Accepted Answer

如果由于某种原因您不在ES6 上并且在这里使用lodash的是通过方法默认函数参数的简洁_.defaultTo方法：

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

  console.log(a, b)
}

fn()                 // Hi Mom!
fn(undefined, null)  // Hi Mom!
fn(NaN, NaN)         // Hi Mom!
fn(1)                // 1 "Mom!"
fn(null, 2)          // Hi 2
fn(false, false)     // false false
fn(0, 2)             // 0 2

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

如果当前值为NaN、null或undefined ，它将设置默认值

score 3 · Accepted Answer

是的，ES6完全支持使用默认参数：

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

或者

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

但是在ES5之前你可以很容易地做到这一点：

function read_file(file, delete_after) {
  var df = delete_after || false;
  // Code
}

这意味着如果该值存在，则使用该值，否则，在||执行相同操作的操作后使用第二个值...

注意：如果您将一个值传递给ES6一个值，即使该值是虚假的，这也有很大的不同，它将被替换为新值，类似于nullor ""... 但ES5仅在只有传递的值时才会被替换是真的，那是因为||工作方式......

score 3 · Accepted Answer

未来之声

将来，您将能够将一个对象“传播”到另一个对象（从 2019 年开始，Edge 不支持！） - 演示如何将其用于不错的默认选项，而不管顺序如何：

function test(options) {
    var options = {
       // defaults
       url: 'defaultURL',
       some: 'somethingDefault',
       // override with input options
       ...options
    };
    
    var body = document.getElementsByTagName('body')[0];
    body.innerHTML += '<br>' + options.url + ' : ' + options.some;
}
test();
test({});
test({url:'myURL'});
test({some:'somethingOfMine'});
test({url:'overrideURL', some:'andSomething'});
test({url:'overrideURL', some:'andSomething', extra:'noProblem'});

MDN 参考：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

...与此同时，Edge 支持的是 Object.assign()（IE 不支持，但我真的希望我们可以将 IE 抛在后面 :)）

同样你可以做

    function test(options) {
        var options = Object.assign({
           // defaults
           url: 'defaultURL',
           some: 'somethingDefault',
        }, options); // override with input options
        
        var body = document.getElementsByTagName('body')[0];
        body.innerHTML += '<br>' + options.url + ' : ' + options.some;
    }
    test();
    test({});
    test({url:'myURL'});
    test({some:'somethingOfMine'});
    test({url:'overrideURL', some:'andSomething'});
    test({url:'overrideURL', some:'andSomething', extra:'noProblem'});

编辑：由于关于const选项的评论 - 在函数的其余部分使用常量选项的问题实际上不是你不能这样做，只是你不能在自己的声明中使用常量变量 - 你会有将输入命名调整为类似

function test(input_options){
   const options = {
     // defaults
     someKey:    'someDefaultValue',
     anotherKey: 'anotherDefaultValue',

     // merge-in input options
     ...input_options
   };

   // from now on use options with no problem
}

score 2 · Accepted Answer

只是为了展示我的技能（大声笑），即使没有命名参数也可以编写上述函数，如下所示：

ES5 及以上

function foo() {
    a = typeof arguments[0] !== 'undefined' ? a : 42;
    b = typeof arguments[1] !== 'undefined' ? b : 'default_b';
    ...
}

ES6 及以上

function foo(...rest) {
    a = typeof rest[0] !== 'undefined' ? a : 42;
    b = typeof rest[1] !== 'undefined' ? b : 'default_b';
    ...
}

score 1 · Accepted Answer

是的，这被称为默认参数

如果未传递任何值或未定义，则默认函数参数允许使用默认值初始化形式参数。

句法：

function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) {
   statements
}

描述：

函数的参数默认为 undefined 但是，在某些情况下，设置不同的默认值可能很有用。这是默认参数可以提供帮助的地方。

过去，设置默认值的一般策略是在函数体中测试参数值，如果它们未定义，则为其赋值。如果调用中未提供任何值，则其值将是未定义的。您必须设置条件检查以确保参数未定义

使用 ES2015 中的默认参数，不再需要在函数体中进行检查。现在您可以简单地在函数头中放置一个默认值。

差异示例：

// OLD METHOD
function multiply(a, b) {
  b = (typeof b !== 'undefined') ?  b : 1;
  return a * b;
}

multiply(5, 2); // 10
multiply(5, 1); // 5
multiply(5);    // 5


// NEW METHOD
function multiply(a, b = 1) {
  return a * b;
}

multiply(5, 2); // 10
multiply(5, 1); // 5
multiply(5);    // 5

不同的语法示例：

填充未定义与其他虚假值：

即使在调用时显式设置了值，num 参数的值也是默认值。

function test(num = 1) {
  console.log(typeof num);
}

test();          // 'number' (num is set to 1)
test(undefined); // 'number' (num is set to 1 too)

// test with other falsy values:
test('');        // 'string' (num is set to '')
test(null);      // 'object' (num is set to null)

在通话时评估：

默认参数在调用时进行评估，因此与其他一些语言不同，每次调用函数时都会创建一个新对象。

function append(value, array = []) {
  array.push(value);
  return array;
}

append(1); //[1]
append(2); //[2], not [1, 2]


// This even applies to functions and variables
function callSomething(thing = something()) {
 return thing;
}

function something() {
  return 'sth';
}

callSomething();  //sth

默认参数可用于以后的默认参数：

已经遇到的参数可用于以后的默认参数

function singularAutoPlural(singular, plural = singular + 's',
                        rallyingCry = plural + ' ATTACK!!!') {
  return [singular, plural, rallyingCry];
}

//["Gecko","Geckos", "Geckos ATTACK!!!"]
singularAutoPlural('Gecko');

//["Fox","Foxes", "Foxes ATTACK!!!"]
singularAutoPlural('Fox', 'Foxes');

//["Deer", "Deer", "Deer ... change."]
singularAutoPlural('Deer', 'Deer', 'Deer peaceably and respectfully \ petition the government for positive change.')

函数体内定义的函数：

在 Gecko 33 (Firefox 33 / Thunderbird 33 / SeaMonkey 2.30) 中引入。在函数体中声明的函数不能在默认参数中被引用并抛出一个 ReferenceError（当前是 SpiderMonkey 中的一个 TypeError，参见 bug 1022967）。默认参数总是首先执行，然后函数体内的函数声明求值。

// Doesn't work! Throws ReferenceError.
function f(a = go()) {
  function go() { return ':P'; }
}

默认参数后无默认参数：

在 Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2) 之前，以下代码会导致 SyntaxError。这已在错误 777060 中修复，并在以后的版本中按预期工作。参数仍然从左到右设置，覆盖默认参数，即使后面有没有默认的参数。

function f(x = 1, y) {
  return [x, y];
}

f(); // [1, undefined]
f(2); // [2, undefined]

具有默认值分配的解构参数：

您可以将默认值赋值与解构赋值表示法一起使用

function f([x, y] = [1, 2], {z: z} = {z: 3}) {
  return x + y + z;
}

f(); // 6

score 1 · Accepted Answer

我注意到一些答案提到使用默认参数不能移植到其他浏览器，但公平地指出，您可以使用 Babel 之类的编译器将代码转换为 ES5 语法，用于对现代 JS 支持有限的浏览器特征。

所以这：

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

将被编译成这样（在 Babel REPL -> https://babeljs.io/repl/中尝试一下）：

"use strict";

function read_file(file) {

  var delete_after =
    arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  
  //Code...

}

当然，如果您不打算使用转译，那么像其他人演示的那样在函数体中设置默认参数也很好。

score 0 · Accepted Answer

def read_file(file, delete_after = false)
  # code
end

以下代码可能适用于这种情况，包括 ECMAScript 6 (ES6) 以及早期版本。

function read_file(file, delete_after) {
    if(delete_after == undefined)
        delete_after = false;//default value

    console.log('delete_after =',delete_after);
}
read_file('text1.txt',true);
read_file('text2.txt');

当调用时跳过函数的参数值时，语言中的默认值起作用，在 JavaScript 中，它被分配给undefined。这种方法在编程上看起来并不吸引人，但具有向后兼容性。

score 0 · Accepted Answer

设置默认参数的另一种方法是使用参数的对象映射，而不是直接使用参数。例如，

const defaultConfig = {
 category: 'Animals',
 legs: 4
};

function checkOrganism(props) {
 const category = props.category || defaultConfig.category;
 const legs = props.legs || defaultConfig.legs;
}

这样，很容易扩展参数，而不必担心参数长度不匹配。

score 0 · Accepted Answer

答案是肯定的。事实上，支持默认参数的语言有很多。Python就是其中之一：

def(a, enter="Hello"):
   print(a+enter)

尽管由于括号这是 Python 3 代码，但函数中的默认参数也适用于 JS。

例如，在您的情况下：

function read_file(file, deleteAfter=false){
  console.log(deleteAfter);
}

read_file("test.txt");

但有时你并不真的需要默认参数。

您可以在函数开始后立即定义变量，如下所示：

function read_file(file){
  var deleteAfter = false;
  console.log(deleteAfter);
}

read_file("test.txt");

在我的两个示例中，它返回相同的内容。但有时它们实际上可能很有用，比如在非常高级的项目中。

所以，总而言之，在 JS 中可以使用默认参数值。但这与在函数开始后立即定义变量几乎相同。但是，有时它们仍然非常有用。您可能已经注意到，默认参数值比在函数开始后立即定义参数的标准方法少了 1 行代码。

编辑：这非常重要！这在 IE 中不起作用。请参阅文档。因此，对于 IE，您必须使用“在函数顶部定义变量”方法。默认参数在 IE 中不起作用。

score 0 · Accepted Answer

是的 - 证明：

function read_file(file, delete_after = false) {
  // Code
  console.log({file,delete_after});
}



// TEST
read_file("A");
read_file("B",true);
read_file("C",false);

score 0 · Accepted Answer

export const getfilesize = (bytes, decimals = 2) => {
    if (bytes === 0){ 
        return '0 Bytes';
    }else{
        const k = 1024;
        const dm = decimals < 0 ? 0 : decimals;
        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];

    }
}

score -3 · Accepted Answer

是的，这将在 Javascript 中工作。你也可以这样做：

function func(a=10,b=20)
{
    alert (a+' and '+b);
}

func(); // Result: 10 and 20

func(12); // Result: 12 and 20

func(22,25); // Result: 22 and 25

javascript - 为 JavaScript 函数设置默认参数值

29 回答 29

未来之声

是的 - 证明：

Related

Reference