【笔记】ES6 函数的扩展

ES6对函数的使用进行了一些扩展，这篇文章就简单介绍一下这部分的内容。

• 函数参数设置默认值
  ES6允许为函数的参数设置默认值，即直接写在参数定义的后面。

// ES6之前的做法
function func(name) {
  name = name || '李焕英'
  console.log(`你好，${name}`)
}
func() // 你好，李焕英
func('张小斐') // 你好，张小斐

// ES6中，可以在声明函数的时候直接设置参数的默认值
function hello(name = '李焕英') {
  console.log(`你好，${name}`)
}
hello() // 你好，李焕英
hello('张小斐') // 你好，张小斐

// 默认值设置位置的探索
// 如果默认值设置在尾部，则可以直接省略
// 如果默认值设置在头部或中间，需要用undefined或null来占位
function fn1(x, y = 1) {
  console.log(x, y)
}
fn1() // undefined 1
fn1(0) // 0 1
fn1(0, 2) // 0 2
function fn2(x = 0, y) {
  console.log(x, y)
}
fn2() // 0 undefined
fn2(1) // 1 undefined
fn2(, 1) // 报错
fn2(undefined, 1) // 0 1

• 函数参数设置默认值也可以配合解构赋值使用

function intro({ name: '赵四', comeFrom: '象牙山' }) {
  console.log(`我叫${name}，来自${comeFrom}`)
}
intro({}) // 我叫赵四，来自象牙山
intro({ name: '刘能' }) // 我叫刘能，来自象牙山
intro({ name: '王大拿', comeFrom: '龙泉山庄' }) // 我叫王大拿，来自龙泉山庄
intro() // 报错，Cannot read property 'name' of undefined

// 上面例子展示了在对象内部设置默认值，接下来探索一点有趣的
// 下面的函数参数的默认值是空对象，但是设置了对象解构赋值的默认值
function fn1({ name: '小明', age: 18 } = {}) {
  console.log(name, age)
}
// 下面的函数参数的默认值是一个有具体属性的对象，但是没有设置对象解构赋值的默认值
function fn2({ name, age } = { name: '小明', age: 18 }) {
  console.log(name, age)
}
// 都不传参
fn1() // 小明 18
fn2() // 小明 18
// 都正常传参
fn1({ name: '小红', age: 16 }) // 小红 16
fn2({ name: '小红', age: 16 }) // 小红 16
// 只传name
fn1({ name: '小黑' }) // 小黑 18
fn2({ name: '小黑' }) // 小黑 undefined
// 传空对象
fn1({}) // 小明 18
fn2({}) // undefined undefined
// 传对象以外的值
fn1({ sex: '男' }) // 小明 18
fn2({ sex: '男' }) // undefined undefined

• 函数的length属性

// 函数的length属性会返回没有指定默认值的参数个数，但要注意
// 1.如果被设置默认值的参数在中间，该参数之后的参数不参与计算
// 2.如果参数是...args的形式，不参与计算
(function (a) {}).length // 1
(function (a, b) {}).length // 2
(function (a, b = 1) {}).length // 1
(function (a, b = 1, c) {}).length // 1
(function (...args) {}).length // 0

• 函数参数设置默认值时会形成一个单独作用域
  一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域。等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的。——《ECMAScript 6 入门》

// 以下示例同样摘自《ECMAScript 6 入门》
var x = 1
function fn(x, y = x) {
  console.log(y)
}
fn(2) // 2
// 因为fn中给y设置了默认值，括号内的部分形成了一个暂时性的死区，在这个区域有一个x（第一个参数），所以y被设置成了这个x的值

let x = 1
function fn(y = x) {
  let x = 2
  console.log(y)
}
fn() // 1
// 同样的，括号内的部分形成了一个暂时性的死区，在这个区域内没有x，则向上找到全局的x，所以y被设置成了这个全局x的值

function fn(y = x) {
  let x = 2
  console.log(y)
}
fn() // 报错，x is not defined
// 括号内没有x，全局也没有x，所以报错，x未定义

• rest参数（不定参数）
  ES6引入rest参数（形式为…变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了（之前已经学习过，箭头函数中没有arguments对象）。

const add = (...values) => {
  let sum = 0
  for (let val of values) {
    sum += val
  }
  return sum
}
add(1, 2, 3) // 6

• name属性

// 函数的name属性，返回该函数的函数名
function aoeiuv() {}
console.log(aoeiuv.name) // aoeiuv