函数#

箭头函数#

传统显性写法#

1
function add(a, b) {
2
  return a + b;
3
}
4
a = 10
5
b = 20
6
console.log(add(a, b))
7
//与c++类似

隐性写法（匿名函数）#

传统匿名函数写法#

1
const add = function(a,b){
2
  return a+b;
3
}

箭头函数写法#

1
const add = (a,b) => {
2
  return a+b;
3
}
4
//箭头函数省字
5
//当箭头函数只有一个参数时，可以省略小括号，0个以及>=2个都不行
6
//当箭头函数只有一条语句时，可以省略花括号和return关键字，但若保留花括号且有输出值，则return不能省。保留return关键字则花括号不能省
7
const double = a => a*2;

立即执行函数（IIFE#

也是一种匿名函数，用法是立即执行函数表达式的内容，可以防止变量污染。如果代码前面有其他语句，建议在 IIFE 前面加上分号，避免与上一行连接导致错误

1
(function(){console.log(10)})()//第一个括号是把函数声明（function（）是一个函数声明）转化为函数表达式，第二个括号是执行这个函数表达式
2
;(()=> console.log(11))()

函数还有函数提升的性质：无论函数在何处声明，都默认在文件开头加载。不会出现C++中需要把函数提前的情况。但是只有标准的具名函数（显性函数）才有这个特征。用let/const定义的以及立即执行函数都不具备这个特征。

1
// ✅ 函数声明 - 可以提升
2
sayHi();
3
function sayHi() { console.log("Hi"); }
4

5
// ❌ 函数表达式 - 相当于 let，不能提升
6
sayHello();
7
let sayHello = function() { console.log("Hello"); };
8
// 报错：sayHello is not a function

另外介绍一些数组高阶函数#

名	作用
map	遍历数组每个元素进行一定操作后返回新的数组
filter	遍历数组每个元素进行一定判断后返回判断结果为true的原元素值组成的数组
find	找到第一个符合要求的元素
forEach	只是相当于一个for循环遍历的简化写法

1
const aa = [1,2,3,4,5]
2
console.log(aa.map(function(c,b) {return c*b}))//普通匿名函数必须有大括号和return
3
console.log(aa.map((c,b) => c*b))//箭头函数可以省略return关键字
4
console.log(aa.filter((c,b) => c*b%3==0))//只返回下标和值的乘积为3的倍数的原元素值
5
console.log(aa.find(a => a>2))//返回第一个大于2的元素值
6
console.log(aa.forEach((x,y) => console.log(`第${y}个元素是${x}`)))//只遍历，不返回值，因此foreach外层的console.log会输出一个undefined

返回结果：

1
[ 0, 2, 6, 12, 20 ]
2
[ 0, 2, 6, 12, 20 ]
3
[ 1, 3, 4 ]
4
3
5
第0个元素是1
6
第1个元素是2
7
第2个元素是3
8
第3个元素是4
9
第4个元素是5
10
undefined

回调函数#

把函数当参数用调用某个函数时，函数也可以作为参数传入。

1
//回调函数 不需要自己经常写回调函数，但会用到很多别人写好的回调（比如 fetch、数组方法等）
2
const bb = 1
3
const callback = () => console.log("回调函数调用了")
4
const function1 = (bb,callback) => {//只是参数，要在
5
    console.log(bb);
6
    callback()
7
}
8
function1(bb,callback)

异步#

setTimeout#

先执行后面的同步任务，同步任务执行完后再通过等待时间大小决定同层异步之间的先后顺序。

1
console.log(1);
2
setTimeout(()=>{
3
    console.log(2);
4
})
5
console.log(3);

输出：

更复杂一点：

1
console.log(1);
2
setTimeout(()=>{
3
    console.log(2);
4
    setTimeout(()=>{
5
        console.log(3);
6
    })
7
    console.log(4);
8
},11)
9
setTimeout(()=>{
10
    console.log(5);
11
},1)
12
console.log(6);

输出：

是不是看着很乱？可读性非常差。为了解决这个问题，promise应运而生。

了解promise#

1
// 创建promise的方法
2
//依旧了解，不是让你写的，是让你知道有这么个东西
3
const p1 = new Promise((成功,失败)=>{
4
//这里可以写成功或失败，作为函数名，后面跟的参数传到then/catch里
5
//成功和失败都写一遍只会管第一个（这里是成功
6
 成功("请求成功")//这时候p1的内容就是  Promise { '请求成功' }
7
 失败("请求失败")//若把成功注释/本行提前则运行.catch的结果
8
})
9
//.then或.catch后面跟的括号里是一个参数，这个参数是函数，函数会被分配一个默认参数，这个参数是promise返回的内容。
10
p1.then(结果=>{console.log(结果)})
11
.catch(结果=>console.log(结果))
12
function aaa(a){console.log(a)}
13
p1.then(aaa)//这里函数aaa不用写括号给参数，因为.then直接把参数传给aaa了

返回结果：

1
请求成功
2
请求成功

另外：

1
p1 = new Promise((成功, 失败) => {
2
    失败("请求异常")
3
})
4
p1.then(成功的结果 => {
5
    console.log(成功的结果)
6
    return Promise.resolve("下一个then的参数")
7
},失败的结果=>{
8
    console.log(失败的结果)
9
    // return Promise.reject()
10
    // 或者抛出异常
11
    throw new Error("请求失败")//有第二个参数时不会调用.catch，因此实战中不建议写第二个参数。并且错误处理是异步的，因此会先调用下面的输出1
12
}
13
)
14
.catch(结果=>{
15
    console.log(结果);
16
})
17
console.log("1")

输出：

1
1
2
请求异常
3
Error: 请求失败
4
    at C:\ESD\js学习\ls.js:11:11

用promise简化回调地狱#

1
setTimeout(() => {
2
    console.log("s加载第一项");
3
    setTimeout(() => {
4
        console.log("s加载第二项");
5
        setTimeout(() => {
6
            console.log("s加载第三项");
7
            setTimeout(() => {
8
                console.log("s加载第四项");
9
            }, 1000);
10
        }, 1000);
11
    }, 1000);
12
}, 1000);
13
//改为：
14
Promise.resolve()
15
.then(()=>{
16
    console.log("p加载第一项");
17
    return Promise.resolve()
18
})
19
.then(()=>{
20
    console.log("p加载第二项");
21
    return Promise.resolve()
22
})
23
.then(()=>{
24
    console.log("p加载第三项");
25
    return Promise.resolve()
26
})
27
.then(()=>{
28
    console.log("p加载第四项");
29
})
30
//代码长度先不管，你就说是不是好看多了吧
31
//从文字提示可以看出来，一般用在需要按顺序执行的异步操作上
32
//比如：加载数据后渲染页面，每个步骤都依赖前一个步骤的结果

结果：

1
p加载第一项
2
p加载第二项
3
p加载第三项
4
p加载第四项
5
s加载第一项
6
s加载第二项
7
s加载第三项
8
s加载第四项

Async#

1
可以看出，promise仍然有些臃肿，因此Async横空出世！