参数默认值

在原先的js版本中,并不能直接在参数列表上设置默认值,而是在函数体内部使用||符号来设置默认值。

function fn(par){
    p = par || "node";
    console.log(p)
}
fn()

打印的结果为node
但我们不传参时,par是undefind,然后就使用||后的默认值赋值给p。

而在ES6中,我们可以直接在函数的参数中设置默认值。

function fn(par = "node") {
    console.log(par);
}

fn()

结果也是node,这样就更加方便一点。

参数解构赋值

ES6中新增了解构赋值,当然也可以使用解构赋值来进行传参操作。

function fn({uname, pass}) {
    console.log(uname, pass);
}

fn({uname: 'admin123', pass: 'admin123'})

打印结果admin123 admin123
这种操作类似于传一个对象到函数中,但是需要注意的是如果要传一个空的值进去的话,调用的时候一定要传一个{}

function fn({uname, pass}) {
    console.log(uname, pass);
}

fn({})

或者在参数列表上{}={}这样。

function fn({uname, pass} = {}) {
    console.log(uname, pass);
}

fn()

结果都是undefined undefined

如果不这样的话就会报错,建议在使用解构赋值作为参数时,后面一直加上括号,避免参数为空时报错。

当然也可以为其设置默认值。

function fn({uname = "admin", pass="admin"} = {}) {
    console.log(uname, pass);
}

fn()

结果为admin admin

rest(剩余)参数

在参数个数不确定时,我们可以使用...来代表不确定的参数,这些不确定的参数会压缩到一个数组中

function fn(a,b,...par){
    console.log(a,b,par);
}

fn(123,333,111,333,123)

结果为123 333 [ 111, 333, 123 ]

我们可以看到123赋值给了a,333赋值给了b,而剩下的111,333,123则压缩成了一个数组,赋值给了par。

扩展运算符

扩展运算符的作用是将一个数组扩展到函数的参数列表中,可以直接通过参数给函数的参数赋值。它的符号也是...。但是与剩余列表完全相反,是在调用函数时使用。

function fn(a, b, c, d, e, f, g){
    console.log(a,b,c,d,e,f,g);
}

let arr = [1,2,3,4,5,6,7];

fn(...arr);

结果为1 2 3 4 5 6 7

可以看出这里将数组中的七个值分别赋值给了参数列表中的七个参数,当然参数个数和数组的个数可以不是一样多的。

function fn(a, b, c, d, e, f){
    console.log(a,b,c,d,e,f);
}

let arr = [1,2,3,4,5];

fn(...arr);

结果为1 2 3 4 5 undefined

最后一个因为没匹配上,所以是undefined

最后扩展运算符还可以进行数组的合并操作

a = [1,2,3];
b = [4,5,6];
c = [...a,...b];

console.log(c);

结果为1,2,3,4,5,6

当然这里也可以省略掉...,得到的结果和有...是一样的。

最后编辑:2021年02月09日 ©著作权归作者所有

评论已关闭