ECMAScript新特新

1.兼容性

当低版本IE浏览器不支持ES6语法是需要引用browser.js

2.ES6新特性介绍

序号	ES6	ES7
1	块级作用域变量声明关键字let和const	Array.prototype.includes：新增了 includes 方法，用于判断数组中是否包含指定的元素。返回布尔值，表示是否包含。
2	箭头函数	指数操作符（Exponentiation Operator）：引入了双星号（**）作为指数操作符，用于计算一个数的幂。
3	默认参数值	await/async：ES7 引入了 async/await 关键字，用于更方便地编写基于 Promise 的异步代码。async 关键字用于声明一个异步函数，await 关键字用于暂停异步函数的执行，等待 Promise 对象的解析结果。
4	模板字符串	Object.entries/Object.values：新增了 Object.entries 和 Object.values 方法。Object.entries 返回一个给定对象自身可枚举属性的键值对数组，Object.values 返回一个给定对象自身可枚举属性的值数组。
5	解构赋值	其他语法改进：ES7 还引入了一些语法改进，如：函数参数支持尾部逗号（Trailing Commas），允许在函数参数和调用时的对象字面量最后一个属性后面添加逗号。
6	Rest/Spread操作符(…展开语法)
7	对象属性简写
8	类和继承
9	Promise异步编程
10	Symbol类型
11	迭代器与生成器
12	数组新API：forEach、map、filter、find、reduce等

3.变量

var：
1、同一变量可以重复声明
2、无法限制修改
3、没有块级作用域

let：
1、不能重复声明
2、变量-允许修改
3、块级作用域

const：
1、不能重复声明
2、常量-不允许修改
3、块级作用域

4.函数

箭头函数

//传统函数语法示例：
function 名字(){
}
//箭头函数语法示例：
()=>{
}

//传统写法
let show =function(a){return a+1;
}
//箭头函数写法
let show=(a)=>{return a+1;
}
//如果只有一个参数，()可以省,如果只有一个return，{}可以省
let show=a=>a+1;

//多个参数示例
let show =function(a,b){return a+b;
}
let show=(a,b)=>{return a+b;
}
let show=(a,b)=>a+b;

5.展开语法

5.1.函数参数

5.1.1.收集参数

//注意：扩展参数args必须是最后一个参数
function show(a, b, ...args){
alert(a);
alert(b);
alert(args);
}
show(12,15,20,11);

5.1.2.展开数组

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2];
alert(arr3);

5.2.默认参数

//如果c没传就3
function show(a, b=5,c=3){
console.info(a,b,c);
}
show(12,1);

6.解构赋值

1、左右两边结构必须一样
2、右边必须是个东西
3、生命和赋值不能分开，必须在一句话里完成

let [a,b,c] = [1,2,3];
console.info(1,2,3);let {a,b,c} = {a:1,b:2,c:3};
console.info(1,2,3);let [{a,b},[n1,n2,n3],num,str] =  [{a:12,b:5},[1,2,3],8,’test’];
console.log(a,b,n1,n2,n3,num,str);let [json,arr,num,str] =  [{a:12,b:5},[1,2,3],8,’test’];
console.log(json,arr,num,str);

7.数组

7.1.map：

映射–》一个对一个，进去5个出来也是5个
参数说明：
currentValue：当前元素的值。
index：当前元素的索引。
array：原始数组。

let arr = [11,92,32,80];//成绩清单，大于等于60为及格，否则不及格
let arr1 = arr.map(arg1=>arg1>=60?’及格’:’不及格’);
console.log(arr1);

7.2.reduce：

汇总–>一堆返回一个
参数说明：
accumulator：上一个值。
currentValue：当前元素的值。
index：当前元素的索引。
array：原始数组。

let arr = [11,92,32,80];//平均分
let sum = arr.reduce((arg1,arg2,arg3)=>{return arg1+arg2;
});
console.log(sum /arr .length);

7.3.filter：

过滤器
参数说明：
currentValue：当前元素的值。
index：当前元素的索引。
array：原始数组。

let arr = [11,92,32,80];//成绩清单，大于等于60为返回，其他的过滤
let arr1 = arr.filter(arg1=>arg1>=60);
console.log(arr1);

7.4.forEach：

循环（迭代）
参数说明：
currentValue：当前元素的值。
index：当前元素的索引。
array：原始数组。

8.字符串

1、多了两个新方法
startsWith
endsWith
2、字符串模板

//反单引号 `  键盘1左边按键
let arg1 = "【arg1】";
let arg2 = `字符串模板测试，${arg1}，字符串模板测试`;
console.log(arg2);

9.面向对象

1、class关键字、构造器和类分开了
2、class里面直接加方法
ES6对象写法

//es6之前定义对象
function Dict(label,code){this.label=label;this.code = code;
}
Dict.prototype.showLabel = function(){alert(this.label);
}
Dict.prototype.showCode = function(){alert(this.code);
}
let d1 = new Dict('汉族','01');
d1.showLabel();
d1.showCode();//es6定义对象
class User{//构造方法constructor(username,password) {this.username = username;this.password = password;}showUsername(){alert(this.username);}showPassword(){alert(this.password);}
}
let u1 = new User('admin','123456');
u1.showUsername();
u1.showPassword();//es6继承对象
class VipUser extends User{	constructor(username,password,sex){super(username,password);this.sex = sex;}showSex(){alert(this.sex);}
}
let u2 = new VipUser('admin','123456',23);
u2.showUsername();
u2.showPassword();
u2.showSex();

10.面向对象应用

React：
1.组件化-class
2.JSX：jsxbabelbrowser.js

11.JSON

1、JSON对象
JSON.stringify
JSON.parse
2、JSON简写
名字和对象一样时可以简写

let a=12;
let b=11;
//a和b简写
let json = {a,b,c:"1"};
console.info(json);

方法简写
1、名字跟值（key和value）一样可以简写
2、方法简写==》:function删除掉

//方法简写形式
let json = {a:"1",fun1:function(){console.log("fun1");},fun2(){console.log("fun2");}
};
json.fun1();
json.fun2();

12.Promise

Promise==》承诺
异步：操作之间没有关系，同时进行多个操作
优点：性能快
缺点：代码更复杂
同步：同时只能做一件事
优点：代码简单
缺点：性能慢

12.1.Promise.all

语法：

Promise.all(
[$.ajax(),$.ajax()]
).then(
results=>function{成功},
err=>{失败}
);

示例：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
let p = new Promise(function(resolve,reject){$.ajax({url:"new_file1.json",dataType:"json",success(data){resolve(data);},error(err){reject(err);}});
});
p.then(function(data){console.info("成功"+data);
},
function(data){console.info("失败");
});function createPromise(url){return new Promise(function(resolve,reject){$.ajax({url,dataType:"text",success(data){resolve(data);},error(err){reject(err);}});});
}
Promise.all([createPromise("new_file1.json"),createPromise("new_file2.json")
]).then(function(resArr){console.log("成功");console.log(resArr);let [res1,res2] = resArr;console.log(res1);console.log(res2);},function(resArr){console.error("失败");console.error(resArr);}
);//新版本jquery中ajax就是一个promise，简写方式
Promise.all([$.ajax({url:"new_file1.json",dataType:"text"}),$.ajax({url:"new_file2.json",dataType:"text"})
]).then(resArr=>{console.log("成功");let [res1,res2] = resArr;console.log(res1);console.log(res2);},resArr=>{console.error("失败");console.error(resArr);}
);

12.2.Promise.race

语法：

Promise.all(
[$.ajax(),$.ajax()]
);

13.generator

generator==>生成、生成器
普通函数==》一路到底
generator函数==》中间能停
语法：
1、*：generator方法声明标识
2、yield：放弃执行==》可以通过yield接收传进来的参数和返回结果
3、next：触发执行==》可以通过next传入参数和接收返回结果
4、执行next后会返回对象，done=true时表示执行结束

function * show(){console.log('show1');yield;console.log('show2');
}
let genObj = show();
genObj.next();
genObj.next();function * show(arg1,arg2){console.log('show1');let show1 = yield 'yield-show1';//show1:yield入参；yield-show1：出参console.log('show2');return 'return-show2'
}
let genObj = show();
let return1 = genObj.next(1,2);//
console.log(return1);
return1 = genObj.next(1,2);//next传入参数，return1返回参数
console.log(return1);