ES6_函数

本博客用于个人学习使用，资料可能来源于网络，未注明出处，敬请原谅。如有侵权，请联系博主进行删除。

函数的默认参数

在ES5中，我们给函数传参数，然后在函数体内设置默认值

function fuc(num, callback) {
	num = num || 6
	callback = callback || function(data) { console.log('ES5', data) }
	callback(num * num)
}
fuc() // ES5:36 不传参数输出默认值

//你还可以这样使用callback
fuc(10, function(data) {
	console.log(data * 10) // 1000，传递参数10输出新值
})

在ES6中，我们使用新的默认值写法

function newfuc(num = 6, callback = function(data) { console.log('ES6', data) }) {
	callback(num * num)
}
newfuc() // ES5:36 不传参数输出默认值
newfuc(10, function(data) {
	console.log(data * 10) // 1000，传递参数10输出新值
})

函数默认值对arguments对象的影响

arguments对象：arguments对象是一个存在于函数内部的类数组对象，它将当前函数的所有参数组成一个类数组对象

function a(num,b){
	console.log(arguments) // [Arguments] { '0':6, '1',10 }
	console.log(arguments.length) // 2
}
a(6,10)

但是，默认参数不能被arguments识别

function a(num = 1, b = 2) {
	console.log(arguments)
}
a() // [Arguments] {}
a(11,22) //[Arguments]{ '0':11, '1':22 }

修改参数默认值对arguments的影响
在ES5的非严格模式下，参数为1，获取到arguments[0]全等于num，修改之后arguments[0]也随之更新

function a(num) {
	console.log(num === arguments[0]) // true
	num = 3
	console.log(num === arguments[0]) // true
}
a(1)

在ES5的严格模式下，修改参数之后arguments不能随之更新

'use strict' // 严格模式
function a(num) {
	console.log(num === arguments[0]) // true
	num = 3
	console.log(num === arguments[0]) // false
}
a(1)

在ES6中，默认值对arguments的影响和ES5的严格模式一样

默认参数表达式

参数默认值可以为字符串、数字、数组、对象、函数

function add() {
	return 100
}
function a(num = add()) {
	console.log(num)
}
a() // 100

无命名参数

function add (object) {
	console.log(object.a + object.b)
}
let obj = {
	a:1,
	b:2
}
add(obj)

不定参数

不定参数的使用：使用扩展运算符的参数就是不定参数，它表示一个数组

function add(...arr) {
	console.log(a + b)
}
let a=3,b=2
add(a,b)

不定参数的使用限制：必须放在所有参数的末尾，不能用于对象字面量setter中,剩余参数不能作为对象字面量的setter属性

function add(...arr,c){ // 错误的写法，Rest parameter must be last formal parameter
	console.log(a + b)
}
let a = 3,b = 4, c = 5
add(a,b,c)

let obj = { // 错误写法,Setter function argument must not be a rest parameter
	set add(...arr){

	}
}

补充call方法和apply方法：
两者实现的事情是相同的，只是参数的格式不一样。每个函数都包含这两个非继承而来的方法，
call和apply会改变this的指向
call方法接收多个参数，第一个是函数作用域，后面参数为逐个列举的参数
apply方法接收两个参数，第一个是函数作用域，第二个是数组或arguments
第一个参数为null，this指向window

call()和apply()参考链接: link
展开运算符的作用是解构数组，然后将数组的每个元素作为函数参数，有了扩展运算符，操作数组的时候就不在使用apply来指定上下文环境了

// ES5的写法
let arr = [10,20,40,9,49];
let a = Math.max.apply(null, arr)
console.log(a) // 49
// ES6的写法
let arr = [10,20,40,9,49];
let a = Math.max(...arr)
console.log(a) // 49

箭头函数

1. 箭头函数没有this，函数内部的this来自于父级最近的非箭头函数，并且不能改变this的指向
2. 箭头函数没有原型，没有super，没有arguments，没有new target绑定
3. 不能使用new
4. 不能重复命名参数

const arr = [1,1,2,3]
const sum = arr.reduce((sum, item) => sum + item)
console.log(sum) // 7

注：箭头函数详细说明见其余博客