JavaScript 函数参数

发表于

JavaScript 在我看来一直比较随性的语言，习惯了 Java 的严格语法控制，面对 JS 函数参数的随意，真是有点头大

JS 的函数参数是可有可无，可大可小，反正就是不报错，下面对参数情况进行逐步解析

常规参数

一般而言定义函数的时候可以没有参数或者有几个参数，无参就不说了，来看看有参的

1
2
3
4
5
6
7
8
9
function abs(x){
    if (x<0) {
        return -x;
    }else{
        return x;
    }
}

abs(-10); // 10

默认参数

默认参数还是比较流行的，看代码

1
2
3
4
5
6
function multiply(a,b=1){// 其中 b 就有默认值
    return a*b;
}

console.log(multiply(5)); // 5
console.log(multiply(5,2)); // 10

Rest 参数

Java 中有可变参数一说，这个跟可变参数差不多

正常用法

1
2
3
4
5
6
7
8
function f(a,b,...manyMoreArgs){
    console.log("a=", a);
    console.log("b=", b);
    console.log("manyMoreArgs=", manyMoreArgs);
}

f(1,2,3,4,5); // a=1 b=2 manyMoreArgs = [3,4,5]
f(1); // a=1 b=undefined manyMoreArgs = []

变态玩法

1
2
3
4
5
6
7
function f(...[a, b, c]) {
    return a + b + c;
}

console.log(f(1));          // NaN (b and c are undefined)
console.log(f(1, 2, 3));    // 6
console.log(f(1, 2, 3, 4)); // 6 (the fourth parameter is not destructured)

可多可少参数

对于 JS 函数，传多传少都没限制，之所以 Rest 参数先说，至少这比较好理解，但对于明明在定义的时候需要参数或者不需要参数，都可以不传或者多传，完全无差，就有点看不下去了

1
2
3
4
5
6
7
8
9
10
11
12
function abs(){
    if(arguments.length === 0){
        return 0;
    }

    var x = arguments[0];
    return x<0?-x:x;
}

console.log(abs()); // 0
console.log(abs(10)); // 10
console.log(abs(-9)); // 9

因为函数内部有个关键字 arguments ，其会接收并存储传入的实参，不管多少，这是一个跟 Array 类似的对象

还有更有趣的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 其一
function func(a) {
    arguments[0] = 99; // 会同时改变变量 a 的值
    console.log(a); // 99
}
func(10);

// 其二
function func(a) {
    a = 99; // 会同时改变 arguments[0] 的值
    console.log(arguments[0]); // 99
}
func(10);

// 其三
function func(a = 55) {
    arguments[0] = 99; // 对于有默认值的参数，更新 arguments 中的值，不会改变变量 a 的值
    console.log(a); // 10
}
func(10);

// 其四
function func(a = 55) {
    a = 99; // 对于有默认值的参数，更新变量 a 的值，不会改变 arguments 中的值
    console.log(arguments[0]); // 10
}
func(10);

// 其五 这个应该好理解
function func(a = 55) {
    console.log(arguments[0]); // undefined
}
func();

可以利用 arguments 做可选参数

1
2
3
4
5
6
7
8
9
10
// foo(a[, b], c)
// 接收 2~3 个参数，b 是可选参数，如果只传 2 个参数，b 默认为 null：
function foo(a, b, c) {
    if (arguments.length === 2) {
        // 实际拿到的参数是 a 和 b，c 为 undefined
        c = b; // 把 b 赋给 c
        b = null; // b 变为默认值
    }
    // ...
}

解构赋值

所谓解构赋值，就是直接对多个变量同时赋值。如

1
var [x, y, z] = ['hello', 'JavaScript', 'ES6'];

用于对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var person = {
    name: '小明',
    age: 20,
    gender: 'male',
    passport: 'G-12345678',
    school: 'No.4 middle school'
};

// 把 passport 属性赋值给变量 id:
let {name, passport:id} = person;
name; // '小明'
id; // 'G-12345678'
// 注意: passport 不是变量，而是为了让变量 id 获得 passport 属性:
passport; // Uncaught ReferenceError: passport is not defined

那么将解构赋值用于函数呢

1
2
3
4
5
function f({a,b,c}){
    console.log('a = '+ a +' b = ' + b +' c = '+ c);
}

f({a:1,b:2,c:3}); // a = 1 b = 2 c = 3

结尾没有啥可说的