JavaScript函数进阶学习
文章目录
- JavaScript函数进阶
- 函数提升
- 作用流程
- 函数参数
- 动态参数
- 剩余参数
- 展开运算符
- 箭头函数
- 基本语法
- 箭头函数参数
- 箭头函数的this
- 遍历数组的forEach方法
- 语法
JavaScript函数进阶
函数提升
函数有时可以先调用再声明。
作用流程
函数提升的作用流程与变量提升类似：
- JavaScript会把所有函数声明提升到当前作用域的最前面。
- 只会提升函数声明，不提升函数调用。
注意：函数表达式必须先声明和赋值，后调用，否则报错。
bar() // 报错
var bar = function(){console.log('函数表达式不存在提升现象')
}
函数参数
了解函数的使用细节，提升函数应用的灵活度。
学习路径：
- 动态参数
- 剩余参数
动态参数
arguments是函数内部设置的伪数组变量，它包含了调用函数时传入的所有实参。
function print(){console.log(argument)
}
print(1,2,3,4) // 打印1,2,3,4
总结：
- arguments是一个伪数组，只存在于函数中。
- arguments的作用是动态获取函数的实参。
- 可以通过for循环依次得到传递过来的实参。
剩余参数
剩余参数允许我们将一个不定数量的参数表示伪一个数组，在函数内部中使用。
function getsum(...other){console.log(other) // other得到[1,2,3]
}
getsum(1,2,3)
与动态参数的区别：
- …是语法符号，置于最末函数形参之前，用于获取多余的实参
- 借助…获取的剩余实参是个真数组
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
说明：
- 不会修改原数组
应用场景：求数组最大值(最小值)、合并数组等。
// 求数组最大值和最小值
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主要是遍历数组。
- 参数是当前数组元素，是必写的，索引号是可选的。