ES6的新增语法
一、ES6中新增的用于声明变量的关键字
- let声明的变量只在所处块级有效
- const声明常量，常量就是值(内存地址)不能变化的量，声明时必须赋值，要存储的值不需要变化用const关键字声明最好
二、数组解构
let [a,b,c] = [1,2,3];
//分别对应:a=1,b=2,c=3
//如果没有对应的值，就为undefined
三、对象解构
let person = {naem:'法内狂徒张三'，age:'不详'}；
let {name,age] = person；
console.log(name);//法内狂徒张三
console.log(age);//不详
let {name:myName,age:myAge} = person;
//把person里面的name，age值给了myName和myAge
四、箭头函数
() => {};//基本结构
const fn = （）=> {};//一般把箭头函数赋值给一个变量，然后调用
箭头函数不绑定this关键字，箭头函数中的this，指向的就是函数定义位置的上下文。
五、模板字符串
`内容${数据}内容` //用``号（键盘1前面那个键）把全部内容包裹起来，把要传递的数据写在${模板字符串}里面，两边都可以拼接字符串内容
classNane = `iconfont ${icon-qita}`
六、set数据结构
const s = new Set([1,2,3]);//实例化构造set函数
const s1 = new Set([1,1,2,2]);//去重，返回的结果是1，2,Set对象存储的值总是唯一的
实例方法：
1.s.add(5).add(6); //{1,2,3,5,6} 向set结构中添加值
2.s.delete(2); //{1,3,5,6} 删除set结构中的2这个值
3.s.has(1); //表示set结构中是否有1这个值，返回布尔值
4.s.clear(); //清除set结果中的所有值
var a = new Set([1,2,3]);
var b = new Set([4,3,2]);
var public = new Set([...a].filter(x =>b.has(x))); //{2,3}
函数参数默认值
function(a,b,c=10) {
return a+b+c;
}
let result = add(1,2);
//实参没有传第三个以前默认是undefined，现在默认是10
rest参数
function date() {
console.log(arguments);
}
date('a','b','c');//返回的是对象
//rest参数
function fn(a,b,...args) {
console.log(a);//1
console.log(b);//2
console.log(args);//[3,4,5,6]返回的一个数组,...args必须是最后一个才会继承剩余的参数，如果(a,...args,b)会报错
}
fn(1,2,3,4,5,6);
ES6模块
export和import
模块导入导出各种类型的变量，如字符串、数值、函数、类。 导出的函数声明与类声明必须要有名称。
//---export [test.js]---
let name = "TOM";
let age = 20;
let fn =function(){
return ·我的名字是${name},我${age}岁·
}
let class = class myClass {
static a = "yeah!"; //static是类的静态方法，只有类能调用，而普通方法是类的实例只有类的实例才能调用
}
//导出变量
export {name,age,fn,class};
//---import [xxx.js]---
//导入变量
import {name,age,fn,class} from './test.js';
console.log(name); //TOM
console.log(age); //20
console.log(fn()); //我的名字是TOM,我20岁
console.log(class.a); //yeah!
as用法
使用as重新定义导出的接口名称
/---export [test1.js]---/
export let name = "Tom";
/---export [test2.js]---/
export let name = "Bob";
/---import [xxx.js]---/
import {name as name1} from 'test1.js';
import {name as name2} from 'test2.js';
console.log(name1); //Tom
console.log(name2); //Bob
export default命令
- 在一个文件中export、import可以有多个,export default仅有一个
- export default是对应的导出接口变量
- 通过export方式导出，在导入时要加{},export default则不需要
ES6Promise对象
Promise是一个构造函数，通过new关键字实例化对象
语法
new Promise((resolve,reject) =>{})
Promise接收一个函数作为参数 在参数函数中接受两个参数
- resolve 成功函数
- reject 失败函数 promise实例有两个属性
- state:状态
- result:结果
1）promise的状态
- pending (进行中，准备)
- fulfilled (已完成，成功)
- rejected (已拒绝，失败)
2）promise状态的改变
通过调用resolve()和reject()改变当前promise对象的状态
const p = new Promise((resolve,reject) => {
//resolve():调用函数，使当前promise对象的状态改成fulfilled
resolve()
})
console.dir(p) //fulfilled
const p = new Promise((resolve,reject) => {
//reject():调用函数，使当前promise对象的状态改成rejected
reject()
})
console.dir(p) //rejected
promise状态的改变是一次性的，当调用了resolve()把状态改成fulfilled,再调用reject()也不会生效
3）promise的结果
const p = new Promise((resolve,reject)=>{
//通过调用resolve(),传递参数，改变当前promise对象的结果
resolve('成功的结果')
//reject('失败的结果')
})
console.log(p); //状态为fulfilled，结果为成功的结果
Promise的方法
- then方法
then方法接收两个参数
第一个参数是Promise执行成功时的回调函数
第二个参数是失败时的回调函数
根据状态他们两也只会执行一个 返回值：返回一个promise对象
const p = new Promise((resolve,reject) =>{
resolve()
})
p.then(() =>{
//当promise的状态是fulfilled时，执行
console.log('成功时调用')
},() => {
//当promise的状态是rejected时，执行
console.log('失败时调用')
})
在then方法的参数函数中，通过形参使用promise对象的结果
const p = new Promise((resolve,reject) =>{
resolve(’123‘)
//reject('111')
})
p.then((value) =>{
//当promise的状态是fulfilled时，执行
console.log('成功时调用',value)
},(err) => {
//当promise的状态是rejected时，执行
console.log('失败时调用',err)
})
console.dir(p) //结果为：成功时调用 123
then方法的返回一个新的promise实例，状态是pending
如果promise的状态不改变，then里的方法就不会执行，就是说promise实例状态为pending时，then不会执行，利用return和抛出错误可以改变状态。
const p = new Promise((resolve,reject) =>{
resolve()
})
const t =p.then((value) =>{
console.log('成功')
//使用return可以将t实例的状态改成fulfilled
//return 123
//错误，会将t实例的状态改为rejected
console.log(a); //a不存在，会报错
}，then((err)=>{
console.log('失败')
}));
t.then((value)=>{
console.log('成功2',value)
},(reason) =>{
console.log('失败',reason); //会打印这个log
})
如果在then方法中，出现代码错误，会将返回的promise实例改为rejected状态
- catch方法
const p = new Promise((resolve,reject) =>{
//成功
//resolve('成功')
//下面两个都会报错
//console.log(a)
throw new Error('出错了')
})
//1.当promise的状态改为rejected时，被执行
p.then((value) =>{
console.log('成功',value)
})
//2.当promise执行体中出现代码错误时，被执行
p.catch((reason) => {
console.log('失败',reason)
})
console.log(p); //Promise {<rejected>: Error: 出错了}
//失败 Error: 出错了
throw error与throw new Error(error)的区别
throw new Error(error)；这个是创建错误，创造一个错误类型抛出
throw error这个是抛出错误
var a = 5;
try{
if(a==5){
//抛出错误
throw new Error("loopTerminates");
//throw "loopTerminates";
}
}catch(e){
console.log(e); //打印出Error对象：Error:loopTerminates
console.log(e.message); //loopTerminates
//console.log(e); //打印：loopTerminates
//console.log(e.message); //打印：undefined
}
ES6async函数
语法:
async function name(param){statements}
//name 函数的名称
//param 要传递给函数的参数的名称
//statements 函数体语句
async函数返回一个Promise对象，可以使用then方法添加回调哈数。
async function Async(){
return "hello world";
}
console.log(Async()) //Promise {<fulfilled>: "hello world"}
Async().then(v=>{
console.log(v); //hello world
})
async函数中可能会有await表达式，await只会在async function中有效，如果遇到await就会先暂停async的执行，等到触发的异步操作完成后，恢复async函数的执行并返回解析值。
function test(){
return new Promise((resolve,reject) =>{
setTimeoout(fumction(){
console.log("111");
resolve();
},1000);
})
}
async function Async() {
await test(); //await会暂停async的执行，等调用的test()执行完毕后再恢复async的执行，让async继续执行
console.log("333");
}
Async();
//111
//333
await语法
[return_value] = await expression;
//参数expression一个Promise对象或者任何要等待的值
//返回值返回Promise对象的处理结果，如果等待的不是Promise对象，则返回该值本身
function test(x){
return new Promise((resolve,reject) =>{
setTimeout(fumction(){
resolve(x);
},1000);
})
async function Async() {
var x = await test("hello world");
var y = await 123
console.log(x);、
console.log(y);
}
Async();
//hello world
//123
