ES6之函数的扩展

函数的扩展

文章目录

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

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

javascript 复制代码

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为默认值

javascript 复制代码

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

2.2 案例二

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

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

2.3 案例三

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

javascript 复制代码

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

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

javascript 复制代码

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

2.4 案例四

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

javascript 复制代码

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

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

javascript 复制代码

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

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

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

javascript 复制代码

fu3(undefined,null)  // 2 null

4：函数length

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

javascript 复制代码

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

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

javascript 复制代码

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

5：作用域

javascript 复制代码

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

5.1 全局变量

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

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

javascript 复制代码

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

f41(10) // 10

5.2：局部变量

javascript 复制代码

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：暂时性死区

javascript 复制代码

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

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

7：函数作为参数

7.1 案例一

javascript 复制代码

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

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

7.2 案例二

复杂的函数参数

javascript 复制代码

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 参数默认值不可以省略

javascript 复制代码

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

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

a12() // Uncaught Error: 缺少 paratment

8.2 参数默认值可以省略

javascript 复制代码

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