【05】ES6：函数的扩展

一、函数参数的默认值

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

1、基本用法

默认值的生效条件

不传参数，或者明确的传递 undefined 作为参数，只有这两种情况下，默认值才会生效。

注意：null 就是 null，不会使用默认值。

// ES6 之前的默认值实现方式
const log = (x, y) => {// typeof类型检测：返回表示当前数据类型的字符串if (typeof y === 'undefined') {y = 'world'}console.log(x, y)
}log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

// ES6 默认值实现方式
function log(x, y = 'World') {console.log(x, y)
}log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

默认值的一些规则

参数变量是默认声明的，所以不能用let或const再次声明。

function foo(x = 5) {let x = 1 // errorconst x = 2 // error
}

使用参数默认值时，函数不能有同名参数。

// 不报错
function foo(x, x, y) {// ...
}// 报错 SyntaxError: Duplicate parameter name not allowed in this context
function foo(x, x, y = 1) {// ...
}

参数默认值是惰性求值的。参数默认值不是传值的，而是每次都重新计算默认值表达式的值。

let x = 99
function foo(p = x + 1) {console.log(p)
}foo() // 100x = 100
foo() // 101

2、与解构赋值默认值结合使用

函数参数默认值 可以与 解构赋值的默认值，结合起来使用。通过给函数参数设置默认值，可以避免在没有提供参数时出现错误。

// 只使用对象的解构赋值默认值
function foo({ x, y = 5 }) {console.log(x, y)
}foo({}) // undefined 5
foo({ x: 1 }) // 1 5
foo({ x: 1, y: 2 }) // 1 2
// 函数 foo()调用时没提供参数，变量 x 和 y 就不会生成，从而报错
foo() // TypeError: Cannot read property 'x' of undefined// -------------------------------------------// 使用对象的解构赋值默认值 + 函数参数的默认值
function foo({ x, y = 5 } = {}) {console.log(x, y)
}foo() // undefined 5

// 只使用对象的解构赋值默认值
function fetch(url, { body = '', method = 'GET', headers = {} }) {console.log(method)
}fetch('http://example.com', {}) // 'GET'
fetch('http://example.com') // 报错// --------------------------------------------------// 使用对象的解构赋值默认值 + 函数参数的默认值
function fetch(url, { body = '', method = 'GET', headers = {} } = {}) {console.log(method)
}fetch('http://example.com') // 'GET'

注意，函数参数的默认值生效以后，参数解构赋值依然会进行。

// 参数默认值 { a: 'hello' } 生效；进行解构赋值，从而触发参数变量 b 的默认值生效。
function f({ a, b = 'world' } = { a: 'hello' }) {console.log(b)
}f() // world// 解构赋值的默认值只在属性值为 undefined 时才会生效
function f({ a, b = 'world' } = { b: 'hello' }) {console.log(b)
}f() // hello

3、参数默认值的位置

通常情况下，定义了默认值的参数，应该是函数的尾参数。因为这样比较容易看出来，到底省略了哪些参数。如果非尾部的参数设置默认值，实际上这个参数是没法省略的。

// 例一
function f(x = 1, y) {return [x, y]
}f() // [1, undefined]
f(2) // [2, undefined]
f(, 1) // 报错
f(undefined, 1) // [1, 1]// 例二
function f(x, y = 5, z) {return [x, y, z]
}f() // [undefined, 5, undefined]
f(1) // [1, 5, undefined]
f(1, ,2) // 报错
f(1, undefined, 2) // [1, 5, 2]

上面代码中，有默认值的参数都不是尾参数。这时，无法只省略该参数，而不省略它后面的参数，除非显式输入 undefined。

如果传入 undefined，将触发该参数等于默认值，null 则没有这个效果。

function foo(x = 5, y = 6) {console.log(x, y)
}foo(undefined, null) // 5 null

4、函数的 length 属性

函数的 length 属性，等于该函数预期传入的参数个数。

当函数指定默认值后，length 属性将失真。将返回没有指定默认值的参数个数，如果设置了默认值的参数不是尾参数，那么 length 属性也不再计入后面的参数了。

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2(function(...args) {}).length // 0(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1

5、应用

利用参数默认值，可以指定某一个参数不得省略，如果省略就抛出一个错误。

function throwIfMissing() {throw new Error('Missing parameter')
}function foo(mustBeProvided = throwIfMissing()) {return mustBeProvided
}foo() // Error: Missing parameter

上面代码的 foo 函数，如果调用的时候没有参数，就会调用默认值 throwIfMissing 函数，从而抛出一个错误。

从上面代码还可以看到，参数 mustBeProvided 的默认值等于 throwIfMissing 函数的运行结果（注意函数名 throwIfMissing 之后有一对圆括号），这表明参数的默认值不是在定义时执行，而是在运行时执行。如果参数已经赋值，默认值中的函数就不会运行。

另外，可以将参数默认值设为 undefined，表明这个参数是可以省略的。

function foo(optional = undefined) { ··· }

二、reset 参数（…不定参数）

ES6 引入 rest 参数（形式为…变量名），用于获取函数的多余参数，这样就不需要使用 arguments 对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(...values) {let sum = 0for (var val of values) {sum += val}return sum
}add(2, 5, 3) // 10

// arguments 变量的写法
function sortNumbers() {// arguments 为类数组对象，需先使用 Array.from 转换为数组return Array.from(arguments).sort()
}// rest 参数的写法 （reset 参数为真正的数组）
const sortNumbers = (...numbers) => numbers.sort()

注意，rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

// 报错
function f(a, ...b, c) {// ...
}

函数的 length 属性，不包括 rest 参数。

(function(a) {}).length  // 1
(function(...a) {}).length  // 0
(function(a, ...b) {}).length  // 1

三、箭头函数

ES6 规定了可以使用 “箭头” => 来定义一个函数，语法更加简洁。它没有自己的 this、arguments、super 或 new.target，箭头函数表达式更适用于那些本来需要匿名函数的地方，但它不能用作构造函数。

1、基本使用

普通函数

function 函数名() {}const 变量名 = function () {}

箭头函数

(参数) => {函数体}const 变量名 = () => {}

// 基本语法
const add = (x, y) => {return x + y
}// 有且只有一个参数，（）可以省略
const add = x => {return x + 1
}// 有且只有一条语句，且为 returen 语句，{} 和 return 可以省略
const add = (x, y) => x + y// return 为对象时，对象外需要加 ()
const add = (x, y) => {return {value: x + y}
}
const add = (x, y) => ({ value: x + y })

2、函数 this 指向

es5 中的 this 指向

函数 this 的取值，是在函数执行的过程中确定的，不是在函数定义时确定的。

(1) 作为普通函数被调用，this 指向 window

(2) 作为对象方法被调用时，this 指向当前对象

(3) 在构造函数中（es5, es6的class方法），this 指向通过构造函数创建的实例对象

(5) 定时器中函数的 this 指向 window，定时器中函数相当于普通函数被调用(setTimeout | setInterval)

es6 中箭头函数的 this 指向

箭头函数中的 this 是在定义的时候绑定的，this 取上级作用域的 this，箭头函数本身不会决定 this 的值。

call、 apply 、 bind

fn.call(this, …params) 和 fn.apply(this, [params]) 都是用来改变函数的this指向
区别是传参不同，call()接受的是列表，apply()接受的是数组

fn.bind(this, params) 方法也是用来改变函数this指向，但是不会立即执行，而是返回一个新函数

3、不适用箭头函数的场景

作为构造函数

因为箭头函数没有 this，而构造函数的核心就是 this。

需要 this 指向调用对象的时候

因为箭头函数没有 this，所以如果箭头函数中出现了 this，那么这个 this 就是外层的！

给事件绑定方法时，比如说通过 addEventListener 给某个事件绑定方法，如果使用箭头函数，此时 this，会指向父级的this window

在定义某个对象的方法时，不可以使用箭头函数

在 vue 的 methods 中的方法，也不可以使用箭头函数，会使 this 指向的不是当前的vm实例，发生错误

需要使用 arguments 的时候

箭头函数没有 arguments。（这个问题有替代解决方案：不定参数）

没有原型

由于箭头函数不能用作构造函数，它们也没有自己的原型。因此，不能使用 prototype 属性来添加新方法。

不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数

四、函数参数的尾逗号

ES2017 允许函数的最后一个参数有尾逗号（trailing comma）。

此前，函数定义和调用时，都不允许最后一个参数后面出现逗号。

function clownsEverywhere(param1,param2
) { /* ... */ }clownsEverywhere('foo','bar'
)

上面代码中，如果在 param2 或 bar 后面加一个逗号，就会报错。

如果像上面这样，将参数写成多行（即每个参数占据一行），以后修改代码的时候，想为函数 clownsEverywhere 添加第三个参数，或者调整参数的次序，就势必要在原来最后一个参数后面添加一个逗号。这对于版本管理系统来说，就会显示添加逗号的那一行也发生了变动。这看上去有点冗余，因此新的语法允许定义和调用时，尾部直接有一个逗号。

function clownsEverywhere(param1,param2,
) { /* ... */ }clownsEverywhere('foo','bar',
)

这样的规定也使得，函数参数与数组和对象的尾逗号规则，保持一致了。

五、catch 命令的参数省略

JavaScript 语言的 try…catch 结构，以前明确要求 catch 命令后面必须跟参数，接受 try 代码块抛出的错误对象。

try {// ...
} catch (err) {// 处理错误
}

上面代码中，catch命令后面带有参数err。

很多时候，catch代码块可能用不到这个参数。但是，为了保证语法正确，还是必须写。ES2019 做出了改变，允许catch语句省略参数。

try {// ...
} catch {// ...
}