数组新方法
数组中新增了map和reduce方法
map(callback;)
<script>
//数组中新增了map和reduce方法。
let arr = [1, 20, -5, 3];
//map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
// arr = arr.map((item)=>{
// return item*2
// });
arr = arr.map(item => item + 1);
console.log(arr);
</script>
reduce(callback,(initValue))
<script>
let arr = [2, 21, -4, 4];
//reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
//[2, 21, -4, 4]
//arr.reduce(callback,[initialValue])
/**
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）*/
let result = arr.reduce((a, b) => {
console.log("上一次处理后：" + a);
console.log("当前正在处理：" + b);
return a - b;
}, 3);
console.log(result)
</script>
异步编程
优化异步操作。封装ajax
在html的同级别建了文件夹mock
里面放了三个json文件做测试用、
stduent.json
{
"id" : 101,
"name" : "zhangsan"
}
course101.json
{
"scoreId" :10101,
"id" : 11,
"name" : "数学"
}
score.json
{
"score":"100分"
}
之前写ajax的方式——多层嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script>
// 1、查出当前用户信息
// 2、按照当前用户的id查出他的课程
// 3、按照当前课程id查出分数
$.ajax({
url: "mock/stduent.json",
success(data) {
console.log("查询学生：", data);
$.ajax({
url: `mock/course${
data.id}.json`,
success(data) {
console.log("查询到课程：", data);
$.ajax({
url: `mock/score${
data.scoreId}.json`,
success(data) {
console.log("查询到分数：", data.score);
},
error(error) {
console.log("出现异常了：" + error);
}
});
},
error(error) {
console.log("出现异常了：" + error);
}
});
},
error(error) {
console.log("出现异常了：" + error);
}
});
</script>
</body>
</html>
Promise方式
初步使用
<script>
// 1、Promise可以封装异步操作
let p = new Promise((resolve, reject) => {
//传入成功解析，失败拒绝
//1、异步操作
$.ajax({
url: "mock/stduent.json",
success: function (data) {
console.log("查询学生成功:", data)
resolve(data);
},
error: function (err) {
reject(err);
}
});
});
p.then((obj) => {
//成功以后做什么
return new Promise((resolve, reject) => {
$.ajax({
url: `mock/course${
obj.id}.json`,
success: function (data) {
console.log("查询学生课程成功:", data)
resolve(data);
},
error: function (err) {
reject(err)
}
});
})
}).then((data) => {
//成功以后干什么
console.log("上一步的结果", data)
$.ajax({
url: `mock/score${
data.scoreId}.json`,
success: function (data) {
console.log("查询课程得分成功:", data.score)
},
error: function (err) {
}
});
})
</script>
在封装
<script>
function get(url, data) {
//自己定义一个方法整合一下
return new Promise((resolve, reject) => {
$.ajax({
url: url,
data: data,
success: function (data) {
resolve(data);
},
error: function (err) {
reject(err)
}
})
});
}
get("mock/stduent.json")
.then((data) => {
console.log("学生查询成功~~~:", data)
return get(`mock/course${
data.id}.json`);
})
.then((data) => {
console.log("课程查询成功~~~:", data)
return get(`mock/score${
data.scoreId}.json`);
})
.then((data) => {
console.log("课程成绩查询成功~~~:", data.score)
})
.catch((err) => {
//失败的话catch
console.log("出现异常", err)
});
</script>
----------------最后
这里的student误打错成stduent最后将错就错了，代码里面还是需要规范的。