ES6 - 函数的参数

66 阅读2分钟

参数的默认值

ES5中给默认值存在的问题

0在判断中会被判断为false

// 实际上想输出"hello 0" 但是确输出"hello world"
function foo(x,y){
    y = y || 'world'
    console.log(x,y);
}

foo('hello',0)             // hello world

ES6中可以给函数设置默认值

function foo(x,y = 'world'){
    console.log(x,y);
}
foo('hello')           // hello world 
foo('hello',0)         // hello 0 

除了让代码更加简洁之外

函数给了默认值,这样给阅读代码的人来说是非常友好的,可以意识到哪些参数是必传的哪些是可以省略的

函数内部的参数默认是被声明过的,不可以重复声明

function foo(x = 5){
    let x = 1
}
foo()             // Identifier 'x' has already been declared 

参数的默认值尽量放到最后一个

//实际上想要x=1,y=5,z=3
function foo(x, y = 5, z){
    console.log(x,y,z);
} 
foo(1,3)             // 1 3 undefined,z是undefined
foo(1, ,3)           // 报错

// 实参与形参是通过顺序去对应的
function foo(x, z, y = 5){
    console.log(x,y,z);
}
foo(1,3)            // 1,5,3

与解构赋值结合

进行解构赋值的时候,2边的模式要匹配否则就会报错

function foo({x, y = 5}){
    console.log(x,y);
}

foo()               // Cannot read properties of undefined (reading 'x')
 

函数参数是对象时的默认值

function ajax(url,{
    body =  '',
    method = 'GET',
    headers = {}
} = {}){
    console.log(method);
}
ajax('http://www.baidu.com',{method: 'Post'})     // Post

length属性

返回函数中没有指定默认值的参数的个数

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

console.log(foo.length);                          // 0

作用域

一旦函数的参数中给了默认值,那么函数的参数就会形成单独的作用域(不设置默认值的时候是不会出现的)

例1

// y给了默认值,因此它会在括号中形成单独的作用域,y就是括号中的x,而这个x的值就是传的值
let x = 1
function foo(x, y = x){
    console.log(y);
}
foo(2)                                         // 2

例2

// 当前作用域中没有定义x,于是就沿着作用域链网上找,找到了全局作用域下的x值为1
let x = 1
function foo(y = x){
    let x = 2
    console.log(y);
}
foo()                                        // 1

例3

function foo(y = x){
    let x = 2
    console.log(y);
}
foo()                                      // x is not defined

函数的name属性

例1

console.log((new Function).name)          // anonymous

例2

function foo(x, y){
    console.log(this, x, y);
}
foo.bind.call({name:'lee'},1,2)         // {name: 'lee'} 1 2
console.log((foo.bind({}).name));      // bound foo