ES6内容
- 1、const 和 let
- 2、箭头函数，箭头函数的this指向
- 3、数组新方法
- 4、模板字符串
- 5、解构赋值
- 6、扩展运算符（... 三个点）和 函数默认值
- 7、class类 和继承
- 8、JSON的应用
- 9、Promise的应用
- 10、async，await组合应用
- 11、generator的应用
- 12、模块的export import
1、const 和 let
（1）const 声明常量，不可重复声明同一常量；
（2）let 声明变量，不可重复声明同一变量，存在局部作用域，不存在变量提升。
局部作用域：
只在声明的作用域生效，例如在函数方法内部声明的变量只能有本方法使用，外部不能使用。
变量提升：
在文件内任何位置声明的变量，在整个文件内都可以使用；
类似于在函数方法内部声明的变量在函数方法外部都可以给该变量赋值操作等。典型的就是 var 声明变量；
let 是不存在变量提升的。
2、箭头函数，箭头函数的this指向
（1）箭头函数
//箭头函数格式
let f = () => {}
//例子
let ff = v => v*v;
//传统函数
let fff = function(v) {
return v*v;
}
注意：
1、箭头函数 没有参数 或 多个参数 时，要使用小括号括起来；
2、后面代码块 多行代码 时，要用花括号括起来；
3、只有 一个参数 或后面代码 只有一行代码 时，可以省略小括号和花括号。
3、数组新方法
（1）map() 映射
类似于把一个数组内的所有数据全部打印出来。
（2）reduce() 汇总
reduce(a, b, c)包含三个参数；
计算方式：
例如一个数组 let arr = [1, 4, 5 ,6]；
1、将 1 和 4 分别赋值给 a 和 b 实现相加，得出结果赋值给a;
2、再把 5 赋值给 b ,再继续相加，直到结束得出结果。
（3）filter() 过滤器
相当于在小括号内加上条件，进行筛选，得出符合条件的结果。
（4）forEach() 循环（迭代）
forEach(value, index) 有两个参数，一个是值，一个是下标；
相当于for循环遍历一样。
（5）some()
在小括号内写判断条件，只要有一个为 true 得出结果就为 true。
（6）every()
在小括号内写判断条件，只要有一个为 false 得出结果就为 false。
4、模板字符串
（1）startWith() ：以什么开头
url.startWith("http://") ;
（2）endWith() ：以什么结尾
url.endWith(".jpg");
5、解构赋值
（1）用法
let [a, b, c, d, g, h] = [1, 2, {c:3, d:4}, [5,6], 7, 8];
console.log(a, b, c, d, g, h);
// 1
// 2
// {c:3, d:4}
// [5,6]
// 7
// 8
（2）解析
1、意思是按照对应的需求取出对应的数据；
2、类似于elementUI导入的，按需导入；
3、需要用 [] 中括号括起来，可以取一个或者多个值；
6、扩展运算符（… 三个点）和 函数默认值
（1）扩展运算符 运用
let arr = [1, 2, 3, 4];
let arr2 = [6, 7, 8];
let narr = [...arr, ...arr2];
//正确用法
function demo(a, b, ...arr2) {
console.log(a, b, arr2)
}
//错误用法
function demo(a, ...arr2, b) {
console.log(a, arr2, b)
}
（2）扩展运算符 解析
1、可以让类似于数组类型的多个数据直接带入，可以更方便的应用；
2、只能用于最后位置的参数。
（3）函数默认值
function demo(a, b=1, c=2) {
console.log(a, b, c)
}
函数默认值：当在没有给定参数值时取默认值，如果给定则取给定值。
7、class类 和继承
（1）class类用法
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
say() {
console.log(this.name + "===" + this.age);
}
}
let p = new Person('shuaiB', 18);
p.say(); // shuaiB===18
（2）解析
1、constructor()是构造方法的固定写法，不可以改动；
2、say() 是自己定义的方法；
（3）class 继承
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
say() {
console.log(this.name + "===" + this.age);
}
}
class Teacher extends Person {
constructor(name, age, school) {
super(name, age);
this.school = school;
}
study() {
console.log(this.name + "===" + this.age + "===" + this.school);
}
}
let t = new Teacher("dapiaoliang", 18, 'beida');
t.say(); // dapiaoliang===18
t.study(); // dapiaoliang===18===beida
（4）继承解析
super() 意思是调用父类的构造函数，就是使用父类的构造函数；
8、JSON的应用
（1）JSON.stringify() 串行化。 把一个对象转换成为一个字符串；
let obj = {a:10, b:20 ,c:30};
let str = JSON.stringify(obj);
console.log(str);
（2）JSON.parse() 反串行化。 把一个字符串转换成为一个对象。
let str = '{"a":10, "b":20 ,"c":30}';
let obj = JSON.stringify(str);
console.log(obj.a, obj.b, obj.c);
（3）简写
1、（属性和值）的名字相同的时候可以简写。
键值对名相同可以略写（{a, b, c:c}，a,b键值对相同可略写，不略写就像c）；
（4）json的标准写法
1、只能用双引号("")；
2、所有（属性）名子只能用双引号包起来。（{“a”:1,“b”:2}）
9、Promise的应用
（1）基本使用
new Promise((resolve, reject) => {
//成功
resolve('100');
//失败
//reject('error');
}).then(result => {
console.log(result); // 100
},err => {
console.log(err); // error
})
（2）解析
1、resolve, reject 传入 Promise 是函数；
2、这里 then 里的参数是可以有两个的，认真看（resolve, reject）；
3、resolve() 是指成功的，将会执行后面 result ；reject() 是指失败的，将会执行后面的 err；
4、Promise 是用同步的方法解异步的问题，解决回调地狱。
（3）all() race() catch()
all() 使用方法
let one = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("aa");
},1000);
})
let two = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("bb");
},1000);
})
let three = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("cc");
},1000);
})
Promise.all([one, two, three]).then(arr => {
let [one, two, three] = arr;
console.log(one);
console.log(two);
console.log(three);
})
// aa bb cc
解析
1、这里当上面的三个函数执行完成之后，把得出的所有结果一次性传给 arr 这个数组；
2、所以等待时间为 1+1+1=3 秒。
race()使用方法
let one = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("aa");
},4020);
})
let two = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("bb");
},1200);
})
let three = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("cc");
},6050);
})
Promise.all([one, two, three]).then(arr => {
let [one, two, three] = arr;
console.log(arr);
})
// bb
解析
1、race() 赛跑的意思，即为找出花费时间最短的；
2、适用场景，多个服务区中查找到反应时间最快的服务器。
catch() 使用方法
}).then(result => {
console.log(result);
}).catch(err => {
console.log("error ****************");
console.log(err);
})
解析
如果出错了就捕获，然后打印出错内容
10、async，await组合应用
（1）用法
function demo(num) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2*num);
},2000);
})
}
async function test() {
let a = await demo(20);
console.log(a);
}
test();
（2）解析
1、在调用 test() 方法的时候，将会立即执行 demo() 这个方法；
2、因为 await 等待执行 demo() ，所以要等待 2 秒后执行 setTimeout() 方法里面的计算；
3、当执行完 setTimeout() ，后再进行输出 a；
4、所以整个过程中 await 是必须等待函数执行完才能进行输出，即完成对应 await 才能进行下一步。
11、generator的应用
（1）用法
function *demo() {
console.log('1');
yield // 暂停的作用
console.log('2');
yield
console.log('3');
}
let genObj = demo();
genObj.next(); //启动 //1
genObj.next(); //2
genObj.next(); //3
（2）解析
1、 * 号，是用于区别普通函数；
2、yield 表示暂停，终止于这个位置；
3、next() 表示启动函数；
4、注意：启动函数第一个 next() 只启动函数，无法传值进去。
（3）传值用法
function *demo() {
console.log('1');
let a = yield 'aa' // 暂停的作用
console.log(a);
let b = yield 'bb'
console.log(b);
}
let genObj = demo();
genObj.next(10); //启动
genObj.next(20);
genObj.next(30);
console.log(a, b, c)
//1 这里没错，因为第一个用于启动不传值
//20
//30
//{value:"aa"...}
//{value:"bb"...}
//{value:"undefined"...} //c这里没有返回值所以 undefined
12、模块的export import
export 作用于 ".js" 文件。
（1）单个 导出（暴露）使用
export let url = "https://blog.csdn.net/jinzai9976?spm=1001.2100.3001.5343"
export let name = 'weige'
（2）多个 导出（暴露）使用
let url = "https://blog.csdn.net/jinzai9976?spm=1001.2100.3001.5343";
let name = 'weige';
export {
url,
name
}
（3）解析
1、单个和多个导出（暴露），在别的文件引入（import） 时，要对应名称；
2、当然可以重命名，用 as xxx 即可，可在其他类似地方灵活使用。
export {
url as myurl,
name as myname
}
（3）默认 导出（暴露）使用
let fun = function() {
return "做你自己真正喜欢的，并保持好自我的意识和价值！";
}
export default {
fun() {
return 'ya mie die';
}
}
默认导出（暴露），可以重新命名
import myff from "xxx.js" // myff 是自定义名称后的
