一.ES6函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fun(...value) {
console.log(value);
}
fun(1, 2, 3, 4, 5, 6, 7, 8, 9);
</script>
</body>
</html>
二.箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>点击</div>
<script>
// 箭头函数
// 参数 => 函数体
let fun = v => console.log(v);
console.dir(fun);
fun(2);
// 传递多个参数
let fun2 = (a, b) => console.log(a + b);
fun2(1, 2);
// 函数体语句较多
let fun3 = (a, b) => {
var num = a + b;
return num;
};
console.log(fun3(1, 1));
// setTimeout(() => {
// console.log("箭头函数");
// }, 2000)
var fun4 = () => {
console.log(this); // window
}
fun4();
var obj = {
name: "zhangsan",
age: 18,
fun: () => {
console.log(this); // window
},
fun2: function () {
console.log(this);
setTimeout(() => {
console.log(this); // obj
}, 1000)
},
}
obj.fun();
obj.fun2();
document.querySelector("div").onclick = () => {
console.log(this); // window
}
// 箭头函数本身不具有this，他的this指向父级上下文（外层作用域）
// 箭头函数中没有 arguments 对象
// 不能用作构造函数，这就是说不能够使用new命令，否则会抛出一个错误
// 没有propotype原型属性
</script>
</body>
</html>
三.promise使用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// promise 对象
var pro = new Promise(function (resolve, reject) {
resolve("执行成功");
reject("执行失败");
});
// 调用 .then() 方法
pro.then(function (data) {
console.log(data);
}, function (err) {
console.log(err);
});
</script>
</body>
</html>
四.promise使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<script>
// jQuery 中的 ajax
var baseURL = "http://localhost:3008/api";
// $.ajax({
// type: "GET",
// url: baseURL + "/student/getStudent",
// success: function (data, status, xhr) {
// console.log(data);
// console.log(status);
// console.log(xhr);
// },
// error: function (err) {
// console.log("err" + err);
// }
// })
// 通过 promise 对象发送请求
var ajaxpro = new Promise(function (resolve, reject) {
$.ajax({
type: "GET",
url: baseURL + "/student/getStudent",
success: function (data, status, xhr) {
resolve(data);
},
error: function (err) {
reject(err);
}
})
})
// 通过 .then() 方法分别得到成功或失败的回调
ajaxpro.then(function (data) {
// console.log(data);
window.data = data;
}, function (err) {
console.log(err);
})
</script>
</body>
</html>
五.promise解决回调地狱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fun1() {
return new Promise(function (res, rej) {
setTimeout(() => {
res("定时器1")
}, 3000)
})
}
function fun2() {
return new Promise(function (res, rej) {
setTimeout(() => {
res("定时器2")
}, 2000)
})
}
function fun3() {
return new Promise(function (res, rej) {
setTimeout(() => {
res("定时器3")
}, 1000)
})
}
// promise 链式调用解决回调地狱问题
// console.log(fun1());
fun1().then(function (data) {
console.log("fun1" + data);
// 将 fun2() 作为返回值
return fun2();
}).then(function (data) {
console.log("fun2" + data);
// 将 fun3() 作为返回值
return fun3();
}).then(function(data){
console.log("fun3" + data);
})
// setTimeout(() => {
// res("定时器1");
// setTimeout(()=>{
// })
// }, 3000)
</script>
</body>
</html>
六.async函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// async 函数
async function fun() {
return "promise"
}
console.dir(fun());
fun().then(data => console.log(data))
</script>
</body>
</html>
七.async-await使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fun1() {
return new Promise(function (res, rej) {
setTimeout(() => {
res("定时器1")
}, 3000)
})
}
async function fun2() {
// 等待
await fun1().then((data) => {
console.log(data);
})
setTimeout(() => {
console.log("定时器2");
}, 2000)
}
fun2().then()
</script>
<script src="./09-导入.js"></script>
</body>
</html>
八.导出js
let num = 10;
// 导出
export default num;
九.导入js
import num from "./08-导出.js";
console.log(num);