ES6

变量/赋值

• 变量：

  • var 可以重复定义/不能限制修改/函数级作用域/没有块级作用域

  • let 变量/不能重复定义/（块级）

  • const 常量/不能重复定义/限制修改（块级）

• 解构赋值：

  左右两边必须一样，右边得是合法的

  必须定义和赋值同步完成

  	let [a,b,c] = [1,2,3]
  	console.log(a,b,c) => 1,2,3
  

  	let [a,b,c] = [1,[4,5],3]
  	console.log(a,b,c) => 1,[4,5],3
  

  ---

函数

• 箭头函数:

  function (参数,参数) {} == (参数,参数) =>{};

  如果有且仅有一个参数可以省略(); 参数 => {};

  如果函数体仅有一句话,而且是return,{}可以省略;

• 默认参数:
  function (a,b) {a = a||5}
  (a=5,b) =>

• 参数展开:

  ** 剩余参数必须在参数最后 **

  • 三个点的第一个用途：接收剩余参数

  function show(a,...args) {
  	alert(a,args)
  }
  show(2,3,4,5,56) => 2,[3,4,56]
  

  • 第二用途：展开一个数组

  let arr = [1,2,3,4]
  ...arr => 1,2,3,4
  

---

数组/json

Array.from([array-like]) => 将类数组转为为数组

• map: 映射

  let arr = [1,2,3,4,5];
  let arr1  = arr.map(item=>item>3) // 数值大于3的为true
  arr1 => [false, false, false, true, true]
  

• reduce: 汇总

  	let arr = [1,2,3,4,5];
  	
  	let sum  = arr.reduce((tmp,item,index)=>tmp+item) // 求和
  	
  	// tmp:临时值,items:当前值,index:下标
  	// tmp第一次为第一个数值,然后tmp = tmp+item
  	// 平均值
  	let ave  = arr.reduce((tmp,item,index)=>{
  		if (index < arr.length-1){
  			return tmp+item
  		} else {
  			return (tmp+item)/arr.length
  		}
  	}) 
  	sum => 15
  	ave => 3
  

• filter: 过滤

  	let arr = [1,2,3,4,5];
  	let arr1 = arr.filter(item=>item>3);
  	arr1 = > [4,5]
  

• forEach: 遍历

  	let arr = [1,2,3,4,5];
  	let sum = 0
  	
  	// 没有返回值，只是过一遍数据
  	arr.forEach(item=>sum+=item);
  	sum => 15
  

• json

  1. 简写：名字和值一样的，可以省略
  2. function 可以不写

  	let a = 1,
  		b = 2;
  	let json1 = {a:a,b:b};
  	json1 => {a: 1, b: 2}
  	
  	// 简写
  	let json2 = {a,b}
  	json2 => {a: 1, b: 2}
  

---

字符串模板

反斜杠``：植入变量、任意折行 ---- 例子：这是变量${xxx}

startsWith : 以什么开头 startsWith('xxx',n) n开始位置

endsWith ：以什么结尾 endsWith('xxx',n) 前n个字符

includes: 返回布尔值，是否找到参数字符串

repeat: 重复n次

padStart: 补全，省略第二个值默认为空格， padStart(n,'xxx') n表示字符长度

padEnd: 补全 padEnd(n,'xxx') n表示字符长度

matchAll(): 返回正则表达式的所有匹配 (类数组) Array.from(xxx.matchAll(regex)) [...'xxx'.matchAll(regex)]

---

面向对象

优点：底层支持、标准

class Person{
	constructor (name,age) {
		this.name = name;
		this.age = age;
	}
	showName () {
		alert(this.name)
	}
	showAge () {
		alert(this.age)
	}
}
let person = new Person('张山'，16);
person.showName() => 张山
person.showAge() => 16

继承

```javascript
class Person{
	constructor (name,age) {
		this.name = name;
		this.age = age;
	}
	showName () {
		alert(this.name)
	}
	showAge () {
		alert(this.age)
	}
}
class Worker extends Person{
	constructor(name,age,obj){
		super(name,age);
		this.obj = obj;
	}
	showWork(dd=this.obj){
		alert(dd)
	}
}
let work = new Worker('张山',19,'asdf');
work.showName(); => 张山
work.showAge(); => 16
work.showWork('dasdf') => dasdf
work.showWork()  => asdf
```

---

this指向通过bind()绑定

普通函数： 根据调用者确定this指向 （老变）

箭头函数： 根据所在环境确定this指向 （恒定）

---

Promise:

优点：解决异步操作

缺点：对逻辑操作麻烦

• 用法：需要在服务器环境下测试

  <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
  	// 第一种
  	let p = new Promise((resolve, reject)=>{
  		$.ajax({
  			url:'1.txt',
  			dataType:'json',
  			success(json){
  			
  				resolve(json)
  			},
  			error(err){
  				reject(err)
  			}
  			
  		})
  	})
  	p.then(json=>{
  		console.log(json)
  	}, err=>{
  		console.log(err)
  	})
  	
  	// 第二种使用
  	// Promise.all([p,p1,p2,p3]).then(arr=>{}); 与操作
  	Promise.all([
  		$.ajax({url:'1.txt',dataType:'json'}),
  		$.ajax({url:'2.txt',dataType:'json'}),
  		$.ajax({url:'3.txt',dataType:'json'}),
  	]).then((arr)=>{
  		let [a,b,c] = arr;
  		console.log(arr)
  	})
  	
  	// 第三种使用
  	// Promise.race([p,p1,p2,p3]).then(arr=>{}); 或操作（不常用）
  </script>
  

  注意： 测试中的1.txt等文本中的json {"name":66,"obj":"te"}使用双引号

---

generator函数

• *号

• yield -- 暂停

• obj.next() -- 向下执行

  function *show(){
  	console.log('aaa');
  	yield;
  	console.log('bbb');
  }
  // show()是一个generator对象
  let gen = show();
  
  gen.next(); => aaa
  gen.next(); => bbb
  

• yield:

  • 参数：

  function *show(){
  	let a = yield; // a获取的参数为第二次next()传递的值
  	console.log(a);
  }
  // show()是一个generator对象
  let gen = show();
  gen.next(2); 
  gen.next(3); 
  

  • 返回：

  function *show(){
  	console.log('aaa');
  	yield 55;
  	console.log('bbb');
  }
  // show()是一个generator对象
  let gen = show();
  
  let a = gen.next(); // {value: 55, done: false}
  let b = gen.next(); // {value: 89, done: true}
  

generator+promise的配合：

1. 外来的runner辅助执行 ---- 不统一、不标准、性能低

2. generator函数不能写入(=>) 箭头函数

---

async/await

async function show(){
	try{
		let data1 = await $.ajax({url:'1.txt',dataType:'json'});
		let data2 = await $.ajax({url:'2.txt',dataType:'json'});
		let data3 = await $.ajax({url:'3.txt',dataType:'json'});
		console.log(data1,data2,data3)
	}catch(e){
		console.log(e);
		alert('Erro in show')
	}
}
show(); // {a: 2, b: 4} {name: 3, age: 12} {name: 66, obj: "te"}

• async函数可以使用箭头函数
• await 后跟异步操作promise、generator、另一个async函数
• 错误处理：使用try{}catch(e){}进行处理