1. 实现默认参数的传统做法：
    1. function f(a) { a = a || 1; ... }
    2. function f(a) { if(typeof a === 'undefined') { a = 1 } ... }
  2. ES6 推出的默认参数语法：**function f(a = 1) { ... }**
  3. 若在定义参数时使用了默认参数的语法，函数将自动转为严格模式
  4. 使用参数默认值时，函数不能有同名参数
  5. 参数默认值是惰性求值的
  6. 若显式给传 undefined，将触发参数使用默认值
  7. 通常默认参数应该是函数的尾参数
  8. 若定义了默认参数 f.length 将返回函数 f 没有指定默认参数的个数
  9. 如果设置了默认值的参数不是尾参数，那么f.length 也将不再计入后面的参数
  10. 一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）
  11. 若使用了参数默认值，默认开启严格模式，arguments 将和形参脱离

基本用法

ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法。

  1. function log(x, y) {
  2.   y = y || 'World';
  3.   console.log(x, y);
  4. }
  6. log('Hello') // Hello World
  7. log('Hello', 'China') // Hello China
  8. log('Hello', '') // Hello World

上面代码检查函数log()的参数y有没有赋值，如果没有，则指定默认值为World。这种写法的缺点在于，如果参数y赋值了，但是对应的布尔值为false，则该赋值不起作用。就像上面代码的最后一行，参数y等于空字符，结果被改为默认值。

为了避免这个问题，通常需要先判断一下参数y是否被赋值，如果没有，再等于默认值。

  1. if (typeof y === 'undefined') {
  2.   y = 'World';
  3. }

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

  1. function log(x, y = 'World') {
  2.   console.log(x, y);
  3. }
  5. log('Hello') // Hello World
  6. log('Hello', 'China') // Hello China
  7. log('Hello', '') // Hello

可以看到，ES6 的写法比 ES5 简洁许多，而且非常自然。下面是另一个例子。

  1. function Point(x = 0, y = 0) {
  2.   this.x = x;
  3.   this.y = y;
  4. }
  6. const p = new Point();
  7. p // { x: 0, y: 0 }

除了简洁，ES6 的写法还有两个好处：

  1. 首先，阅读代码的人，可以立刻意识到哪些参数是可以省略的，不用查看函数体或文档；
  2. 其次，有利于将来的代码优化，即使未来的版本在对外接口中，彻底拿掉这个参数，也不会导致以前的代码无法运行。

参数变量是默认声明的，所以不能用let或const再次声明。

  1. function foo(x = 5) {
  2.   let x = 1; // error
  3.   const x = 2; // error
  4. }

上面代码中，参数变量x是默认声明的，在函数体中，不能用let或const再次声明，否则会报错。

使用参数默认值时，函数不能有同名参数。

  1. // 不报错
  2. function foo(x, x, y) {
  3.   // ...
  4. }
  6. // 报错
  7. function foo(x, x, y = 1) {
  8.   // ...
  9. }
  10. // SyntaxError: Duplicate parameter name not allowed in this context

另外，一个容易忽略的地方是，参数默认值不是传值的，而是每次都重新计算默认值表达式的值。也就是说，参数默认值是惰性求值的。

  1. let x = 99;
  2. function foo(p = x + 1) {
  3.   console.log(p);
  4. }
  6. foo() // 100
  8. x = 100;
  9. foo() // 101

上面代码中，参数p的默认值是x + 1。这时，每次调用函数foo()，都会重新计算x + 1，而不是默认p等于 100。

与解构赋值默认值结合使用

参数默认值可以与解构赋值的默认值，结合起来使用。

  1. function foo({x, y = 5}) {
  2.   console.log(x, y);
  3. }
  5. foo({}) // undefined 5
  6. foo({x: 1}) // 1 5
  7. foo({x: 1, y: 2}) // 1 2
  8. foo() // TypeError: Cannot read property 'x' of undefined

上面代码只使用了对象的解构赋值默认值，没有使用函数参数的默认值。只有当函数foo()的参数是一个对象时，变量x和y才会通过解构赋值生成。如果函数foo()调用时没提供参数，变量x和y就不会生成，从而报错。通过提供函数参数的默认值，就可以避免这种情况。

  1. function foo({x, y = 5} = {}) {
  2.   console.log(x, y);
  3. }
  5. foo() // undefined 5

上面代码指定，如果没有提供参数，函数foo的参数默认为一个空对象。

下面是另一个解构赋值默认值的例子。

  1. function fetch(url, { body = '', method = 'GET', headers = {} }) {
  2.   console.log(method);
  3. }
  5. fetch('http://example.com', {})
  6. // "GET"
  8. fetch('http://example.com')
  9. // 报错

上面代码中，如果函数fetch()的第二个参数是一个对象，就可以为它的三个属性设置默认值。这种写法不能省略第二个参数，如果结合函数参数的默认值，就可以省略第二个参数。这时，就出现了双重默认值。

  1. function fetch(url, { body = '', method = 'GET', headers = {} } = {}) {
  2.   console.log(method);
  3. }
  5. fetch('http://example.com')
  6. // "GET"

上面代码中，函数fetch没有第二个参数时，函数参数的默认值就会生效，然后才是解构赋值的默认值生效，变量method才会取到默认值GET。

注意，函数参数的默认值生效以后，参数解构赋值依然会进行。

  1. function f({ a, b = 'world' } = { a: 'hello' }) {
  2.   console.log(b);
  3. }
  5. f() // world

上面示例中，函数f()调用时没有参数，所以参数默认值{ a: 'hello' }生效，然后再对这个默认值进行解构赋值，从而触发参数变量b的默认值生效。

作为练习，大家可以思考一下，下面两种函数写法有什么差别？

  1. // 写法一
  2. function m1({x = 0, y = 0} = {}) {
  3.   return [x, y];
  4. }
  6. // 写法二
  7. function m2({x, y} = { x: 0, y: 0 }) {
  8.   return [x, y];
  9. }
  11. // 函数没有参数的情况
  12. m1() // [0, 0]
  13. m2() // [0, 0]
  15. // x 和 y 都有值的情况
  16. m1({x: 3, y: 8}) // [3, 8]
  17. m2({x: 3, y: 8}) // [3, 8]
  19. // x 有值，y 无值的情况
  20. m1({x: 3}) // [3, 0]
  21. m2({x: 3}) // [3, undefined]
  23. // x 和 y 都无值的情况
  24. m1({}) // [0, 0];
  25. m2({}) // [undefined, undefined]
  27. m1({z: 3}) // [0, 0]
  28. m2({z: 3}) // [undefined, undefined]

参数默认值的位置

通常情况下，定义了默认值的参数，应该是函数的尾参数。因为这样比较容易看出来，到底省略了哪些参数。如果非尾部的参数设置默认值，实际上这个参数是没法省略的。

  1. // 例一
  2. function f(x = 1, y) {
  3.   return [x, y];
  4. }
  6. f() // [1, undefined]
  7. f(2) // [2, undefined]
  8. f(, 1) // 报错
  9. f(undefined, 1) // [1, 1]
  11. // 例二
  12. function f(x, y = 5, z) {
  13.   return [x, y, z];
  14. }
  16. f() // [undefined, 5, undefined]
  17. f(1) // [1, 5, undefined]
  18. f(1, ,2) // 报错
  19. f(1, undefined, 2) // [1, 5, 2]

上面代码中，有默认值的参数都不是尾参数。这时，无法只省略该参数，而不省略它后面的参数，除非显式输入undefined。

如果传入undefined，将触发该参数等于默认值，null则没有这个效果。

  1. function foo(x = 5, y = 6) {
  2.   console.log(x, y);
  3. }
  5. foo(undefined, null)
  6. // 5 null

上面代码中，x参数对应undefined，结果触发了默认值，y参数等于null，就没有触发默认值。

函数的 length 属性

指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。也就是说，指定了默认值后，length属性将失真。

  1. (function (a) {}).length // 1
  2. (function (a = 5) {}).length // 0
  3. (function (a, b, c = 5) {}).length // 2

上面代码中，length属性的返回值，等于函数的参数个数减去指定了默认值的参数个数。比如，上面最后一个函数，定义了 3 个参数，其中有一个参数c指定了默认值，因此length属性等于3减去1，最后得到2。

这是因为length属性的含义是，该函数预期传入的参数个数。某个参数指定默认值以后，预期传入的参数个数就不包括这个参数了。同理，rest 参数也不会计入length属性。

  1. (function(...args) {}).length // 0

如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了。

  1. (function (a = 0, b, c) {}).length // 0
  2. (function (a, b = 1, c) {}).length // 1

作用域

一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）。等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的。

  1. var x = 1;
  3. function f(x, y = x) {
  4.   console.log(y);
  5. }
  7. f(2) // 2

上面代码中，参数y的默认值等于变量x。调用函数f时，参数形成一个单独的作用域。在这个作用域里面，默认值变量x指向第一个参数x，而不是全局变量x，所以输出是2。

再看下面的例子。

  1. let x = 1;
  3. function f(y = x) {
  4.   let x = 2;
  5.   console.log(y);
  6. }
  8. f() // 1

上面代码中，函数f调用时，参数y = x形成一个单独的作用域。这个作用域里面，变量x本身没有定义，所以指向外层的全局变量x。函数调用时，函数体内部的局部变量x影响不到默认值变量x。

如果此时，全局变量x不存在，就会报错。

  1. function f(y = x) {
  2.   let x = 2;
  3.   console.log(y);
  4. }
  6. f() // ReferenceError: x is not defined

下面这样写，也会报错。

  1. var x = 1;
  3. function foo(x = x) {
  4.   // ...
  5. }
  7. foo() // ReferenceError: Cannot access 'x' before initialization

上面代码中，参数x = x形成一个单独作用域。实际执行的是let x = x，由于暂时性死区的原因，这行代码会报错。

如果参数的默认值是一个函数，该函数的作用域也遵守这个规则。请看下面的例子。

  1. let foo = 'outer';
  3. function bar(func = () => foo) {
  4.   let foo = 'inner';
  5.   console.log(func());
  6. }
  8. bar(); // outer

上面代码中，函数bar的参数func的默认值是一个匿名函数，返回值为变量foo。函数参数形成的单独作用域里面，并没有定义变量foo，所以foo指向外层的全局变量foo，因此输出outer。

如果写成下面这样，就会报错。

  1. function bar(func = () => foo) {
  2.   let foo = 'inner';
  3.   console.log(func());
  4. }
  6. bar() // ReferenceError: foo is not defined

上面代码中，匿名函数里面的foo指向函数外层，但是函数外层并没有声明变量foo，所以就报错了。

下面是一个更复杂的例子。

  1. var x = 1;
  2. function foo(x, y = function() { x = 2; }) {
  3.   var x = 3;
  4.   y();
  5.   console.log(x);
  6. }
  8. foo() // 3
  9. x // 1

上面代码中，函数foo的参数形成一个单独作用域。这个作用域里面，首先声明了变量x，然后声明了变量y，y的默认值是一个匿名函数。这个匿名函数内部的变量x，指向同一个作用域的第一个参数x。函数foo内部又声明了一个内部变量x，该变量与第一个参数x由于不是同一个作用域，所以不是同一个变量，因此执行y后，内部变量x和外部全局变量x的值都没变。

如果将var x = 3的var去除，函数foo的内部变量x就指向第一个参数x，与匿名函数内部的x是一致的，所以最后输出的就是2，而外层的全局变量x依然不受影响。

  1. var x = 1;
  2. function foo(x, y = function() { x = 2; }) {
  3.   x = 3;
  4.   y();
  5.   console.log(x);
  6. }
  8. foo() // 2
  9. x // 1

应用

利用参数默认值，可以指定某一个参数不得省略，如果省略就抛出一个错误。

  1. function throwIfMissing() {
  2.   throw new Error('Missing parameter');
  3. }
  5. function foo(mustBeProvided = throwIfMissing()) {
  6.   return mustBeProvided;
  7. }
  9. foo()
  10. // Error: Missing parameter

上面代码的foo函数，如果调用的时候没有参数，就会调用默认值throwIfMissing函数，从而抛出一个错误。

从上面代码还可以看到，参数mustBeProvided的默认值等于throwIfMissing函数的运行结果（注意函数名throwIfMissing之后有一对圆括号），这表明参数的默认值不是在定义时执行，而是在运行时执行。如果参数已经赋值，默认值中的函数就不会运行。

另外，可以将参数默认值设为undefined，表明这个参数是可以省略的。

  1. function foo(optional = undefined) { ··· }

demos

若我们在定义函数时，没有给对应的形参赋默认值，那么默认我们给它赋的值为 undefined。

  1. function sum(a, b, c) {
  2.   return a + b + c;
  3. }
  4. /* 等效：
  5. function sum(a = undefined, b = undefined, c = undefined) {
  6.     return a + b + c;
  7. }
  8. */
  9. sum(10, 1, 2); // => 13
  10. sum(11, 1, 2); // => 14
  11. sum(12, 1, 2); // => 15

若 sum() 仅传入了第一个参数，则设置第二个形参 b 的值为默认值 1；第三个形参 c 的值为默认值 2。

  1. // ES6 之前的做法
  2. function sum(a, b, c) {
  3.   b = b === undefined && 1; // 不要写成 b = b || 1; 这么写的话 b 如果传的是 0 那么 b 也会取默认值 1
  4.   c = c === undefined && 2;
  5.   return a + b + c;
  6. }
  8. sum(10); // => 13
  9. sum(11); // => 14
  10. sum(12); // => 15
  12. // 使用 ES6 中的默认参数来实现
  13. function sum(a, b = 1, c = 2) {
  14.   return a + b + c;
  15. }
  17. sum(10); // => 13
  18. sum(11); // => 14
  19. sum(12); // => 15
  20. sum(3, 3, 4); // => 10
  22. // 若想要让第二个参数取默认值，第三个参数为我们传递的值，只要想下面这样来调用即可。
  23. sum(1, undefined, 8); // => 10
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>23.08.05</title>
  7.   <style>
  8.     div {
  9.       color: red;
  10.     }
  12.     p {
  13.       color: blue;
  14.     }
  15.   </style>
  16. </head>
  18. <body>
  19.   <script>
  20.     /**
  21.      * 向指定容器中添加元素
  22.      * 并且可以设置添加的元素的内容
  23.      * @param {String} name 元素的名字
  24.      * @param {HTMLElement} container 元素的父元素
  25.      * @param {String} content 元素的内容
  26.      */
  27.     function createElement(name = 'div', container = document.body, content) {
  28.       const ele = document.createElement(name);
  29.       if (content) { // 防止内容默认为 undefined
  30.         ele.innerHTML = content;
  31.       }
  32.       container.appendChild(ele);
  33.     }
  35.     createElement(undefined, undefined, 'dahuyou');
  36.     createElement('p', undefined, 'xiaohuyou');
  37.   </script>
  38. </body>
  40. </html>

image.png

面试题：问 ‘abc’ 会输出几次？

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>23.08.05</title>
  7.   <style>
  8.     div {
  9.       color: red;
  10.     }
  12.     p {
  13.       color: blue;
  14.     }
  15.   </style>
  16. </head>
  18. <body>
  19.   <script>
  20.     /*
  21.     面试题：问 'abc' 会输出几次？
  22.     */
  23.     function getContainer() {
  24.       console.log('abc');
  25.       return document.body;
  26.     }
  28.     function createElement(name = 'div', container = getContainer(), content) {
  29.       const ele = document.createElement(name);
  30.       if (content) {
  31.         ele.innerHTML = content;
  32.       }
  33.       container.appendChild(ele);
  34.     }
  36.     createElement(undefined, undefined, 'dahuyou');
  37.     createElement('p', undefined, 'xiaohuyou');
  38.     createElement(undefined, document.querySelector('div'), 'dahuyou');
  39.     /*
  40.     答：2次
  41.     实际上问的就是 有多少次第二个参数传入的是 undefined
  42.     即：有多少次第二个参数取的是默认值
  43.     即：函数 getContainer 调用的次数
  45.     getContainer 函数只会在 createElement 函数的第二个参数取默认值的情况下才会调用。
  46.     取默认值：也就是传入的值是 undefined（没有传值相当于传入的是 undefined）。
  47.     */
  48.   </script>
  49. </body>
  51. </html>

image.png

  1. /*
  2. 在非严格模式下 arguments 和形参之间存在映射关系
  3. */
  4. function test(a, b) {
  5.   console.log('arguments:', arguments[0], arguments[1]);
  6.   console.log('a:', a, 'b:', b);
  7.   a = 3;
  8.   console.log('arguments:', arguments[0], arguments[1]);
  9.   console.log('a:', a, 'b:', b);
  10. }
  12. test(1, 2);
  13. /* output
  14. arguments: 1 2
  15. a: 1 b: 2
  16. arguments: 3 2
  17. a: 3 b: 2
  18. */
  1. /*
  2. 在严格模式下 arguments 和形参之间不存在映射关系
  3. */
  4. 'use strict'
  6. function test(a, b) {
  7.   console.log('arguments:', arguments[0], arguments[1]);
  8.   console.log('a:', a, 'b:', b);
  9.   a = 3;
  10.   console.log('arguments:', arguments[0], arguments[1]);
  11.   console.log('a:', a, 'b:', b);
  12. }
  14. test(1, 2);
  15. /* output
  16. arguments: 1 2
  17. a: 1 b: 2
  18. arguments: 1 2
  19. a: 3 b: 2
  20. */
  1. /*
  2. 使用了函数参数默认值 自动转化为 严格模式
  3. */
  4. function test(a = 1, b) {
  5.   console.log('arguments:', arguments[0], arguments[1]);
  6.   console.log('a:', a, 'b:', b);
  7.   a = 3;
  8.   console.log('arguments:', arguments[0], arguments[1]);
  9.   console.log('a:', a, 'b:', b);
  10. }
  12. test(1, 2);
  14. /* output
  15. arguments: 1 2
  16. a: 1 b: 2
  17. arguments: 1 2
  18. a: 3 b: 2
  19. */
  1. /*
  2. 形参和ES6中的 let 或 const 声明一样，具有作用域，并且根据参数的声明顺序，存在暂时性死区。
  3. */
  4. function test(a, b) {
  5.   let a = 1; // 该行报错
  6.   console.log(a, b);
  7. }
  9. test(undefined, 1); // Uncaught SyntaxError: Identifier 'a' has already been declared
  1. function test(a, b = a) { // 先声明的 a 再拿 a 给 b 赋值 不会报错
  2.   console.log(a, b);
  3. }
  5. test(1); // 1 1
  7. function test(a = b, b) { // 该行报错 因为拿 b 给 a 赋值的时候 b 还没声明
  8.   console.log(a, b);
  9. }
  11. test(undefined, 1); // Uncaught ReferenceError: Cannot access 'b' before initialization
  1. // 多个默认参数
  2. function showInfo(name = "Guest", age = 25) {
  3.     console.log("Name:", name);
  4.     console.log("Age:", age);
  5. }
  7. showInfo();              // 输出：Name: Guest, Age: 25
  8. showInfo("Bob");         // 输出：Name: Bob, Age: 25
  9. showInfo("Bob", 30);     // 输出：Name: Bob, Age: 30
  1. // 使用先前的参数作为默认值
  2. function createFullName(firstName, lastName = firstName) {
  3.     return firstName + " " + lastName;
  4. }
  6. console.log(createFullName("Alice"));  // 输出：Alice Alice
  1. // 使用 undefined 触发使用默认值
  2. function greet(name = "Guest") {
  3.     console.log("Hello, " + name + "!");
  4. }
  6. greet(undefined);  // 输出：Hello, Guest!
  7. greet(null);       // 输出：Hello, null!