简介ES6是一个统称，意思是JavaScript5.1版本之后的下一代标准，涵盖ES2015、ES2016、ES2017语法标准。目前只有部分较新版本的浏览器支持ES6的新特性。要在旧版本的浏览器中运行，我们需要将ES6转换为ES5。Chrome：从51版开始支持97%的ES6新特性Firefox：从53版开始支持97%的ES6新特性Safari：从10版开始支持99%的ES6新特性IE：Edge15可以支持96ES6新功能的百分比。Edge14支持93%的ES6新特性。（IE7~11基本不支持ES6）Babeltranscoder是一款应用广泛的ES6转码器。npminstall--save-dev@babel/核心配置文件.babelrc#最新转码规则$npminstall--save-dev@babel/preset-env#react转码规则$npminstall--save-dev@babel/preset-react//`presets`字段设置转码规则。以下规则集是官方提供的，您可以根据需要安装。{"presets":["@babel/env","@babel/preset-react"],"plugins":[]}polyfillBabel默认只转换新的JavaScript语法。为了支持新的API，需要使用polyfill作为当前环境提供的垫片（也就是之前的版本没有，所以打个补丁）。例如：core-js和regenerator-runtime$npminstall--save-devcore-jsregenerator-runtimeimport'core-js';导入“再生器运行时/运行时”；let和constlet作用域方面，ES5只有全局作用域和函数作用域。使用let声明的变量只在它们所在的代码块内有效。如果（真）{让a=1;varb=2}console.log(a)//ReferenceError:aisnotdefinedconsole.log(b)//2看下面的例子，我们期望输出1，因为全局变量i只有一个，所以for执行完后，i=5，函数打印出来的值永远是5。varfuncs=[];for(vari=0;i<5;i++){funcs.push(function(){console.log(i);});}funcs[1]();//5fixes，将每次迭代的i变量存储在本地，并使用闭包来关闭作用域。var函数=[];for(vari=0;i<5;i++){(function(){varlocal=ifuncs.push(function(){console.log(local);});})()}funcs[1]();//1使用let声明变量i也可以达到同样的效果。constconst用于声明一个只读常量。必须初始化，一旦赋值就不能修改。用const声明的变量也有块作用域。如果（真）{常量PI=3.141515926;PI=66666//TypeError：赋值给常量变量。}console.log(PI)//ReferenceError：PI未定义constdeclarationobjectconstobj={};//给obj添加一个属性就可以成功obj.name='hello';//将obj指向另一个对象，会报错obj={};//TypeError:"obj"isread-onlyDeconstruction解构字面意思是分解结构，即会破坏原来的结构。对象解构的基本用法：let{name,age}={name:"hello",age:12};console.log(name,age)//Hello12设置默认值let{name='hi',age=12}={name:'hello'};console.log(name,age)//hello12rest参数（以...变量名的形式）可以从一个对象中选取任意数量的元素，也可以得到对象中剩余的元素。let{name,...remaining}={name:"hello",age:12,gender:'male'};console.log(name,remaining)//hello{age:12,gender:'male'}数组解构剩余参数（形式为...变量名）从数组中选择任意数量的元素，也可以得到剩余元素的数组。让[a,...剩余]=[1,2,3,4];console.log(a,remaining)//1在[2,3,4]数组的解构中忽略了一些成员。让[a,,...剩余]=[1,2,3,4];console.log(a,remaining)//1[3,4]函数参数解构数组参数functionadd([x,y]){returnx+y;}add([1,2]);//3个对象参数functionadd({x,y}={x:0,y:0}){returnx+y;}add({x:1,y:2});在不使用第三个变量的情况下交换变量的常见场景。让x=1;让y=2;[x,y]=[y,x];提取JSON数据。letjson={code:0,data:{name:'hi'}};let{code,data:user}=json;console.log(code,user);//0{name:'hi'}遍历Map结构。constmap=newMap();map.set('name','hello');map.set('age',12);for(let[key,value]ofmap){console.log(key+"is"+value);}ExtendedString扩展模板字符串，很有用。使用反引号(`)来标识。它可以作为一个普通的字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。`用户${user.name}正在登录...`);函数扩展ES6允许为函数参数设置默认值，即直接写在参数定义之后。一旦设置了参数的默认值，该参数将在函数声明和初始化时形成一个单独的作用域（上下文）。当初始化完成后，作用域就会消失。当未设置参数的默认值时，不会出现这种语法行为。functionadd(x,y=1){returnx+y}替换apply()。//ES5的写法Math.max.apply(null,[1,3,2])//ES6的写法Math.max(...[1,3,2])数组扩展合并数组//ES5的写法varlist=[1,2]list=list.concat([3])//ES6写法varlist=[1,2]list=[...list,3]arraynewAPIArray.from()，Array.of()、find()和findIndex()等，参考MDNhttps://developer.mozilla.org...对象扩展对象属性，方法简写。数据=[1,2]constresp={数据};//属性简写，相当于{data:data}constobj={add(x,y){//方法简写，相当于add:function(x,y){...}returnx+y;}};扩展属性。constpoint={x:1,y:2}constpointD={...point,z:3}console.log(pointD)//{x:1,y:2,z:3}//当有重复属性时，注意顺序问题。constpoint={x:1,y:2}constpointD={...point,x:4,z:3}console.log(pointD)//{x:4,y:2,z:3}constpoint={x:1,y:2}constpointD={x:4,z:3,...point}console.log(pointD)//{x:1,z:3,y:2}属性描述对象对象的每个属性都有一个描述对象（Descriptor），用来控制属性的行为。constpoint={x:1,y:2}Object.getOwnPropertyDescriptor(point,'x')/**{configurable:trueenumerable:true//表示可枚举值：1writable:true//表示可写}**/属性遍历for...in循环：只遍历对象自身和继承的可枚举属性。Object.keys()：返回对象本身所有可枚举属性的键名。JSON.stringify()：只序列化对象本身的可枚举属性。Object.assign()：忽略enumerable为false的属性，只复制对象本身的enumerable属性。constpoint={x:1,y:2}for(letkeyinpoint){console.log(key)}对象的一些新方法：Object.assign()Object.assign()方法实现了浅拷贝，不是a深拷贝。也就是说，如果源对象的某个属性的值是一个对象，那么目标对象的副本就会得到这个对象的引用。常见用法：cloneobjectfunctionclone(origin){returnObject.assign({},origin);}mergeobjectconstmerge=(target,...sources)=>Object.assign(target,...sources);指定默认值constDEFAULT_CONFIG={debug:true,};functionprocess(options){options=Object.assign({},DEFAULT_CONFIG,options);控制台日志（选项）；//...}https://developer.mozilla.org...operator扩展指数运算符2**10//10242**3**2//512等价于2**(3**2)让一个=10;**=3;//相当于a=a*a*a链式判断运算符obj?.prop判断对象属性是否存在，func?.(...args)函数或对象方法是否存在。constobj={name:'job',say(){console.log('hello')}}obj?.name//等于obj==null?undefined:obj.nameobj?.say()//等于obj==null吗？undefined:obj.say()空判断运算符在JavaScript中，我们使用||运算符指定默认值。使用？？当我们希望仅当左侧为null且未定义时才触发默认值。constobj={name:''}obj.name||'你好'//'你好'obj.name??'hello'//''for...of因为for...in循环主要是遍历Object，因为数组的键名是一个数字，所以遍历数组的时候返回一个数字。显然，这不能满足发展需要。使用for...of可以解决这个问题。constlist=['a','b','c']for(letvinlist){console.log(v)//0,1,2}for(letvoflist){console.log(v)//a,b,c}本文要点总结，欢迎留言交流。ES6简介。let和const变量。对象数组解构。一些新的扩展。
