https://www.bootcdn.cn/
es6
01 let&const
ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明⼀个只读的常量，⼀旦声明，常量的值就不能改变。
<!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>
/*
//let 声明的变量在代码块内访问有效，var 声明的变量在全局范围有效
{
var a=0;
let b=1;
}
console.log(a);//0
console.log(b);//ReferenceError: b is not defined
*/
/*
// let 声明的变量名只能使用一次；var声明的变量名可以使用多次
var a=1;
var a=2;
console.log(a);//2
let b=3;
let b=4;
console.log(b);//Uncaught SyntaxError: Identifier 'b' has already been declaredz
*/
/*
// let 不存在变量提升；var会变量提升
console.log(a);//Uncaught ReferenceError: Cannot access 'a' before initializatio
let a="apple";
console.log(b);//undefined
var b="hello"
*/
// const 声明的变量 属于常量，一旦声明初始化完毕后，值不能修改
const a=10;
a=20; //Uncaught TypeError: Assignment to constant variable.
</script>
</body>
</html>
02 解构赋值
解构赋值是对赋值运算符的扩展。
它是⼀种针对数组或者对象进⾏模式匹配，然后对其中的变量进⾏赋值。
在代码书写上简洁且易读，语义更加清晰明了；也⽅便了复杂对象中数据字段获取。
<!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>
/*
//数组解构
let arr = [1,2,3];
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];
let [a,b,c] = arr;
console.log(a,b,c);
*/
//对象解构
const student = {
name: "tom",
age: 18,
hobby: ['java', 'html', 'js']
}
// const name = student.name;
// const age = student.age;
// const hobby = student.hobby;
const {name: studentName, age, hobby} = student;
console.log(studentName, age, hobby);
function func() {
return "调用func函数"
}
let info = `我是学生${studentName}，今年${age}岁了，我喜欢${hobby}，${func()}`;
console.log(info);
</script>
</body>
</html>
03 函数
<!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>
/*
//1. es6中 函数的基本用法，加入了对函数参数进行默认值赋值
function add(a,b=100){
return a+b;
}
console.log( add(20,30) ); //50
console.log( add(20) ); //120
*/
/*
//2. 可变参数
function func(...params) {
console.log(params.length);
}
func(22,4,9); //3
func(177,27,1,34,3) //5
*/
//3.箭头函数，简化了函数的书写
// var printObj = function (obj){
// console.log(obj);
// }
var printObj = obj => console.log(obj);
printObj("helloworld");
// var add = function (a,b){
// return a+b;
// }
var add = (a,b) => a+b;
console.log(add(10,20));
// var add2 = function (a,b){
// result = a+b;
// return result * 10;
// }
var add2 = (a,b) =>{
result = a+b;
return result * 10;
}
console.log(add2(5,8))
//箭头函数 与 对象解构 混合使用
const student = {
name : 'tom',
age : 18,
hobby : ['java', 'js', 'html']
}
// var printStudent = function (student) {
// console.log(`学生的名字${student.name}，喜欢${student.hobby}`)
// }
// var printStudent = student => console.log(`学生的名字${student.name}，喜欢${student.hobby}`);
var printStudent = ({name, hobby}) => console.log(`学生的名字${name}，喜欢${hobby}`);
//调用方法
printStudent(student);
//let {name, age, hobby} = student;
</script>
</body>
</html>
04 对象
<!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>
// const student = {
// name : 'tom',
// age : 18,
// hobby : ['java', 'js', 'html']
// }
//对象的声明进行简化
const name = 'tom';
const age = 18;
const student1 = {
name: name,
age: age
}
const student2 = {
name,
age
}
console.log(student1);
console.log(student2);
let student3 = {
name : 'tom',
//以前函数的写法
eat: function (food) {
console.log(this.name +"正在吃" + food);
},
eat2(food){
console.log(this.name +"正在吃" + food);
},
//在箭头函数中，不支持使用this，需要使用对象.属性
eat3: food=> console.log(student3.name +"正在吃" + food)
}
student3.eat("西瓜");
student3.eat2("西瓜");
student3.eat3("西瓜");
</script>
</body>
</html>
05 promise
Promise 是异步编程的⼀种解决⽅案，⽐传统的解决⽅案——回调函数和事件——更合理和更强⼤。
所谓 Promise ，简单说就是⼀个容器，⾥⾯保存着某个未来才会结束的事件（通常是⼀个异步操作）的结果。
Promise 提供统⼀的 API，各种异步操作都可以⽤同样的⽅法进⾏处理。
ES6 规定， Promise 对象是⼀个构造函数，⽤来⽣成 Promise 实例。
Promise 构造函数接受⼀个函数作为参数，该函数的两个参数分别是 resolve 和 reject 。它们是两个函数，由 JavaScript 引擎提供，不⽤⾃⼰部署。
resolve 函数的作⽤是，将 Promise 对象的状态从“未完成”变为“成功”（即从 pending 变为resolved），在异步操作成功时调⽤，并将异步操作的结果，作为参数传递出去；
reject 函数的作⽤是，将 Promise 对象的状态从“未完成”变为“失败”（即从 pending 变为rejected），在异步操作失败时调⽤，并将异步操作报出的错误，作为参数传递出去。
Promise 实例⽣成以后，可以⽤ then ⽅法分别指定 resolved 状态和 rejected 状态的回调函数。
then ⽅法可以接受两个回调函数作为参数。
第⼀个回调函数是 Promise 对象的状态变为 resolved 时调⽤，
第⼆个回调函数是 Promise 对象的状态变为 rejected 时调⽤。
这两个函数都是可选的，不⼀定要提供。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<script>
//声明一个promise的函数
function get (url, param) {
return new Promise((resolve,reject)=>{
$.ajax({
url:url,
data:param,
success: function (data) {
resolve(data);
},
error: function (err) {
reject(err);
}
})
});
}
//使用promise的函数
get("mock/imageUrl.json")
.then((data)=>{
console.log("图片url查询成功...",data);
return get(`mock/imageInfo_${data.id}.json`);
})
.then((data)=>{
console.log("查询图片信息成功...");
})
.catch((err)=>{
console.log("出现异常",err);
});
</script>
</body>
</html>