blocks|key|1335953|text|就我个人而言，我发现像这样简单的东西要简洁得多，也更具可读性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1335954|function+pick(arg,+def)+{
+++return+(typeof+arg+==+'undefined'+?+def+:+arg);
}

function+myFunc(x)+{
++x+=+pick(x,+'my+default');
}+|code-block|syntax|javascript|1335955|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I find something simple like this to be much more concise and readable personally.</p>

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

function myFunc(x) {
  x = pick(x, 'my default');
} 
</code></pre>


blocks|key|1335985|text|在ECMAScript+6中，你实际上可以写出你所拥有的东西：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1335986|function+read_file(file,+delete_after+=+false)+{
++//+Code
}|code-block|syntax|javascript|1335987|这会将delete_after设置为false+(如果不存在)或undefined。您现在可以在Babel这样的转译器中使用像这样的ES6特性。|offset|length|style|CODE|1335988|See+the+MDN+article+for+more+information。|1335989|entityMap|0|LINK|mutability|MUTABLE|url|http://babeljs.io/|1|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters^0|0|0|3|C|I|5|W|9|1C|5|0|0|0|14|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@$I|11|J|12|K|L]|$I|13|J|14|K|L]|$I|15|J|16|K|L]]|9|@$I|17|J|18|1|19]]|A|$]]|$1|M|3|N|5|6|7|1A|8|@]|9|@$I|1B|J|1C|1|1D]]|A|$]]|$1|O|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

<p>In ECMAScript 6 you will actually be able to write exactly what you have:</p>

<pre><code>function read_file(file, delete_after = false) {
  // Code
}
</code></pre>

<p>This will set <code>delete_after</code> to <code>false</code> if it s not present or <code>undefined</code>. You can use ES6 features like this one today with transpilers such as <a href="http://babeljs.io/" rel="noreferrer">Babel</a>.</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters" rel="noreferrer">See the MDN article for more information</a>. </p>


blocks|key|1336067|text|该解决方案适用于js：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1336068|function+read_file(file,+delete_after)+{
++++delete_after+=+delete_after+%7C%7C+false;
++++//+Code
}|code-block|syntax|javascript|1336069|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>that solution is work for me in js:</p>

<pre><code>function read_file(file, delete_after) {
    delete_after = delete_after || false;
    // Code
}
</code></pre>


blocks|key|1336020|text|只需使用显式比较undefined。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1336021|function+read_file(file,+delete_after)
{
++++if(delete_after+===+undefined)+{+delete_after+=+false;+}
}|code-block|syntax|javascript|1336022|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Just use an explicit comparison with undefined.</p>

<pre><code>function read_file(file, delete_after)
{
    if(delete_after === undefined) { delete_after = false; }
}
</code></pre>


blocks|key|1336108|text|作为一名长期的C%2B%2B开发人员(新手到web开发：)，当我第一次遇到这种情况时，我在函数定义中进行了参数赋值，就像问题中提到的那样，如下所示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1336109|function+myfunc(a,b=10)|code-block|syntax|javascript|1336110|但要注意，它并不能在不同的浏览器上一致地工作。对我来说，它适用于我桌面上的chrome，但不适用于android上的chrome。更安全的选择，正如许多人在上面提到的那样-|1336111|++++function+myfunc(a,b)
++++{
++++if+(typeof(b)==='undefined')+b+=+10;
......
++++}|1336112|这个答案的目的不是重复其他人已经提到的相同的解决方案，而是通知函数定义中的参数赋值可能在某些浏览器上有效，但不要依赖它。|1336113|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>being a long time C++ developer (Rookie to web development :)), when I first came across this situation, I did the parameter assignment in the function definition, like it is mentioned in the question, as follows. </p>

<pre><code>function myfunc(a,b=10)
</code></pre>

<p>But beware that it doesn't work consistently across browsers. For me it worked on chrome on my desktop, but did not work on chrome on android.
Safer option, as many have mentioned above is -</p>

<pre><code>    function myfunc(a,b)
    {
    if (typeof(b)==='undefined') b = 10;
......
    }
</code></pre>

<p>Intention for this answer is not to repeat the same solutions, what others have already mentioned, but to inform that parameter assignment in the function definition may work on some browsers, but don't rely on it.</p>


blocks|key|1551741|text|对于任何有兴趣让这些代码在Microsoft+Edge中工作的人来说，不要在函数参数中使用默认值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1551742|function+read_file(file,+delete_after+=+false)+{
++++#code
}|code-block|syntax|javascript|1551743|在该示例中，Edge将抛出错误"Expecting+')'“|1551744|要绕过此使用|1551745|function+read_file(file,+delete_after)+{
++if(delete_after+==+undefined)
++{
++++delete_after+=+false;
++}
++#code
}|1551746|截至2016年8月8日，这仍然是一个问题|1551747|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>To anyone interested in having there code work in Microsoft Edge, do not use defaults in function parameters. </p>

<pre><code>function read_file(file, delete_after = false) {
    #code
}
</code></pre>

<p>In that example Edge will throw an error "Expecting ')'"    </p>

<p>To get around this use</p>

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

<p>As of Aug 08 2016 this is still an issue</p>


blocks|key|1336379|text|如果您使用的是ES6%2B，您可以通过以下方式设置默认参数：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1336380|​|1336381|function+test+(foo+=+1,+bar+=+2)+{
++console.log(foo,+bar);
}

test(5);+//+foo+gets+overwritten,+bar+remains+default+parameter|code-block|syntax|javascript|1336382|1336383|如果您需要ES5语法，您可以通过以下方式来实现：|1336384|1336385|function+test(foo,+bar)+{
++foo+=+foo+%7C%7C+2;
++bar+=+bar+%7C%7C+0;
++
++console.log(foo,+bar);
}

test(5);+//+foo+gets+overwritten,+bar+remains+default+parameter|1336386|1336387|在上面的语法中，使用了OR操作符。如果可以转换为true，则OR操作符总是返回第一个值，如果不能，则返回右侧的值。当在没有相应参数的情况下调用函数时，JS引擎会将参数变量(在我们的示例中为bar)设置为undefined。然后将undefined转换为false，因此OR运算符是否返回值0。|1336388|entityMap^0|7|4|0|0|0|0|5|3|0|0|0|0|B|2|O|4|U|2|2M|3|2T|9|36|9|3Q|2|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|11|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|P|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|Q|3|R|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|S|3|G|5|6|7|18|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]]|W|$]]

<p>If you are using <code>ES6+</code> you can set default parameters in the following manner:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function test (foo = 1, bar = 2) {
  console.log(foo, bar);
}

test(5); // foo gets overwritten, bar remains default parameter</code></pre>
</div>
</div>
</p>

<p>If you need <code>ES5</code> syntax you can do it in the following manner:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function test(foo, bar) {
  foo = foo || 2;
  bar = bar || 0;
  
  console.log(foo, bar);
}

test(5); // foo gets overwritten, bar remains default parameter</code></pre>
</div>
</div>
</p>

<p>In the above syntax the <code>OR</code> operator is used. The <code>OR</code> operator always returns the first value if this can be converted to <code>true</code> if not it returns the righthandside value. When the function is called with no corresponding argument the parameter variable (<code>bar</code> in  our example) is set to <code>undefined</code> by the JS engine. <code>undefined</code> Is then converted to false and thus does the <code>OR</code> operator return the value 0.</p>


blocks|key|1551764|text|function+helloWorld(name,+symbol+=+'!!!')+{
++++name+=+name+%7C%7C+'worlds';
++++console.log('hello+'+%2B+name+%2B+symbol);
}

helloWorld();+//+hello+worlds!!!

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

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

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

helloWorld(undefined,+undefined);+//+hello+worlds!!!|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1551765|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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

helloWorld(); // hello worlds!!!

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

helloWorld('john', '(&gt;.&lt;)'); // hello john(&gt;.&lt;)

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

helloWorld(undefined, undefined); // hello worlds!!!
</code></pre>


blocks|key|1551855|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1551856|function+throwIfNoValue()+{
throw+new+Error('Missing+argument');
}
function+foo(argValue+=+throwIfNoValue())+{
return+argValue+;
}|code-block|syntax|javascript|1551857|1551858|这里foo()是一个函数，它有一个名为argValue的参数。如果我们在这里的函数调用中没有传递任何东西，那么函数throwIfNoValue()将被调用，并且返回的结果将被赋值给唯一的参数argValue。这就是如何将函数调用用作默认参数。这使得代码更加简化和可读性更好。|1551859|This+example+has+been+taken+from+here|offset|length|1551860|entityMap|0|LINK|mutability|MUTABLE|url|http://anjandutta.com/javascript-es6-default-parameter/^0|0|0|0|0|0|11|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|Z|8|@]|9|@$L|10|M|11|1|12]]|A|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|U]]]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function throwIfNoValue() {
throw new Error('Missing argument');
}
function foo(argValue = throwIfNoValue()) {
return argValue ;
}</code></pre>
</div>
</div>
</p>

<p>Here foo() is a function which has a parameter named argValue. If we don’t pass anything in the function call here, then the function throwIfNoValue() will be called and the returned result will be assigned to the only argument argValue. This is how a function call can be used as a default parameter. Which makes the code more simplified and readable.</p>

<p><a href="http://anjandutta.com/javascript-es6-default-parameter/" rel="nofollow noreferrer">This example has been taken from here</a></p>


blocks|key|1552142|text|我注意到一些答案提到，使用默认参数不能移植到其他浏览器，但公平地说，您可以使用像Babel这样的转译器将代码转换为ES5语法，以供对现代JS功能支持有限的浏览器使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1552143|所以这就是：|1552144|function+read_file(file,+delete_after+=+false)+{
++//+Code
}|code-block|syntax|javascript|1552145|会是这样的(在Babel+REPL+->+https://babeljs.io/repl/中尝试一下)：|offset|length|1552146|"use+strict";

function+read_file(file)+{

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

}|1552147|当然，如果您不打算使用转译，那么在函数体中设置默认参数也是非常好的，就像其他人已经演示过的那样。|1552148|entityMap|0|LINK|mutability|MUTABLE|url|https://babeljs.io/repl/^0|0|0|0|L|O|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@$K|12|L|13|1|14]]|A|$]]|$1|M|3|N|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>I've noticed a few answers mentioning that using default params isn't portable to other browsers, but it's only fair to point out that you can use transpilers like Babel to convert your code into ES5 syntax for browsers that have limited support for modern JS features.</p>
<p>So this:</p>
<pre><code>function read_file(file, delete_after = false) {
  // Code
}
</code></pre>
<p>would be transpiled as this (try it out in the Babel REPL -&gt; <a href="https://babeljs.io/repl/" rel="nofollow noreferrer">https://babeljs.io/repl/</a>):</p>
<pre><code>&quot;use strict&quot;;

function read_file(file) {

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

}
</code></pre>
<p>Of course, if you have no intention of using transpilation, then setting default params in the body of the function like others have demonstrated is perfectly fine as well.</p>


blocks|key|1552038|text|设置默认参数的另一种方法是使用参数的对象映射，而不是直接使用参数。例如,|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1552039|const+defaultConfig+=+{
+category:+'Animals',
+legs:+4
};

function+checkOrganism(props)+{
+const+category+=+props.category+%7C%7C+defaultConfig.category;
+const+legs+=+props.legs+%7C%7C+defaultConfig.legs;
}|code-block|syntax|javascript|1552040|这样，很容易扩展参数，而不必担心参数长度不匹配。|1552041|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Just a different approach to set default params is to use object map of arguments, instead of arguments directly.
For example, </p>

<pre><code>const defaultConfig = {
 category: 'Animals',
 legs: 4
};

function checkOrganism(props) {
 const category = props.category || defaultConfig.category;
 const legs = props.legs || defaultConfig.legs;
}
</code></pre>

<p>This way, it's easy to extend the arguments and not worry about argument length mismatch.</p>


blocks|key|1552083|text|是-证明：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1552084|​|1552085|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);|code-block|syntax|javascript|1552086|1552087|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<h1>Yes - proof:</h1>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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);</code></pre>
</div>
</div>
</p>


blocks|key|1336587|text|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))+%2B+'+'+%2B+sizes[i];

++++}
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1336588|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>export const getfilesize = (bytes, decimals = 2) =&gt; {
    if (bytes === 0){ 
        return '0 Bytes';
    }else{
        const k = 1024;
        const dm = decimals &lt; 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];

    }
}
</code></pre>


blocks|key|1551677|text|是的，这将在Javascript中工作。您也可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1551678|function+func(a=10,b=20)
{
++++alert+(a%2B'+and+'%2Bb);
}

func();+//+Result:+10+and+20

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

func(22,25);+//+Result:+22+and+25|code-block|syntax|javascript|1551679|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Yes, This will work in Javascript. You can also do that:</p>

<pre><code>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
</code></pre>


<p>I would like a JavaScript function to have optional arguments which I set a default on, which get used if the value isn't defined (and ignored if the value is passed). In Ruby you can do it like this:</p>

<pre><code>def read_file(file, delete_after = false)
  # code
end
</code></pre>

<p>Does this work in JavaScript?</p>

<pre><code>function read_file(file, delete_after = false) {
  // Code
}
</code></pre>


Set a default parameter value for a JavaScript function

我希望JavaScript函数有可选的参数，我对这些参数设置了默认值，如果没有定义值，就会使用这些参数(如果传递了值，则忽略这些参数)。在Ruby中，你可以这样做：def read_file(file, delete_after = false)  # codeend这在JavaScript中可以工作吗？function read_file(file, delete_after = false) 

问设置JavaScript函数的默认参数值
EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问设置JavaScript函数的默认参数值EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问设置JavaScript函数的默认参数值
EN