函数
# 案例代码仓库地址:
分支为:javascript
# 函数默认值
带参数默认值的函数
function add(a, b) { a = a || 10 a = b || 20 return a + b } console.log(add()) // es5 function minus(a = 10, b = 20) { return b - a } console.log(minus()) function divide(a, b = 20) { return a + b } console.log(divide(30)) // a = 30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20默认的表达式也可以是一个函数
function fb(a, b = getVal(5)) { return a + b } function getVal(val) { return val + 5 } console.log(fb(10)) let book = { title: 'es6的教程', author: 'wujie', year: 2021, } function pick(obj) { let result = Object.create(null) // 创造 一个空对象 for (let i = 1; i < arguments.length; i++) { console.log(arguments) result[arguments[i]] = obj[arguments[i]] } return result }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24最终使用
es6
的语法剩余参数:由三个点:
...
和一个紧跟着的具名参数指定,案例:...keys
不过作为参数,必须放在最后面
function pickes6(obj, ...keys) { // console.log(keys) let result = Object.create(null) for (let i = 0; i < keys.length; i++) { result[keys[i]] = obj[keys[i]] } return result } let bookData = pickes6(book, 'author', 'year', 'title') console.log(bookData)
1
2
3
4
5
6
7
8
9
10
11
# 扩展运算符
允许将一个数组分割,并将各项作为分离的参数传给函数
案例
const maxNum = Math.max(20, 30) console.log(maxNum)
1
2处理数组中的最大值
const arr = [10, 20, 30, 40, 50, 60, 100] console.log(Math.max.apply(null, arr)) // 100
1
2es6 使用扩展运算符
console.log(Math.max(...arr))
1
# es6 的箭头函数
使用
=>
来定义函数,取代了function (){}
,等价于() => {}
案例
let add = (a, b) => {
return a + b
}
let minus = (a, b) => a + b // 直接使用表达式
console.log(add(10, 20))
let getObj = id => {
return {
id: id,
name: '无解',
}
}
let obj = getObj(1)
console.log(obj)
// 简单写法
let getObject = id => ({ id: id, name: '无解' })
let obj2 = getObjectj(1)
console.log(obj2)
// 闭包函数
let fn = (function() {
return function() {
console.log('es6')
}
})()
fn()
// 使用箭头函数改写
let fn1 = (() => {
return () => {
console.log('hello es6')
}
})()
fn1()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
# this 指向的问题
提示
es5 中的 this 的指向,取决于调用该函数的上下文对象
let PageHandler = {
id: 123,
init: function() {
document.addEventListener('click', function(event) {
// this.doSomeThings is not a function
console.log(this) // #document 整个文档
this.doSomeThings(event.type)
})
},
doSomeThings: function(type) {
// type 事件类型
console.log(`事件类型: ${type},当前id: ${this.id}`)
},
}
PageHandler.init()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
使用es6
的方式来解决上述问题
let PageHandler = {
id: 123,
// init: function () {
// document.addEventListener(
// 'click',
// function (event) {
// this.doSomeThings(event.type)
// }.bind(this), // 此时的this指向的是 PageHandler
// false
// )
// },
init: function() {
// 如果这里使用了箭头函数,此时的里面的 this 为整个 window对象
// 所以给对象每个方法的时候,不要使用箭头函数
document.addEventListener(
'click',
event => {
// 将函数转换成箭头函数
// 箭头函数没有this指向
// 只能通过它的查找作用域链来找
// 谁调用的 init 函数 => 所以内部的this 就指向了当前的 PageHandler 对象
this.doSomeThings(event.type)
},
false
)
},
doSomeThings: function(type) {
// type 事件类型
console.log(`事件类型: ${type},当前id: ${this.id}`)
},
}
PageHandler.init()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# 使用箭头函数的注意事项
警告
使用箭头函数,函数内部没有arguments
let getVal = (a, b) => {
console.log(arguments)
return a + b
}
console.log(getVal(1, 3))
1
2
3
4
5
2
3
4
5
警告
箭头函数不能使用new
关键字来实例化对象
下面的提示:Person is not a constructor
let Person = () => {}
let p = new Person()
1
2
3
2
3
提示
可以认为箭头函数不是一个对象它就是一个函数的语法糖,function
函数可以认为是一个对象。
编辑 (opens new window)
上次更新: 2021/10/23, 23:03:40