本文谈谈关于ES6的新特性，主要从1.变量、2.函数、3.数组、4.字符串、5.面向对象、6.Promise、7.generator、8.JSON等几个方面叙述。
1、变量
var 可以重复声明，无法限制修改，函数级作用域
let 不能重复声明，变量-可以修改，块级作用域
const 不能重复声明，常量-不能修改，块级作用域
2、函数
//原始函数
function(){
//
}
//箭头函数
()=>{
//
}
1.参数唯一可省略()
2.return唯一可省略{}
//函数的参数
1.参数的扩展、数组展开
1.1收集参数
function show(a,b,...args){}
*Rest Parameter必须为最后一个形参
1.2展开数组
...arr => a,b,c
*展开后的效果跟直接展示数组的内容一致
2.默认参数
为定义好的可选参数赋值即为默认参数
传值覆盖，空值默认
3.解构赋值
1.左右两边结构必须一致
2.右边必须是合法的值
3.声明和赋值不可分离（在一个语句内完成）
let [a,b,c]=[1,2,3];
let {a,b,c}={a:1,b:2,c:3};
let [json,arr,num,str]=[{a:1,b:2},[1,2],1,‘xcbdh‘];
3、数组
1.map 映射-一对一
arr.map(item=>item>=60?‘及格‘:‘不及格‘);
2.reduce 汇总-多对一
arr.reduce(function(tmp,item,index){
return tmp+item
});
3.filter 过滤器-筛选
arr.filter(item=>{
if(item%3==0){
return true
}else{
return false
}
});
//进阶一下
arr.filter(item=>item%3==0);
4.forEach 迭代-循环遍历
arr.forEach((item,index)=>{
//
})
4、字符串
1.新方法
startsWith 匹配字符串开头
endsWith 匹配字符串结尾
2.字符串模板
``
*使用${}放变量
5、面向对象
1.class关键字、构造器和类分离
2.class内部添加方法
class User{
constructor(name,pwd){
this.name=name;
this.pwd=pwd;
}
showName(){
alert(this.name);
}
showPwd(){
alert(this.pwd);
}
}
//继承：
class VipUser extends User{
constructor(name,pwd,level){
super(name,pwd);
this.level=level;
}
showLevel(){
alert(this.level);
}
}
//面向对象应用-React
class Item extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <li>{this.props.str}</li>
}
}
class List extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <ul>
{this.props.arr.map(a=><Item str={a}></Item>)}
</ul>;
}
}
window.onload=function(){
let oDiv=document.getElementById(‘div1‘);
ReactDOM.render(
<List arr={[‘aaa‘,‘bbb‘,‘ccc‘]}></List>,
oDiv
)
}
6、Promise
异步：操作之间无关，可同时进行多个操作
同步：同时只能做一个操作
异步：代码更复杂
同步：代码简单
*Promise用同步的方式书写异步方法
Promise.all([$.ajax(),$.ajax()]).then(results=>{
//正确
},err=>{
//错误
});
*Promise.race()
7、generator
function *show(){
yield
}
//举个例子
const koa=require(‘koa‘);
const mysql=require(‘koa-mysql‘);
let db=mysql.createPool({host:‘localhost‘,user:‘root‘,password:‘123456‘,database:‘20201004‘})
let server=new koa();
server.use(function *(){
let data=yield db.query(`SELECT * FORM user_table`);
this.body=data;
});
server.listen(2048);
8、JSON
1.JSON对象
JSON.stringify
JSON.parse
2.简写
key和value相同时可只写key
方法： show:function(){...}
改写成show(){...}
3.JSON的标准写法
*只可使用双引号
*所有的key需要添加引号
9、ES预览
1.数组
includes
检查数组是否包含某个元素
arr.keys()
arr.values()
arr.entries()
for...in 循环key
for...of 循环value（不可用于json）
keys 取出key
values 取出value
entries 取出key-value（*entry实体）
2.幂
a**b（a的b次方）
3.字符串
新方法：
padStart
padEnd
例子：str.padStart(10,‘0‘)//字符串取10位，开头补0
4.语法容忍度提高
元素、参数后多余逗号不报错
5.generator yield
generator yield 转变成：async await
async function show(){
alert(‘a‘);
await;
alert(‘b‘);
}
不再依赖外部runner
可以使用箭头函数