一、let和const的定义
<!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>
</head>
<body>
<script>
var name = "千岛";
var link = "https://notre1024.lofter.com"
var PI = Math.PI;
console.log(name);
console.log(link);
console.log(PI);
let name2 = "千岛";
let link2 = "https://notre1024.lofter.com"
const PI2 = Math.PI;
console.log(name2);
console.log(link2);
console.log(PI2);
</script>
</body>
</html>
二、let-const-var的区别
<!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>
</head>
<body>
<script>
for (var i = 0; i < 5; i++) {
console.log(i);
}
console.log(i);
for (let k = 0; k < 5; k++) {
console.log(k);
}
console.log(k); //错误
const pi = Math.PI;
pi = 88; //错误
console.log(pi);
</script>
</body>
</html>
三、模版字符串
<!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>
</head>
<body>
<script>
var people = {
name: 'konan',
age: 20,
sex: '男'
};
var message = "你好" + people.name + ",你今年" + people.age + "岁了" + ",你的性别是" + people.sex;
console.log(message);
//es6支持换行
var message =`你好${people.name},
你今年${people.age}岁了,你的性别是${people.sex+5}`;
console.log(message);
</script>
</body>
</html>
四、函数默认参数
<!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>
</head>
<body>
<script>
function sum(a,b=50){
return a+b;
}
var result=sum(100,80); //不传的参数默认是undefined,可以在函数中指定默认值,当然,这里传递的优先
console.log(result);
//不定参数
function fun(...values){
console.log(values);
}
fun(1,2,4);
fun(3,5,6,7,7);
</script>
</body>
</html>
五、箭头函数
<!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>
</head>
<body>
<script>
//原
var sum = function (a, b) {
return a + b;
}
//箭头函数 - 改进1
var sum = (a, b) => {
return a + b;
}
//箭头函数 - 改进2
var sum = (a, b) => a + b;
//规律
//1.去掉function
//2.在括号后面加箭头
//3.如果逻辑代码仅有return可以直接省去,如果有逻辑体就不能省去,比如
var sum2 = (a, b) => {
var num = a + b;
return num;
}
//举例
var arr=[1,2,3,4,5,6,7];
var newarr=arr.map(function(obj){
return obj*2;
});
console.log(newarr);
var newarr2=arr.map((obj)=>obj*2);
console.log(newarr2);
</script>
</body>
</html>
六、对象简写
<!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>
</head>
<body>
<script>
//原
let info={
title:'端午节',
link:'blog.csdn.net/m0_57538148',
go:function(){
console.log(`${info.title}节,赛龙舟`);
}
}
//es6简写
//因为对象是key:value存在
//1:如果key和变量的名字一致,可以只定义一次即可
//2:如果value是一个函数,可以把`:function`去掉,只留下()即可
let title="端午节";
let link="blog.csdn.net/m0_57538148";
let info2={
title,
link,
go(){
console.log(`${info.title},赛龙舟`);
}
}
console.log(info2);
console.log(info2.title);
console.log(info2.link);
info2.go();
</script>
</body>
</html>
示例:
<!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>
</head>
<body>
<form action="#">
<p>账号:<input type="text" id="account"></p>
<p>密码:<input type="password" id="password"></p>
<p><input type="button" value="登录" id="loginbtn"></p>
</form>
<script>
// document.getElementById("loginbtn").onclick = function () {}
$("#loginbtn").on("click",()=>{
let account=$("#account").val();
let password=$("#password").val();
//对象简写应用场景
let params={account,password};
//发送异步请求
$ajax({
type:"post",
url:"xxx",
data:params,
success(){
}
});
})
</script>
</body>
</html>
七、对象解构
<!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>
</head>
<body>
<script>
// let title="端午节";
// let link="blog.csdn.net/m0_57538148";
let info={
title:"端午节",
link:"blog.csdn.net/m0_57538148",
go(){
console.log(`${info.title},赛龙舟`);
}
}
//通过.的方式
console.log(info.title);
info.go();
//通过[]的方式
console.log(info["title"]);
console.log(info["link"]);
info["go"]();
//es6对象解构 - 快速获取属性和方法的一种形式
let {title:abc,link,go}=info;
//原
//let title = info.title;
//let link = info.link;
console.log(abc,link);
go();
//字符串Api
let str = "hello,vue";
console.log(str.startsWith("hello"));
console.log(str.endsWith("vue"));
console.log(str.includes("e"));
console.log(str.includes("hell"))
//Object方法
console.log(Object.keys(info));
console.log(Object.values(info));
console.log(Object.entries(info));
const targer={a:1};
const targer1={b:2};
const targer2={c:4};
Object.assign(targer,targer1,targer2); //合并到target
console.log(targer);
//扩展运算符
//1、拷贝对象(深拷贝)
let person1 = {name:"konan",age:3}
let someone = {...person1}
console.log(someone);
//2、合并对象
let age = {age:15,sex:'男'}
let name = {name:"qiandao",age:5}
let person2 = {...age,...name} //如果两个对象的字段名重复,后面对象字段会覆盖前面的
console.log(person2);
</script>
</body>
</html>
八、对象传播操作符
<!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>
</head>
<body>
<script>
var person = {
name:'千岛',
address:'你好西安',
link:'http://myip.ipip.net',
go(){
console.log("学习前端啦...");
}
}
//解构出来
var {name,address,...person2}=person;
console.log(name);
console.log(address);
console.log(person2);
</script>
</body>
</html>
九、数组map
<!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>
</head>
<body>
<script>
let arr = [1, 2, 3, 4, 5, 6];
//原
for (let i = 0; i < arr.length; i++) {
arr[i] = arr[i] * 2;
}
console.log(arr);
//新 map自带循环♻️,会把处理的值回填到对应的位置
let newarr = arr.map(ele=>ele*2);
console.log(newarr);
let users = [{age:10,name:'小千'},{age:12,name:'小岛'},{age:14,name:'小明'}];
let newusers=users.map(ele=>{
ele.age=ele.age+1;
if(ele.age>12){
ele.sex='男';
}else{
ele.sex='女';
}
ele.cat='小花'; //可以增加字段
return ele;
});
console.log(newusers);
</script>
</body>
</html>
十、数组reduce
<!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>
</head>
<body>
<script>
let arr = [1,2,3,4,5,6,7,8,9,10];
let result0 = arr.reduce(function(a,b){
return a+b;
});
console.log(result0);
let result = arr.reduce((a,b)=>a+b);
console.log("result = ",result);
</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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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/user.json",
// success(data) {
// console.log("查询用户:", data);
// $.ajax({
// url: `mock/user_corse_${data.id}.json`,
// success(data) {
// console.log("查询到课程:", data);
// $.ajax({
// url: `mock/corse_score_${data.id}.json`,
// success(data) {
// console.log("查询到分数:", data);
// },
// error(error) {
// console.log("出现异常了:" + error);
// }
// });
// },
// error(error) {
// console.log("出现异常了:" + error);
// }
// });
// },
// error(error) {
// console.log("出现异常了:" + error);
// }
// });
//1、Promise可以封装异步操作
// let p = new Promise((resolve, reject) => { //传入成功解析,失败拒绝
// //1、异步操作
// $.ajax({
// url: "mock/user.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/user_corse_${obj.id}.json`,
// success: function (data) {
// console.log("查询用户课程成功:", data)
// resolve(data);
// },
// error: function (err) {
// reject(err)
// }
// });
// })
// }).then((data) => { //成功以后干什么
// console.log("上一步的结果", data)
// $.ajax({
// url: `mock/corse_score_${data.id}.json`,
// success: function (data) {
// console.log("查询课程得分成功:", data)
// },
// error: function (err) {
// }
// });
// })
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/user.json")
.then((data) => {
console.log("用户查询成功~~~:", data)
return get(`mock/user_corse_${data.id}.json`);
})
.then((data) => {
console.log("课程查询成功~~~:", data)
return get(`mock/corse_score_${data.id}.json`);
})
.then((data)=>{
console.log("课程成绩查询成功~~~:", data)
})
.catch((err)=>{ //失败的话catch
console.log("出现异常",err)
});
</script>
</body>
</html>