JavaScript之函数(一)
默认参数值
在ES6之前，我们想要实现默认参数的话，需要先检测某个参数是否等于undefined，如果是的话，证明此时并没有传这个参数，那就给它一个默认值。
function mytest(name) {
name = typeof name === 'undefined' ? 'clz' : name
return name
}
console.log(mytest('赤蓝紫')) // 赤蓝紫
console.log(mytest()) // clz
但是,ES6之后，就不需要这么麻烦了，ES6支持显示定义默认参数，只需要在函数定义的参数后面使用=就可以给参数设置一个默认值。另外，给参数传 undefined相当于没有传值
function mytest(name = 'clz', age = 21) {
return `${name}的年龄是${age}`
}
console.log(mytest()) // clz的年龄是21
console.log(mytest('赤蓝紫')) // 赤蓝紫的年龄是21
console.log(mytest(undefined, 999)) // clz的年龄是999
使用默认参数时，参数的默认值不会影响到arguments对象，只会影响函数的参数。
function mytest(name = 'clz', age = 21) {
console.log(name, age)
return `${arguments[0]} ${arguments[1]}`
}
console.log(mytest())
console.log('%c%s', 'color: red;font-size:24px;', '===========================')
console.log(mytest('赤蓝紫'))
console.log('%c%s', 'color: red;font-size:24px;', '===========================')
console.log(mytest(undefined, 999))
默认参数不仅可以是原始值、对象，还可能是JS表达式，如调用函数
function sum(a, b) {
return a + b
}
function mytest(name = 'clz', age = sum(10, 11)) {
return `${name} ${age}`
}
console.log(mytest())
默认参数作用域与暂时性死区
给多个参数定义默认值跟使用let声明一样，所以后面定义默认值的参数能使用前面定义的参数。
function mytest(name = 'clz', nickname = name) {
console.log(name, nickname)
}
mytest() // clz clz
既然和let声明一样，那么就也会遵循暂时性死区，在前面定义的参数不能使用后面定义的。
function mytest(name = nickname, nickname = 'clz') {
console.log(name, nickname)
}
mytest()
// ReferenceError: Cannot access 'nickname' before initialization
参数也有自己的作用域。不能使用函数体定义的变量
function mytest(name = nickname) {
let nickname = 'clz'
}
mytest()
// nickname is not defined
为什么说参数拥有自己的作用域，而不是参数和函数体属于同一个作用域，只是因为参数使用了后面才定义的变量呢？
这个和我们上面说的暂时性死区就拖不开关系了。如果参数和函数体是同一个作用域，在预编译阶段，执行上下文就会认识函数体的变量了。所以报错消息不会是nickname is not defined，而应该是Cannot access 'nickname' before initialization
function mytest() {
let name = nickname
let nickname = 'clz'
}
mytest()
// Cannot access 'nickname' before initialization
但是，如果默认参数没有使用的机会的话，即参数有值，那么就不会报错。
function mytest(name = nickname) {
let nickname = 'clz'
return name
}
console.log(mytest('czh')) // czh
console.log(mytest()) // nickname is not defined
扩展参数
首先，先来看一下代码
function mymax() {
let result = arguments[0]
for (let i = 1; i < arguments.length; i++) {
if (arguments[i] > result) {
result = arguments[i]
}
}
return result
}
console.log(mymax(1, 2, 3, 4)) // 4
console.log(mymax(4, 2, 3, 1, 1)) // 4
console.log(mymax(1, 2, 3, 88, 9)) // 88
上面的函数可以接收不限定个数的参数，并得到最大值。
那么，假如给你一个数组，让你调用上面的方法找出数组中的最大值呢？
在ES6之前呢，我们可以使用apply方法来实现
let nums = [1, 2, 3, 88, 9]
console.log(mymax.apply(null, nums))
但是，在ES6中，我们可以通过扩展操作符...更方便地实现。对可迭代对象使用扩展操作符，可以将它作为一个参数传入，然后由扩展运算符将可迭代对象拆分，并将迭代返回的每个值单独传入。所以说，函数并不会知道扩展操作符的存在，只是会干好老本行(正常的按照调用函数时传入的参数接收每一个值)
let nums = [1, 2, 3, 88, 9]
console.log(mymax(...nums)) // 88
使用扩展操作符传参时，并不会妨碍在前面或后面再传其他的值。
let nums = [1, 2, 3, 88, 9]
console.log(mymax(...nums)) // 88
console.log(mymax(99, ...nums)) // 99
console.log(mymax(...nums, 111)) // 111
上面的例子中，扩展操作符和arguments一起使用，但这并不意味着使用扩展通识符需要配合arguments才能使用。
function getSum(a, b, c = 100) {
return a + b + c
}
console.log(getSum(...[1, 1])) // 102
console.log(getSum(...[1, 1, 2])) // 4
console.log(getSum(...[1, 1, 2, 99])) // 4
let myset = new Set([1, 2, 3, 2])
console.log(myset) // Set(3) { 1, 2, 3 }
console.log([...myset]) // [ 1, 2, 3 ]
剩余参数(收集参数)
在上面，我们使用扩展操作符可以将一个可迭代对象展开，但是呢？如果扩展操作符用在函数的参数中，还可以手机参数，把参数组合成数组。
const mytest = (...nums) => {
console.log(nums)
return nums.reverse()
}
console.log(mytest(1, 2, 3))
console.log(mytest(4, 3, 2, 6, 9))
如果剩余参数的前面还有命名参数，那么就只会收集其余的参数。因为剩余参数的结果可变，所以只能把剩余参数作为最后一个参数。
const mytest = (msg, ...nums) => {
console.log(msg)
console.log(nums)
}
mytest('消息', 4, 3, 2, 6, 9)
剩余参数不会影响到arguments对象，仍然反映调用时传给函数的参数，另外箭头函数不支持arguments对象
function mytest(msg, ...nums) {
console.log(msg)
console.log(nums)
console.log(arguments.length)
}
mytest('消息', 4, 3, 2, 6, 9)
函数作为值
可以将函数作为参数传给另一个函数，还可以在一个函数中返回另一个函数。
function callSomeFn(fn, arg) {
return fn(arg)
}
const result = callSomeFn(num => num ** 2, 9)
console.log(result) // 81
function createFn(propertyName) {
return function (obj1, obj2) {
return obj1[propertyName] - obj2[propertyName]
}
}
const person1 = {
name: 'clz',
age: 62
}
const person2 = {
name: 'czh',
age: 21
}
const ageDifference = createFn('age')
console.log(ageDifference(person1, person2)) // 41
原文始发于微信公众号（赤蓝紫）：JavaScript之函数(一)
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/45476.html
