ES6 简介
ES6（ECMAScript 2015）是 JavaScript 的一种版本，它引入了许多新的特性和语法，使得 JavaScript 编程更加简洁、高效。以下是一些主要的新特性：
let & const
let
let 用于声明一个变量，它可以在块级作用域内有效。与 var 不同，let 不允许重复声明，也不会预处理，存在变量提升的问题。
示例：
let num = 1;
let num = 2; // 'num' has already been declared
const
const 用于声明一个常量，它的值不能被修改。其他特点与 let 相同。
示例：
const PI = 3.14;
PI = 5; // TypeError: Assignment to constant variable.
解构赋值
解构赋值允许我们从数组或对象中提取值，并赋值给变量。
示例：
// 对象解构赋值
const {type, amount} = expense;
// 数组解构赋值
const [a, b] = [100, 200];
模板字符串
模板字符串简化了字符串的拼接。它必须使用反引号（``）包裹。
示例：
let name = "moka";
let element = `<h1>Hello ${name}!</h1>`;
document.getElementById("info").innerHTML = element;
箭头函数
箭头函数简化了函数的写法，改变 this 指向。
示例：
let dog = {
name: name,
age: age,
getInfo: function() {
return `${this.name}-${this.age}`;
}
};
// 使用箭头函数
let dog = {
name,
age,
getInfo: () => {
return `${this.name}-${this.age}`;
}
};
展开运算符
展开运算符可以替代 arguments，更快、更便捷的操作数组。
示例：
function sum(a, b) {
console.log(arguments);
arguments.forEach(data => {
console.log(data);
});
}
function mul(...datas) {
console.log(datas);
datas.forEach(data => {
console.log(data);
});
}
形参默认值
作⽤：优化代码
特点：当不传⼊参数的时候默认使⽤形参规定的默认值
示例：
// 场景:如果函数有两个参数，当调⽤的时候，如果只传⼀个参数，则给没传的参数⼀个默认值。
// ES5做法：
function makeAjaxRequest(url,method){
if(!method){ // 如果method没有传参，则method的值是undefined
method = "GET";
}
return method;
}
console.log(makeAjaxRequest("Google.com"));
console.log(makeAjaxRequest("Google.com","POST"));
// ES6参数默认值做法：
function makeAjaxRequest(url,method = "GET"){
return method;
}
console.log(makeAjaxRequest("Google.com"));
console.log(makeAjaxRequest("Google.com","POST"));
注意：关于参数默认值中要注意的是， null 值被认为是有效的，如果传了null则不会使⽤默认值
Promise
作⽤：解决"回调地狱"问题
特点：
Promise对象: 代表了未来某个将要发⽣的事件(通常是⼀个异步操作)
有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数
ES6的Promise是⼀个构造函数, ⽤来⽣成promise实例
使⽤步骤：
- 创建promise对象
// 两个形参resolve和reject都是函数
let promise = new Promise((resolve, reject) => {
//初始化promise状态为 pending
//执⾏异步操作，通常是发送Ajax请求，开启定时器，等等
if(异步操作成功) {
resolve();//修改promise的状态为fullfilled，修改完状态后才能执⾏then⾥⾯对应的成功函
数，否则状态还是pending，不会执⾏then⾥⾯的函数
} else {
reject();//修改promise的状态为rejected，修改完状态后才能执⾏then⾥⾯对应的成功函数，否
则状态还是pending，不会执⾏then⾥⾯的函数
}
})
- 调⽤promise的then()
promise.then(() => {
// then⾥⾯有两个函数，此函数是成功的回调
},() => {
// 此函数是失败的回调
})
promise状态：
pending: 初始化状态
fullfilled: 成功状态
rejected: 失败状态
示例：
let promise = new Promise((resolve,reject) =>{
console.log(111);
setTimeout(() => {
console.log(333);
// 根据异步任务的返回结果修改promise状态
//resolve(200);
reject('404Error');
}, 2000);
})
console.log(222);
promise
.then(data => {
console.log(data);
},errData=>{
console.log(errData);
})
promise的then可以链式的写法，⽽不⽤像之前⼀样嵌套写法
function judgeNum(num) {
let promise = new Promise((resolve, reject) => {
setTimeout(() => {
// 根据异步任务的返回结果修改promise状态
if (num > 5) {
resolve(200);
} else {
reject('404Error');
}
}, 2000);
})
return promise;
}
judgeNum(6)
.then(data => {
console.log(data);
return judgeNum(3);
},
errData => {
console.log(errData);
})
.then(data => {
console.log("第⼆个then");
},
errData => {
console.log("第⼆个", errData);
})
Tips：把成功和回调函数都写在then函数⾥，容易混淆，因此可以使⽤then来实现成功的函数，⽤catch来实现失败的回调函数
总结
ES6 引入了许多新的特性和语法，使得 JavaScript 编程更加简洁、高效。通过学习这些新特性，我们可以更好地编写和维护代码。
