ES6环境：webpack3.0
ES6 声明变量
let：相当于ES5的var
但var没有块级作用域，而let有
没有预解析，不存在变量提升
在代码块内，let要先定义完再使用，只要let定义变量在之前使用都是报错（为暂时性死区（TDZ））
同一个作用域里不能重复定义变量
for循环中，for循环里面是父级作用域，循环里面又是一个
推荐以后使用let
const：定义常量（定义完变量后不能再次被赋值）
但对于一些对象上自身的方法，可以利用其方法进行更改（如array.push,...）
有一特例：Object.freeze（能阻止改变，即使是对象自身上的方法也不能被改变）
ES6 解构赋值（实用）
用在数据交互ajax时非常有用
注意：左右两边，结构格式要保持一致
e.g. let [a,b,c]=[1,2,3] => a=1,b=2,c=3
let json={
name:'ckx',
age:20,
job:'wu'
}
let {name,age,job}=json => name='ckx',age=20,job='wu'
解构时可以给默认值：let [a,b,c='暂无']=[1,2]
解构可用于交换值：
let a=1;
let b=2;
[a,b]=[b,a];
解构可用于接收函数返回的多个值：
function a(){
return{
b:1,
c:2
}
}
let {b,c}=a() => b=1,c=2
ES6 字符串
字符串模板：`xxxxxxx`
优点：可随意换行
`xxx${变量名}xxx`
e.g. let a=1;
let b=2;
let str=`这里有${a}个人
那里有${b}个人`
字符串新增的一些方法：
str.includes('xxx')：xxx是否包含在str中（返回true/false）
str.indexOf('xxx')：返回xxx在str中的索引位置，找不到则返回-1
str.startsWith('xxx')：str是否以xxx开头（返回true/false）
str.endsWith('xxx')：str是否以xxx结尾（返回true/false）
str.repeat(n)：str重复n次
str.padStart(整个字符串长度（填充后的长度），填充的东西)：str往前填充
str.padEnd(整个字符串长度（填充后的长度），填充的东西)：str往后填充
ES6 函数
设置默认参数：function({a='xx',b='xx'}){} 或 function(a,b){a=a || 'xx'; b=b || 'xx'}或function({a,b}={}){}
函数参数默认已经定义了，不能再使用let,const声明
扩展运算符/剩余运算符：...
展开数组：let arr=['a','b','c'];
...arr => 'a','b','c'
合为数组：function(...a){...}
show(1,2,3);
此时的a为['1','2','3']
当作剩余参数：function(a,b,...c){
console.log(a);
console.log(b);
console.log(c);
}
show(1,2,3,4,5);
此时输出的a为1，b为2，c为3,4,5
箭头函数：()=> return的东西
()=>{...}
箭头函数的this指向定义函数所在的对象，而不是运行时所在的对象
箭头函数没有arguments，用'...'
箭头函数不能当构造函数
ES6 数组
ES5里循环的方法：
for
while
arr.forEach(fn(val,index,arr){}) / arr.forEach(fn,this指向的对象)
arr.map(fn(val,index,arr){}) / arr.map(fn,this指向的对象) （会返回一个新数组 ）
arr.filter(fn(val,index,arr){})：过滤一些不合格的元素
arr.some(fn(val,index,arr){})：类似查找，数组里面某一个元素符合条件，返回true
arr.every(fn(val,index,arr){})：数组里面所有元素符合条件，返回true
arr.reduce(fn(prev,current,index,arr))：可用于求和/阶乘...（prev+current,类似递归）（方向是从左往右）
arr.reduceRight()：类似arr.reduce,方向是从右往左
for(xx of xxx)：xx在xxx里面的循环（可配合arr.keys()（数组下标）,arr.entries()（数组的某一项）使用）
数组的一些新增方法：
扩展运算符/剩余运算符：... （上面有介绍）
Array.from(xxx)：把类数组对象（xxx）转成数组
Array.of('xx','xxx','xx')：把一组值合并转为一个数组
arr.find(fn(val,index,arr){})：在arr中找到第一个符合此条件的元素，若找不到则返回undefined
arr.findIndex(fn(val,index,arr){})：在arr中找到符合元素的下标位置，没找到则返回-1
arr.fill('xxx',x,y)：xxx填充数组（范围是从x到y）
arr.includes('xxx')：判断arr是否包含xxx
ES6 对象
对象中的函数可以简写：let json={
a,
show(){...} （建议不要使用箭头函数）
}
Object.is()：用来比较两个值是否相等（肉眼看的相等就相等）
新对象=Object.assign(目标对象,source1,source2,...)：用来合并对象（用途：复制一个对象/数组，合并参数）
Object.keys(xxx)：遍历对象的键值
Object.entries()：遍历对象的每一项
Object.values()：遍历对象的值
...：对象解构：let json={a:3,b:4};
let json2={...json}; => json2={a:3,b:4}
ES6 Promise
作用：解决异步回调问题
let promise=new Promise(function(resolve,reject){ //resolve为成功调用，reject为失败调用
resolve('成功');
reject('失败');
})
promise.then(success的fn,fail的fn)
=> promise.then(res=>{
... //会输出resolve的内容
},err=>{
... //会输出reject的内容
})
promise.catch(err=>{...}) //捕获错误
连贯用法：new Promise(fn).then(res=>{}).catch(err=>{})
Promise.all([promise1,promise2,...])：把promise打包,扔到一个数组里，打包完还是promise对象。必须确保所有promise对象都是resolve状态才可返回（可利用此来调整输出的顺序，相当于把异步变为同步，但还是异步的）
Promise.race([p1,p2,...])：与Promise.all类似，但只要其中有一个promise对象是resolve状态即可返回
ES6 模块化
定义（导出）模块：export 'xxx'
引入模块的几种方法：import 'xxx'
import {xx,xx} from 'xxxx'
import {xxx as xx} from 'xxxx'
import * from 'xxxx'
import：
可以是相对路径，也可以是绝对路径
import无论你引入多少次，只会导入一次
可改名：import * as a from 'xxx'
有声明提升效果，import会自动提升到顶部
导出去模块内容，如果里面有定时器更改，外面也会改动，不像Common规范缓存
默认import语法不能写到if之类的语句中
另一种import的写法（返回的值是Promise对象）：import('xxx').then(res=>{...})
优点：按需加载
可以写在if之类的语句中
路径也可以动态
可与Promise.all([])配合使用：Promise.all([import('xxxx1'),import('xxxx2')]).then(([m1,m2])=>{...});
与async,await配合：
async function(){
const mod1=await import('xxxx1');
const mod2=await import('xxxx2');
const [m1,m2]=await Promise.all([import('xxxx1'),import('xxxx2')]).then();
}
export：
可在里面改名：export{a as apple,b as banana}
ES6 类和继承
类：
第一种方式：
class xxx{
constructor(){
this.xxx='xx';
}
函数名(){}, //命名函数
[变量名](){}, //表达式命名函数
}
第二种方式：
const xxx=class{...}
class里面的取值函数：get xxx(){}
存值函数：set xxx(val){}
若想在class中直接使用类名调用里面方法，则在方法前面加上static
注意：class没有声明提升的功能
继承：
extends,super()
class 子类名 extends 父类名{...}
e.g.1 class p{
constructor(name){
this.name=name;
}
showname(){
return `${this.name}`
}
}
class s extends p{
constructor(name,skill){
super(name); //继承时必须写（继承参数）
this.skill=skill;
}
showname(){
super.showname(); //继承父级的方法
}
showskill(){
return `${this.skill}`
}
}
e.g.2 拖拽
class Drag{
constructor(id){
this.odiv=document.getElementById(id);
this.disX=0;
this.disY=0;
this.init();
}
init(){
this.odiv.onmousedown=function(e){
this.disX=e.clientX-this.odiv.offsetLeft;
this.disY=e.clientY-this.odiv.offsetTop;
document.onmousemove=this.Move.bind(this);
document.onmouseup=this.Up.bind(this);
return false;
}.bind(this);
}
Move(e){
this.odiv.style.left=e.clientX-this.disX+'px';
this.odiv.style.top=e.clientY-this.disY+'px';
}
Up(){
document.onmousemove=null;
document.onmouseup=null;
}
}
编写类LimitDrag（限制范围的拖拽，继承Drag）
class LimitDrag extends Drag{
Move(e){
super.Move(e);
//在这里只编写左边和顶部的范围限制，其余两边可自行补充
if(this.odiv.offsetLeft<=0){
this.odiv.offsetLeft=0;
}
else if(this.odiv.offsetTop<=0){
this.odiv.offsetTop=0;
}
}
}
ES6 Symbol和generator
Symbol定义：let syml=Symbol('xxx'); （以数据类型symbol定义一个唯一值）
注意：Symbol不能new
Symbol返回是一个唯一值
数据类型为symbol（以前的六个基本类型：number,string,boolean,function,object,undefined）
若symbol作为key，用for in循环输不出来
generator函数：生成器（解决异步，深度嵌套的问题）
generator定义：function * xxx(){}
e.g. function * welcome(){
yield 'hello';
yield 'world';
return 'friend';
}
let w=welcome();
//手动调用
w.next(); => hello done:false
w.next(); => world done:false
w.next(); => friend done:true（证明生成器中的内容已全部输出完成）
//自动调用
for(let val of w){
console.log(val); => hello world （但不会输出返回值）
}
//进行解构赋值
let [a,b,c]=welcome();
console.log(a,b,c); => hello world undefined
//使用...运算符
let [a,...b]=welcome();
console.log(a,b);
或直接console.log(...welcome());
//使用Array.from
console.log(Array.from(welcome()));
generator还可配合axios使用：
function * getdata(){
let val=yield 'aa';
yield axios.get('xxxxxx${val}');
}
let g=getdata();
let b=g.next().value;
g.next(b).value.then(res=>{...})
ES6 async和await
async function fn(){ //表示此函数有异步任务
await xxx //表示后面的结果需要等待
}
async特点：
await只能放到async函数中
相比generator语义化更强
await后面可以是promise对象，也可以是数字，字符串，布尔
async函数返回是一个promise对象
只要await语句后面Promise状态变成reject，那么整个async函数都会中断执行
解决async函数中抛出错误，影响后续代码：
第一种：
try{
}catch(e){
}
第二种：
promise本身的catch
建议：有await的地方，都放在try...catch...里面
ES6 Set和WeakSet
Set是一个新的数据结构
Set定义：let xxx = new Set() / new Set(['a','b'])
Set的一些方法：
xxx.add('xx')：往xxx添加一项xx
xxx.delete('xx')：从xxx删除一项xx
xxx.has('xx')：判断xxx中里面是否有xx
xxx.size：得出xxx的值的个数
xxx.clear：清空xxx的所有值
可用for...of... / xxx.forEach()循环xxx的值
可利用Set中的key值不能重复来实现数组去重：
let arr=[1,2,2,3,4,5,5,5,8,2];
let set=[...new Set(arr)];
此时的set为[1,2,3,4,5,8]
Set数据结构变成数组：[...set]
让set使用数组的map,filter方法：
let set= new Set([1,2,3]);
set=new Set([...set].map(val=>val*2))
set=new Set([...set].filter(val=>val%2==0))
WeakSet：（不推荐使用）
Set()里面最好放数组[]，但可以直接利用add来把对象{}add进去（直接放就不行）
WeakSet()里面最好放对象{}
WeakSet没有size,clear方法
ES6 Map和WeakMap
Map定义：let map = new Map()
Map的一些方法：
map.set(key,value)：设置一个值
map.get(key)：获取一个值
map.delete(key)：删除一个值
map.has(key)：查看有没有那个值
map.clear()：清空所有值
可用for...of... / xxx.forEach()循环值
WeakMap：
key只能是对象
ES6 数字(数值)变化和有关Math
数字（数值）变化：
生成二进制(Binary)：let a = 0b10100
生成八进制(Octal)：let a = 0o456
生成十六进制(Hex)：let a = 0hccd
ES6新增的一些Number上的方法：
Number.isFinite(xx)：判断xx是不是数字
Number.isInteger(xx)：判断xx是不是整数
Number.isSafeInteger(xx)：判断xx是否为安全整数
（安全整数的范围：-(2^53-1) ~ 2^53-1，包含两端）
Number.MAX_SAFE_INTEGER：显示最大安全整数
Number.MIN_SAFE_INTEGER：显示最小安全整数
ES6新增的一些Math上的方法：
Math.trunc()：截断（只保留整数部分（不会四舍五入））
Math.sign()：判断一个数是正数（返回+1），负数（返回-1），还是0（返回0），其他值（返回NaN）
Math.cbrt()：计算一个数的开立方根
ES6 Proxy和Reflect
Proxy：代理（扩展对象的一些功能）
作用：vue中的拦截功能，预警，上报，扩展功能，增强...
语法：new Proxy(target,handler);
let obj=new Proxy(被代理的对象，对代理对象进行什么操作)
handle: （部分方法操作）
{
set(target,prop,value){}; //设置，拦截
get(target,prop){}; //获取
deleteProperty(target,prop){}; //删除，拦截
has(target,prop){}; //检测有没有某个东西
apply(target,context,args){return Reflect.apply(...arguments)}; //调用函数处理
...
}
e.g. let obj={
name='ckx';
}
let newObj=new Proxy(obj,{
get(target,property){
console.log('你访问了${property}属性')
return target[property];
}
});
console.log(newObj.name); => 'ckx'
e.g.1 实现一个功能：DOM.xxx()（xxx是什么就创建什么元素）
const DOM = new Proxy({},{
get(target,property){
return function(attr={},...children){
//创建元素
const el = document.createElement(property);
//添加属性
for(let key of Object.keys(attr)){
el.setAttribute(key,attr[key])
}
//添加子元素
for(let child of children){
if(typeof(child)=='string'){
child=document.createTextNode(child);
}
el.appendChild(child);
}
return el;
}
}
})
let odiv=DOM.div({id:'div1',class='div2'},'我是div1','和div2')
=> <div id='div1' class='div2'>
我是div1
和div2
</div>
Reflect:反射（通过Reflect对象身上直接拿到语言内部的东西）
Reflect.apply(调用的函数，this指向，参数数组)
e.g. let res=Reflect.apply(Math.ceil,null,[9.8]);
console.log(res); => 10
'assign' in Object => Reflect.has(Object,'assign');
delete json.a => Reflect.deleteProperty(json,'a');
ES2018（ES9）新增的东西
命名捕获：?<名字>
e.g. let str='2021-02-05';
let reg=/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
let {year,month,day} = str.mathch(reg).groups;
分别输出year,month,day为：2021,02,05
反向引用命名捕获：\k<名字>
e.g. let reg=/^(?<world>hello)-\k<world>)$/;
let str='a-a'; => false
let str1='world-world'; => false
let str2='hello-hello'; => true
let reg=/^(?<world>hello)-\k<world>-\1)$/; => 匹配到的是：hello-hello-hello
替换：$<名字>
e.g. let str='2021-02-05';
let reg=/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
str.replace(reg,'$<year>/$<month>/$<day>'); => 2021/02/05
另一种替换方式：str=str.replace(reg,(...args)=>{
let {year,month,day} = args[args.length-1];
retrun `${year}/${month}/${day}`;
})
=> 2021/02/05
dotAll模式：s
在原来的正则中，'.'表示匹配任何东西，除了\r,\n （在es6里可以在正则表达式后面加上s，致使都能匹配）
e.g. let reg=/^\w+.\w+$/s;
let str=hello\nworld; => true
标签函数：
function xxx(args){
console.log(args[0]);
}
console.log(xxx`hello`);
输出为hello
关于异步的几种解决方案
回调函数
事件监听
发布/订阅
Promise对象
将ES6语法转换成ES5语法
1. nodesjs中的babel模块（babel-preset-es2015 babel-cli）
2. 新建文件.babelrc
3. 在新建的文件中编写：{
"presets":[
"es2015"
],
"plugins":[]
}
4. 利用babel转化自己写的js文件（含ES6语法）
babel src/index.js（自己写的文件） -o dist/index.js（目标文件）
文件夹的转换：babel src（自己文件所在的文件夹） -d dist（转化后的文件所在的文件夹）
想要实时的编译：babel src/index.js（自己写的文件）-w -o dist/index.js（目标文件）
babel src（自己文件所在的文件夹）-w -d dist（转化后的文件所在的文件夹）
以上是对ES6的部分整理和总结，希望有用，有什么建议欢迎提出哦！
大家一起进步~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。