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);