ES6之函数的扩展

函数的扩展

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

function fun1 ({a,b=10}){
    console.log(a,b)
}
fun1({}) // 0,10
fun1({a:1,b:5}) // 1,5
// 应该对象的的形式，函数内部才能解构取值
fun1()  // 错误
1
2
3
4
5
6
7

​

2：参数默认值空对象

提供一个参数默认值空对象

2.1 案例一

当函数内部进行解构时，默认值为{}空对象，a为undefined,b为默认值

function fun2 ({a,b=2} = {}){
    console.log(a,b)
}
fun2()  // undefined，2
1
2
3
4

2.2 案例二

function fun3 (url,{body='',methods='get',header=''}){
    console.log(url,methods)
}
1
2
3

第二个参数转一个空对象，函数默认值 get 生效

fun3('http://localhost:3000/admin/icmAudit/findPage',{}) // http://localhost:3000/admin/icmAudit/findPage,get
1

在没有传第二个参数时，函数也没有默认第二个参数时，会报错

fun3('http://localhost:3000/admin/icmAudit/findPage') // Uncaught TypeError: Cannot read properties of undefined (reading 'body')
1

2.3 案例三

优化：函数入参第二个参数添加默认值{}

function fun4 (url,{body='',methods='post',header=''} = {}){
    console.log(url,methods)
}
1
2
3

在没有传第二个参数时，函数第二个入参有默认值，正常打印

fun4('http://localhost:3000/admin/icmAudit/findPage')   // http://localhost:3000/admin/icmAudit/findPage,get
1

2.4 案例四

函数参数默认值应该放在末尾，（如果不是末尾，省略会报错）

function fu2 (a=1,b){
    console.log(a,b)
}
fu2(10,8) // 10,8
fu2(,6) // Uncaught SyntaxError: Unexpected token ',' 
1
2
3
4
5

3：undefined null参数默认值的区别

function fu3(a=2,b=3){
    console.log(a,b)
}
1
2
3

测试默认值传undefined和null的区别

undefined 会触发参数默认值，null没有触发参数默认值

fu3(undefined,null)  // 2 null  
1

4：函数length

函数length将返回没有指定默认参数的length

console.log((function(a){}).length) // 1
console.log((function(a,b=12){}).length) // 1
console.log(function(a,b,e=10){}.length) // 2  
1
2
3

默认参数后面的数据不计入length,所以默认参数应放在函数入参末尾，避免不必要错误

console.log(function(a,b=6,e){}.length) // 1  
1

5：作用域

let x1 = 12
function f4(x1,b=x1) {
    console.log(b)
}
f4(6) // 6
1
2
3
4
5

5.1 全局变量

这时候全局变量a41没有使用到，使用的是局部变量

第一个参数a41=10,第二个参数a41取第一个参数的值，那么b等于10，输出10

let a41 = 10
function f41(a41,b=a41) {
    console.log(b)
}

f41(10) // 10
1
2
3
4
5
6

5.2：局部变量

let a42 = 8
function f42(b=a42) {
    let a42 = 12
    console.log(b)
}

f42() // 输出8
1
2
3
4
5
6
7

a42局部变量不会生效，函数括号里面的b=a42形成一个单独作用域

• 步骤一：f42(b=a42)，b取a42值，a42是变量，取不到；
• 步骤二：a42先在函数括号里面这个单独作用域中进行查找，查找不到向上查找，获取的是全局变量的值，
• 步骤三：这时候b再取a42的值，往下进入函数内部。
• 步骤三：这时候函数内部的b的值就是8了

6：暂时性死区

let a43 = 10
function f43(a43=a43) {
}
f43()  //   Cannot access 'a43' before initialization
1
2
3
4

函数括号中let a43 = a43,代码暂时性死区引起的错误

7：函数作为参数

7.1 案例一

let fu44 = 12
function f44(fun = () => fu44) {
    let fu44 = 36
    console.log(fun())
}
f44() // 12
1
2
3
4
5
6

和变量作为参数，方法是相同的

7.2 案例二

复杂的函数参数

var fu46 = 1
function f46(fu46,b = function () { fu46 = 2 }) {
    var fu46 = 12  // 这里的var 加上和去除，最后打印的fu46值都不一样，作用域不同
    b()
    console.log('fu46:',fu46)
}
f46() // 12
console.log('global fu46:',fu46) // 1
1
2
3
4
5
6
7
8

8：应用

8.1 参数默认值不可以省略

function a11 () {
    throw new Error('缺少 paratment')
}

function a12 ( arr = a11()) {
    return arr
}

a12() // Uncaught Error: 缺少 paratment
1
2
3
4
5
6
7
8
9

8.2 参数默认值可以省略

function a13 (fun1 = undefined) {
    console.log(1111)
} 
a13() // 1111
1
2
3
4

ES6之函数的扩展二 传送门