---

JavaScript函数进阶

函数提升

函数有时可以先调用再声明。

作用流程

函数提升的作用流程与变量提升类似：

1. JavaScript会把所有函数声明提升到当前作用域的最前面。
2. 只会提升函数声明，不提升函数调用。

注意：函数表达式必须先声明和赋值，后调用，否则报错。

bar() // 报错
var bar = function(){console.log('函数表达式不存在提升现象')
}

函数参数

了解函数的使用细节，提升函数应用的灵活度。

学习路径：

1. 动态参数
2. 剩余参数

动态参数

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

function print(){console.log(argument)
}
print(1,2,3,4) // 打印1,2,3,4

总结：

1. arguments是一个伪数组，只存在于函数中。
2. arguments的作用是动态获取函数的实参。
3. 可以通过for循环依次得到传递过来的实参。

剩余参数

剩余参数允许我们将一个不定数量的参数表示伪一个数组，在函数内部中使用。

function getsum(...other){console.log(other) // other得到[1,2,3]
}
getsum(1,2,3)

与动态参数的区别：

1. …是语法符号，置于最末函数形参之前，用于获取多余的实参
2. 借助…获取的剩余实参是个真数组

function print(a,b,...other){console.log(a) // 获得1console.log(b) // 获得2console.log(other) // 获得3,4
}
print(1,2,3,4)

展开运算符

展开运算符(…)可以将一个数组展开，在数组中使用。

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

说明：

1. 不会修改原数组

应用场景：求数组最大值(最小值)、合并数组等。

// 求数组最大值和最小值
const arr = [1,2,3,4,5]
console.log(Math.max(...arr)) // 5
console.log(Math.min(...arr)) // 1

// 合并数组
const arr1 = [1,2,3]
const arr2 = [4,5,6]
const arr = [...arr1,...arr2]
console.log(arr) // [1,2,3,4,5,6]

箭头函数

引入箭头函数的目的是更简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更简洁。

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

基本语法

const fn = (形参) =>{//函数主体
}
fn() // 调用

如果只有一个形参，小括号可以省略：

const fn = x =>{console.log(x)
}
fn(1) // 调用

只有一行代码时，可以省略大括号：

const fn = x => console.log(x)
fn(1) // 调用

只有一行代码，无需写return直接返回返回值：

const fn = x => x + 1
console.log(fn(1)) // 2

加括号的函数体返回对象字面表达量：

const fn = uname => ({uname: uname}) // 对象要用小括号包起来
console.log(fn('abc')) // 直接返回一个对象 {uname: 'abc'}

箭头函数参数

箭头函数没有arguments参数，但是有剩余参数。

const getSum = (...arg) => {let sum = 0for(let i = 0; i < arg.length; i++){sum += arg[i]}return sum
}
console.log(getSum(1,2,3)) // 6

箭头函数的this

以前this的指向：谁调用这个函数，this就指向谁。

console.log(this) // window
function fn(){console.log(this) // window
}
fn() // = window.fn()
const obj = {name: 'lily',sayhi: function (){console.log(this) // obj}
}
obj.sayhi() // 调用

在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值。

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

const fn = function(){let fun = () => {console.log(this) // fn}
}
fn()

对象方法箭头函数的this：

// 对象方法箭头函数的this
const obj = {uname: 'lily',sayhi: () => {console.log(this) // window}
}
obj.sayhi()

const obj = {uname: 'lily',sayhi: function () { // function的this指向objlet i = 10const count = () => {console.log(this) // obj}count()}
}
obj.sayhi()

遍历数组的forEach方法

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

主要使用场景：遍历数组的每个元素

语法

被遍历的数组.forEach(function(当前数组元素, 当前元素索引号){// 函数体
})

注意：

• forEach主要是遍历数组。
• 参数是当前数组元素，是必写的，索引号是可选的。