ES6环境：webpack3.0ES6 申明变量
let：相当于ES5的var 但var没有块级作用域，而let有 没有预解析，不存在变量晋升 在代码块内，let要先定义完再应用，只有let定义变量在之前应用都是报错（为暂时性死区（TDZ）） 同一个作用域里不能反复定义变量 for循环中，for循环外面是父级作用域，循环外面又是一个 举荐当前应用letconst：定义常量（定义完变量后不能再次被赋值） 但对于一些对象上本身的办法，能够利用其办法进行更改（如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中的索引地位，找不到则返回-1str.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里循环的办法：forwhilearr.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){})：相似查找，数组外面某一个元素符合条件，返回truearr.every(fn(val,index,arr){})：数组外面所有元素符合条件，返回truearr.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中找到第一个合乎此条件的元素，若找不到则返回undefinedarr.findIndex(fn(val,index,arr){})：在arr中找到合乎元素的下标地位，没找到则返回-1arr.fill('xxx',x,y)：xxx填充数组（范畴是从x到y）arr.includes('xxx')：判断arr是否蕴含xxxES6 对象
对象中的函数能够简写：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增加一项xxxxx.delete('xx')：从xxx删除一项xxxxx.has('xx')：判断xxx中外面是否有xxxxx.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 = 0hccdES6新增的一些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. 新建文件.babelrc3. 在新建的文件中编写：{ "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（转化后的文件所在的文件夹）