JavaScript进阶-函数进阶

---

函数进阶

函数提升

与变量提升类似，是指函数在声明之前即可被调用

• 函数提升能够使函数的声明调用更灵活
• 函数表达式不存在提升现象
• 函数提升出现在相同作用域当中

例如：

fn()
function fn() {
	console.log('函数提升')
}

函数参数

动态参数

arguments是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参
例如：

function getSum() {
	let sum = 0
	for (let i = 0; i < arguments.length; i++) {
		sum += arguments[i]
	}
	console.log(sum)
}
getSum(1,2,3)
getSum(2,3,4,5,6,7)

剩余参数

剩余参数允许将一个不定数量的参数表示为一个数组
语法：function fn(first, ...last) {}

• …是语法符号，置于最末函数形参之前，用于获取多余的实参
• 借助…获取的剩余实参，是个真数组
• 开发中，还是提倡多使用剩余参数

例如：
解构时可以使用剩余属性结束解构模式。
此模式会将对象或数组的所有剩余属性存储到新的对象或数组中。
剩余属性必须是模式中的最后一个，并且不能有尾随逗号。

const { a, ...others } = { a: 1, b: 2, c: 3 };
console.log(others); // { b: 2, c: 3 }

const [first, ...others2] = [1, 2, 3];
console.log(others2); // [2, 3]

拓展-展开运算符

展开运算符（…）将一个数组进行展开
不会修改数组
例如：

const arr = [1,2,3,4,6,]
console.log(...arr)

箭头函数

使用场景：箭头函数更适用于那些本来需要匿名函数的地方

基本语法

• 语法1：基本写法

//普通函数
const fn = function() {
	console.log('普通函数')
}
//箭头函数
const fn = () => {
	console.log('箭头函数')
}

• 语法2：只有一个参数可以省略小括号

//普通函数
const fn = function(x) {
	return x + x
}
//箭头函数
const fn = x => {
	return x + x
} 

• 语法3：如果函数体只有一行代码，可以写到一行上，并且无需写return直接返回值

//普通函数
const fn = function(x,y) {
	return x + y
}
//箭头函数
const fn = (x,y) => x + y

• 语法4：加括号的函数体返回对象字面量表达式

const fn = uname => ({uname:uname})
//第二个uname为属性名，第三个uname为属性值

箭头函数参数

箭头函数没有动态参数，但是有剩余参数
例如：

const getSum = (...args) => {
	let sum = 0
	for (let i = 0; i < args.length; i++) {
		sum += args[i]
	}
	return sum
}

箭头函数this

箭头函数不会创建自己的this，它只会从自己的作用域链的上一层沿用this
例如：

const fn = () => {
	console.log(this)
	//this指向window
}
fn()
//对象方法 箭头函数的this
const obj = {
	uname:'jinaglin'
	sayHi:() => {
		console.log(this)
		//this指向window，因为window调用了obj中的sayHi方法
	}
obj.sayHi()

const obj = {
	uname:'jinaglin'
	sayHi:function() => {
		console.log(this)
		//this指向obj
		let i = 10
		const count = () => {
			console.log(this)
			//this指向obj
		}
		count()
	}
}
obj.sayHi()

在开发中使用箭头函数前需要考虑函数中的this的值，事件回调函数使用箭头函数时，this为全局的window，因此DOM事件回调函数为了简便，不推荐使用箭头函数