Es6语法

Es6

let,const

let
用于变量声明类似var
1.let声明的变量只在let 声明的代码块内有效
2.不存在变量提升
3.不允许在相同作用域中，重复声明同一个变量
const
声明常量
1.一旦声明就不能改变
2.声明立即初始化
3.不能变量提升
4.不可重复声明
实际上保证的并不是变量的值不得改动，而是变量指向的那个内存地址不得改动
简单类型数据，值保存在固定内存地址，所以等同于常量
对于复合类型数据（对象和数组）变量指向地址，地址保存的是指针，只能保证指针不变，指针指向的结构不能保证，相当于可以给对象添加属性等

解构赋值

可解构数组和对象
1.两边一一对应赋值，如果左边多了，赋值为undefined

let [a,b] = [1,2]

2.左边为数组，右边为其它，报错，右边为字符串，取第一个

let [a] = '12312'
console.log(a)//1

3.默认值

let [a=1] = [undefined]
console.log(a) //1

4.解构对象：

let {a,b} = {a:'123',b:'123'}
console.log(a)//123
let {a,b} = {a:'123',c:'112323'}
cosole.log(c)//undefined

**这样的解构赋值在调用后端接口接受数据时使用比较多**
let {a:b} = {a:'ss'}
console.log(b)//ss 
async (valid)=>{
  const {data:res} = await this.$http.post('login',this.loginForm);
}

模板字符串

可以在字符串中嵌入变量，可以定义多行字符串（如html格式）
一般通过``反引号(tab键上面的~键)

const str = `<h1>${value}</h1>`

箭头函数

通过箭头定义函数

let f = v => v
等同于
let f = function (v){
	return v 
}

多于一行代码
let f = function (v,b){
	let sum = v + b
	return sum 
}

返回对象用（）包围
let res = id => ({ id:id , name:'Temp'})

简化回调函数
[1,2,3].map(function (x){
	return x*x
})
等同于
[1,2,3].map(x => x*x)

重点：函数this指向问题

1.对象中普通函数：指向调用这些方法的对象

let name ='window'
var A = {
	name:'A'
	sayHello:function(){
		console.log(this.name)
	}
}
A.sayHello()//A

var B = {
	name = 'B'
}

A.sayHello.call(B)//B
A.sayHello.call()//指向window对象  输出window

2.箭头函数：

箭头函数不绑定this， 它会捕获其所在（即定义的位置）上下文的this值， 作为自己的this值
注意：call() / apply() / bind() 方法对于箭头函数来说只是传入参数，对它的 this 毫无影响
我的理解：在定义函数时，函数的父级this，下面例子中：sayhello函数的this，指向当前对象的父级，当前的为A对象，A的父级window ，所以指向window

let name = 'window'
var A = {
	name:'A'
	sayHello:() => {
	console.log(this.name)
	}
}
A.sayHello()//window

3.构造函数下，this与被创建的新对象绑定

function C(){
  this.a = 37;
}
var o = new C();
console.log(o.a); // logs 37

4.DOM事件，this指向触发事件的元素

5.内联事件分两种情况，bind绑定， call & apply 方法

1.call & apply

	函数内部的this值可绑定到 call() & apply() 方法指定的第一个对象上

function add(c, d){
  return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

2.bind

通过bind方法绑定后， 函数将被永远绑定在其第一个参数对象上

function f(){
  return this.a;
}

var g = f.bind({a:"azerty"});
console.log(g()); // azerty

var o = {a:37, f:f, g:g};
console.log(o.f(), o.g()); // 37, azerty

bind 与 call/apply 区别
调用bind后返回函数，call和apply都是对函数的直接调用

对象扩展

Proxy和Reflect

目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截,译为代理
vue3.0使用到这个特性

let obj = new Proxy(obj,{
	get: function(target , key , receiver) {
		console.log(`getting${key}`)
		return Reflect.get(target , key , receiver)
	},
	set: function(target , key , receiver) {
		console.log(`setting${key}`)
		return Reflect.set(target , key , receiver)
	},
})
obj.conut = 1//seting.count
let a = obj.count //getting.cont

new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是对象，用来定制拦截行为
每一个Proxy对象的拦截操作（get、delete、has），内部都调用对应的Reflect方法，保证原生行为能够正常执行

Promise

解决回调地狱
1.立即执行性
创建（new）一个Promise时，作为参数传入的函数会立即执行

let p = new Promise(function(resolve , reject){
	console.log('creat')
	resolve('ok')
})
console.log('after new')

p.then(function(value){
	console.log(value)
})
//creat
//after new
//ok
//resolve作为微任务，比宏任务（异步请求）先执行

2.三种状态
pending：刚创建
resolved：执行resolve
rejected：执行reject
3.链式调用

p.then(function(value){
	console.log(value)
	return value*2
}).then(function(value){
	console.log(value)
})
//1
//2

Class

1.class的方法不可枚举
2.调用要使用new
3.不存在提升
4.静态方法 static定义 只能通过类名调用
5.继承 extends 子类必须在constructor方法中调用super方法
跟java很像

class Point{
	constructor(x,y){
		this.x = x
		this.y = y
	}
	toString(){
		return this.x+this.y
	}
}

class ColorPoint extends Point{
	constructor(x,y,color){
		super(x,y)
		this.color = color
	}
}

Module

export let firstName = 'aa'
export let firstName = 'bb'
等于
let firstName = 'aa'
let firstName = 'bb'
export {firstName ,firstName }

import {firstName ,firstName } from '....'