函数进阶
函数进阶
函数提升
函数提升与变量提升比较类似，是指函数在声明之前即可被调用。
总结：
-
函数提升能够使函数的声明调用更灵活
-
函数表达式不存在提升的现象
-
函数提升出现在相同作用域当中
// 函数提升
fn()
function fn () {
console.log(123)
}
// 函数表达式不能提升，需要先声明，再使用
//
// const f = function () {
// console.log(222)
// }
// f()
// 函数优于变量
// 变量与函数同名时，函数优于变量
/*
a:函数
a:变量
*/
console.log(a)
/* 控制台打印
ƒ a () {
console.log('a')
}
*/
function a () {
console.log('a')
}
var a = 1
console.log(a)//1
函数参数
动态参数
arguments 是函数内部内置的伪数组变量，它包含/接收了调用函数时传入的所有实参
使用场景：
如果参数个数不确定，无法设置形参个数
此时不用写形参，可在函数中使用动态参数arguments
总结：
- arguments 是一个伪数组，只存在于函数中
- arguments 的作用是动态获取函数调用时传入的所有实参
- 可以通过for循环依次得到传递过来的实参
function fn () {
let sum = 0
for (let i = 0; i < arguments.length - 1; i++) {
sum += arguments[i]
console.log(arguments[i])
}
console.log('总和为：' + sum)
}
fn(1,3,5,8,10)
剩余参数
剩余参数
允许我们将一个不定数量的参数表示为一个数组
... 是语法符号，置于函数最后一个形参之前，用于获取多余的实参
借助 ... 获取的剩余实参，是个真数组
function fn (a, b , ...c) {
console.log(a, b, c)//1 3 [5,8,10]
}
fn(1,3,5,8,10)
function getSum (...arr) {
let sum = 0
for (let i = 0; i < arr.length ; i++) {
sum += arr[i]
}
console.log(sum)//27
}
getSum(1,3,5,8,10)
展开运算符
const arr = [1, 3, 5, 8, 10]
console.log(...arr)
// 求最大值
console.log(Math.max(...arr))
// 合并数组
const arr1 = [1, 3, 5, 8, 10]
const arr2 = ['a', 'b', 'c']
const arr3 = [11, 31, 51, 81, 100]
const array = [...arr1, ...arr2, ...arr3]
console.log(array)
注意:
剩余参数：用在函数最后一位形参前加...,在函数内部使用，作用：接收剩余实参，是个真数组
展开运算符：使用数组时，在数组前添加，作用：展开数组，使用场景有：
求数组最大/小值
合并数组
注：...不会修改原数组
箭头函数
基本语法
简单地说:箭头函数是函数语法简写
目的：引入箭头函数的目的是更简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更简洁
使用场景：箭头函数更适用于那些本来需要匿名函数的地方或者说回调函数
语法1：基本写法
/*
//普通函数
const fn = function () {
console.log(123)
}
*/
// 箭头函数
const fn = () => {
console.log(123)
}
语法2：只有一个参数可以省略小括号
/*
//普通函数
const fn2 = function (x) {
return x
}
*/
// 箭头函数
const fn2 = x => {
return x * x
}
console.log(fn2(2))
语法3：如果函数体只有一行代码，可以写到一行上，并且无需写 return 直接返回值
/*
//普通函数
const fn3 = function (x, y) {
return x + y
}
*/
// 箭头函数
const fn3 = (x, y) => x + y
console.log(fn3(1, 2))
语法4：加括号的函数体返回对象字面量表达式
/*
//普通函数
const fn4 = function (uname) {
return {uname:uname}
}
*/
// 箭头函数
const fn4 = uname => ({uname: uname})
console.log(fn4('小明'))
总结：
-
箭头函数属于表达式函数，因此不存在函数提升
-
箭头函数只有一个参数时可以省略圆括号 ()，其他情况不可省略
-
箭头函数函数体只有一行代码时可以省略花括号 {}，并自动做为返回值被返回
-
加小括号的函数体返回对象字面量表达式
箭头函数参数
-
普通函数有arguments 动态参数
-
箭头函数没有 arguments 动态参数，但是有 剩余参数 ..args
const getSum = (...other) => {
let sum = 0
for (let i = 0; i < other.length; i++) {
sum += other[i]
}
console.log(sum)
}
getSum(1, 4, 6)
箭头函数this
箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。
- 普通函数中，this是指调用者
- 箭头函数中，this是沿用自己的作用域链的上一层的this
在开发中【使用箭头函数前需要考虑函数中 this 的值】，事件回调函数使用箭头函数时，this 为全局的 window，因此
DOM事件回调函数为了简便，还是不太推荐使用箭头函数
<input type="button" value="点击">
//普通函数
const btn = document.querySelector('input')
btn.addEventListener('click',function () {
console.log(this)//调用者
})
let obj = {
name : '小明',
fei : function () {
console.log(this)//调用者
}
}
obj.fei()
//箭头函数
btn.addEventListener('click',() => {
console.log(this)//window
})
//箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。
let obj = {
name : '小明',
fei : () => {
console.log(this)//window
}
}
obj.fei()
