谈谈ES6

let

1.重复声明
ES6变量和常量定义之后，通过let声明可以防止重复再定义
2.控制常量
const通常用来定义常量
3.块级作用域{}
es5用的是函数作用域

…

解构赋值（规则：解构一致，一气呵成，右边标准对象）
它是对赋值运算符的扩展，针对数组或者对象进行模式匹配，然后对其中的变量进行赋值，优势在接口获取json数据处直接获取

剩余参数
参数以…为前缀，允许将一个不定数量的参数表示为一个数组，他不仅可以收集，还能解构数据

let arr = [1,2,3]
function tip2(x,y,z){
	console.log(x+y+z)
}
tip2(...arr) //6

function tip3(...[x,y,z]){
	console.log(x+y+z)
}
tip3(3,4)//NaN（3+4+undefined）

=>

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this,argument,super
=>修正this
这个时候箭头函数this不再是自己，而是父作用域的this,不是调用时的this

数组扩展方法

map（映射）

map方法的功能本质是映射，当数组调用map时，即将原有数组内容变成新的数组内容

let arr = [20,40,50,60,70,80]
let arr2 = arr.map(function(val,idx,arr){
	return val>=60? "及格":"不及格"
})
//arr2:["不及格","不及格","不及格","及格","及格","及格"]
1.val表示元素值
2.idx表示元素索引
3.arr表示遍历数组
4.函数必须有return语句，因为要映射成return的东西,没有return将默认返回undefined

reduce（累加）

接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值

let arr = [5,15,20,21,25]
let arr2 = arr.reduce(function(pre,val,idx,arr){
0.pre表示上次累加值
1.val表示元素值
2.idx表示元素索引
3.arr表示遍历数组
	console.log(pre,val,idx)	
},10)//这个值是赋值pre即数组第0位
//10 5 0

通常可以用来求最大数和平均数

filter（过滤）

用于数组中元素的过滤，如果返回值为true，则作为新数组成员，否则，被过滤

let arr = [20,40,50,60,70,80]
let arr2 = arr.filter(function(val,idx,arr){
	return val%2==0
})
常用于：选奇偶数
1.val表示元素值
2.idx表示元素索引
3.arr表示遍历数组
4.函数必须有return语句

foreach(遍历)

该方法用于数组中各个元素的遍历，可以对遍历时的元素进行各项操作但不会返回一个新的数组（区别于map）

let arr = [20,40,50,60,70,80]
let arr2 = arr.foreach(function(val,idx,arr){
	
})
1.val表示元素值
2.idx表示元素索引
3.arr表示遍历数组

from(转正)

常用于把类数组变成真正的数组

let btns = document.getElementsByTagName("button")
let _btns = Array.from(btns)
_btn.foreach((val,idx)=>{
	console.log(val,idx)
})

字符串对象扩展方法

查询子类字符串方法
下面的方法可以在字符串的中间，开始，结束位置找到字符串，返回一个布尔值，真为找到，假为找不到

string.includes(cStr,pos)

可以用来查包含什么

string.startsWith(cStr,pos)

可以用来查以什么开头

string.endsWith(cStr,pos)

可以用来查询文件扩展名
cStr表示要查找的子字符串
pos表示针对前第几个字符

（重复）

允许字符串重复显示指定的次数
string.repeat(count)count >0并取整（可以是数字或者数字的字符串）

（补全）

给一个字符串补全（分为左补全和右补全）
string.padStart(lMax,aStr)
string.padEnd(lMax,aStr)
lMax表示字符串最大的字符长度
aStr表示需要补充的字符串内容，默认为空格，常用于时间或数字补全如1=>01

字符串模板

加强版字符串用反引号进行包裹，换行和绑定变量（不需要加号），甚至还可以调用函数，执行表达式（相当于控制台执行）

let name = "Mike"
function say(words){
	return words
}
let str = `<ul>
			<li>${name}你好,跟我读${say("中国好")}</li>
			</ul>`
let div = document.createElement("div")
div.innerHTML = str
document.body.appendChild(div)

类型扩展

1.Symbol(谐音：森煲)

新原始类型，表示唯一的值，没有结构函数，不能使用new关键字定义，用于确保对象中属性名的唯一性

let a = Symbol('a1')

let name = 'a'
{
	var person = {}
	person[name]='a1'
	console.log(person[name])
}
{
	let name = 'a'
	person[name]='b1'
	console.log(person[name])
}
console.log(person[name])
//a1 b1 b1

let name = Symbol()
{
	var person = {}
	person[name]='a1'
	console.log(person[name])
}
{
	let name = Symbol()
	person[name]='b1'
	console.log(person[name])
}
console.log(person[name])
//a1 b1 a1

2.set集合类型（es6新增对象类型）

该类型的对象是一个集合，允许存储任何类型的值，但要求保存的值必须是唯一的，可以增加、删除和检测集合中是否包含指定属性名。

let arr2 = [1,2,3]
let arr1 = [2,4,6]
let b = new Set(...arr1,...arr2)//{1,2,3,4,6}
let a = new Set([1,2,3])//{1,2,3}
a.add([4,5])//{1,2,3,[4,5]}
a.add("abc")
console.log(a.size)//4
a.delete(3)//按值删除
a.has(6)//查找
let c = new Set(...[1,2,3].filter(x=>b.has(x)))

如果放个对象进去，该对象的key必须唯一，否则就会发生重新赋值该key
处理数组有优势,譬如自动去重，找交集

3.map

用于定义一个有序列表，表现出一个集合，拥有增删查的功能，特点：集合的键名和值支持任意类型的数据

let m = new Map()
m.get("a")
let n = {}
m.set("a",1).set(n,2)
let f = m.has("a")
console.log(m.size)
m.delete("c")

4.iterator迭代器

为各种不同类型的数据访问提供了一种统一的接口，只要部署了他，各种数据类型就可以直接遍历各个成员
作用：
1.统一了各种数据类型遍历的接口
2.使用遍历的数据可以按指定的顺序排列
3.为for…of语句提供底层遍历支持
数组，类数组，Set，Map自动具有迭代器

    // ES6使用的迭代器 需要通过Symbol.iterator来访问
    var numbers = [1,2,3,4,5];
    let iterator = numbers[Symbol.iterator]();
    console.log(iterator.next().value);
    console.log(iterator.next().value);

arr.forEach(function(item){
	if(item==4){
		break;//无法实现
	}else{
		console.log(item)
	}
})

使用for in 也可以遍历数组实现上述break;，但是会存在以下问题：

1.index索引为字符串型数字，不能直接进行几何运算
2.遍历顺序有可能不是按照实际数组的内部顺序
3.使用for in会遍历数组所有的可枚举属性，包括原型。例如上栗的原型方法method和name属性 所以for in更适合遍历对象，不要使用for in遍历数组（效率太低）。
4.遍历不了set，map

这个时候就要使用iterator为基础的for of

for(let item of arr){
	if(item==4){
		break;//无法实现
	}else{
		console.log(item)
	}
}
let s = new Set(arr)
for(let i of s){
	console.log(i)
}

遍历对象

let obj={
	length: 2,
	0:1,
	1:2
	}
for (let item of Array.from(obj)){
	console.log(item)
}

处理异步嵌套

generator函数

为解决异步编程时的嵌套提供方案(Ajax中嵌套Ajax)，函数返回一个生成器，根据yield语句生成每次挂起时的迭代器

function * tip(){
	yield "1";
	yield "2"
	yield "3"
}
let gen = tip()
console.log(gen.next())
for (let i of gen){
	console.log(i)
}
let [a,...b] = gen//1,[2,3]
console.log(...gen)

譬如需求：
1.先获取ID
2.然后根据id获取职业
3.然后根据id和职业推送广告

function * () {
	yield "id";
	yield "返回第一次的值"
	yield "返回第二次的值"
}

Promise

let p = new Promise(
	function (resolve, reject) {
	
	})
let p1 = Promise.resolve("110")

let a = 5
let p1 = new Promise(function(resolve,reject){
	if(a>3)
	resolve(a)	
	else
	reject("error")
})
p1.then(function(s){
	console.log(s)
},function(e){
	console.log(e)
})

let p2 = Promise.resolve("id")
p2.then(function(d){
	console.log("id",d)
	let user = "用户信息"
	return d+"=>"+userinfo
}).then(function(d2){
	console.log("userinfo",d2)
	let love = "用户喜好"
	return d2+"=>"+userlove
}).then(function(d3){
	console.log("userlove",d3)
	let ad = "广告数据"
	return d3+"=>"+ad
}).then(function(d4){
	console.log("ad",d4)
})

async和await

async使用函数返回一个Promise对象
await可以等待执行完成使异步请求变成同步效果

async function tip(){
	await p()
}
tip().then(v=>{
	console.log(v)
})

面向对象编程

类的定义与组成

//声明
class Person{
	name = "zhangsan"
	static sex = "男"
	say(){
		console.log(p1.name,p1.age)
	}
	static play(a,b){
			console.log(a+b,this.sex)
	}
	constructor(name,age){
		this.name = name
		this.age = age
		console.log(this.name,this.age)
	}
}
Person.prototype.age = 18
let p1 = new Person()
let p2 = new Person('lisi',22)
p1.say()
//定义
let Person = class Person{
}
let Person = class{
}
Person.play(5,8)
console.log(p1.name,p1.age,Person.sex)

类的继承

class Hero extends Person{
	feature = "勇敢"
	constructor(name,age,act){
		super(name,age,act)//一定要super()
		this.act = act
	}
	play(){
		console.log(this.act)
	}
	play2(){
		super.play()
	}
}
let h1 = new Hero('daiwi', '男')

模块化

通过import和export

<script type="module">
import {n,add,Person} from "../common.js"
import age as a from "../common.js"
<script>

export let name = "小明"

let name = "小明"
let age = 100
function add(a.b){
	return a+b
}
class Person{

}
export {
	name as n,
	add
}
export {
	age
}
export default{//只能有一个
	age,
	name
}

import ("../common.js").then(d=>{
	console.log(d.name)
})