2025第2周 | JavaScript中的函数的参数默认值和剩余参数

2025，做想做的事，读想读的书，持续学习，自律生活，修行人生。

2025一个转身就已到来，对于时间太快，总会有种惶恐感。每每回首过去，总会发现想要做的事情没有完成，学习的内容少之又少，读的有用的书籍更是可以忽略不计。对于内在的超越，内在的修行也是没有始终践行，知行合一，实践、认识、再实践、再认识…

2025年第2周：2025.01.06 ~ 2025.01.12 ，7号星期二

目标：JavaScript中的函数/对象的参数默认值

• 如何给函数参数赋默认值？
• 参数为对象时如何赋默认值？
• 剩余参数是什么？和 arguments 是一个东西么？

1. 函数的默认值

1.1 ES5的时候默认值写法

在ES5的时，给函数参数设置默认值，我们大部分是底下代码的写法，我们会发现此种写法比较繁琐，代码阅读性差，而且存在一些bug。

function foo(m, n) {
	 m = m || "a";
	 n = n || "b";
	 console.log(m , n);
 }
 foo(0, "")    // a b

1.2 es6的默认值

在es6中，我们直接使用如下语法，给参数赋默认值。

function foo(m = "a", n = "b") {
  console.log(m , n);
}
foo(0, "")    // 0 

1.3 babel转换之后

我们使用babel工具进行转换：npx babel ./Test/demo.js --out-file bundle.js，我们会发现babel是使用了argument来判断的。

"use strict";

function foo() {
    var m = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "a";
    var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "b";

    console.log(m, n);
}
foo(0, ""); // a b

1.4 有默认值的参数建议放到最后

有默认值的形参，建议放到最后，这样可以省略一些不必要的参数传递。

function bar(a, b, c=30) {
    console.log(a, b, c);
}
bar(10,20,30)   // 10 20 30

1.5 有默认值的函数length属性

形参有默认值会改变函数的length的值，默认值以及后面的参数都不计算在length之内了。

function bar(a, b, c=30, d, f) {
    console.log(a, b, c);
}
console.log(bar.length) //2

2. 参数为对象时默认值及解构

下面，给出了foo函数，其参数为user为一个对象，里面有name和age两个属性。

function foo(user = {name:"qtz", age:18}) {
    console.log(user.name, user.age);
}
foo() // qtz 18

2.1 默认值和解构一起使用

优化第一种写法：对参数进行解构。这样我们不用再写user.name，直接写name。

function foo2({name, age} = {name:"qtz", age:18}) {
    console.log(name, age);
}
foo2()  // qtz 18
foo2({name:"张三", age:30}) //张三 30

2.2 默认值为一个空对象

优化第二种写法：默认值为一个空对象，然后给解构的变量赋默认值。

function foo3({name = "王五", age = 50} = {}) {
    console.log(name, age);
}
foo3()  // 王五 50

3. 剩余参数

ES6中引用了剩余参数(Rest parameter)，可以将不定数量的参数放入到一个数组中。
在函数中，最后一个参数是以…为前缀的，那么它会将剩余的参数放到该参数中，并且作为一个数组。

function foo(a, b, ...args) {
    console.log(args)   // [ 3, 4, 5 ]
}
foo(1, 2, 3, 4, 5)

3.1 剩余参数必须放到最后

剩余参数必须放到最后，否则会报错：SyntaxError: Rest parameter must be last formal parameter

function foo(...args, a, b) {
    console.log(args) 
}
foo(1, 2, 3, 4, 5) // SyntaxError: Rest parameter must be last formal parameter

3.2 剩余参数和arguments区别

• 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参
• arguments对象不是一个真正的数组，而 rest参数 是一个真正的数组，可以进行数组的所有操作;
• arguments是早期的ECMAScript中为了方便去获取所有的参数提供的一个数据结构，而rest参数是ES6中提供，并且希望以此来替代arguments的。

3.3 解构剩余参数

剩余参数可以被解构，这意味着他们的数据可以被解包到不同的变量中。如下代码所示：

function foo(a, b , ...[c, d , f]) {
    console.log(c, d, f) 
}
foo(1, 2, 3, 4, 5)

END！