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（转化后的文件所在的文件夹）
发表回复