ES6之函数的扩展

函数的扩展

文章目录

  • 函数的扩展
    • 1:与解构赋值默认值结合使用
    • 2:参数默认值空对象
      • 2.1 案例一
      • 2.2 案例二
      • 2.3 案例三
      • 2.4 案例四
    • 3:undefined null参数默认值的区别
    • 4:函数length
    • 5:作用域
      • 5.1 全局变量
      • 5.2:局部变量
    • 6:暂时性死区
    • 7:函数作为参数
      • 7.1 案例一
      • 7.2 案例二
    • 8:应用
      • 8.1 参数默认值不可以省略
      • 8.2 参数默认值可以省略

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

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

2:参数默认值空对象

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

2.1 案例一

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

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

2.2 案例二

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

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

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

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

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

2.3 案例三

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

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

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

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

2.4 案例四

函数参数默认值应该放在末尾,(如果不是末尾,省略会报错)

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

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

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

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

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

fu3(undefined,null)  // 2 null  

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  

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

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

5:作用域

let x1 = 12
function f4(x1,b=x1) {
    console.log(b)
}
f4(6) // 6

5.1 全局变量

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

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

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

f41(10) // 10

5.2:局部变量

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

f42() // 输出8

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

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

7:函数作为参数

7.1 案例一

let fu44 = 12
function f44(fun = () => fu44) {
    let fu44 = 36
    console.log(fun())
}
f44() // 12

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

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

8:应用

8.1 参数默认值不可以省略

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

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

a12() // Uncaught Error: 缺少 paratment

8.2 参数默认值可以省略

function a13 (fun1 = undefined) {
    console.log(1111)
} 
a13() // 1111

你可能感兴趣的:(es6,前端)