ES6

ES6

说明

ECMAScript6

新的javascript标准

变量声明

var

let

1. let与var基本一致，用作变量声明
2. let在一对括号{}中形成局部作用域
3. let声明的变量不会变量提升
4. let不能重复声明变量(同一作用域)

const

1. 与let一致(局部，不提升，不能重复声明)
2. 声明必须赋值
3. 赋值不能修改
4. 建议大写

数组的解构

1. 数组结构：把数组解析为单个变量
2. 通过逗号跳过
3. ...接收剩余值（不定参）
4. 可以给默认值
5. 快速交换变量

对象简写

model模块

导出

导出默认

function format(date){}
export default format
export default function

导出

export function reverse(){}

导出变量

export const PRICE=500

先声明再导出

var name="mumu";
function say(){
    console.log("我的价格是"+PRICE)
}
export {name,say}

导入

<script type="module">

导入默认

import format form './相对路径'
//format可以和导出的时候不一致

导入

import{reverse} form './相对路径'
//reverse可以和源文件时候一致

导入别名

import {reverse as r} from './相对路径'

默认和普通方法是一个文件

import format,{reverse as r,PRICE,name,say}from './相对路径'

导入所有

import * as utils from '文件地址'
utils.reverse()

默认导出方法访问

utils.dafault()

字符串

遍历 for of

查找

includes 是否包含

startsWith 以xxx开头

endsWith 以xxx结尾

补齐

padStart(len,symbol)

padEnd(len,symbol)

去空白

trim 两侧

trimLeft 左侧

trimRight 右侧

数组高阶

sort 排序

ES6 新增

find 查找符合条件元素

findindex 查找符合条件元素的下标

forEach 遍历

forEach(function(item,index,self))

item 当前遍历的元素

index 当前的下标

self 被遍历的数组

filter 过滤

map 映射

reduce 累计

reduce(function(a,b))

a 上一次返回的结果

b 当前遍历的元素

some 有一个

every 每一个

同步和异步

同步是按顺序从上至下阻塞式执行代码（上一行代码不执行完毕，下行是不会执行）

异步是先执行主线程的代码，再执行其他线程（非阻塞式）

实现异步的方式

回调函数

事件响应

订阅发布模式

Promise

sync和await

新增数据类型

set

不重复的数组

add添加

delete删除

clear清空

size大小

has检测

[...new Set(arr)]

map

任意键的对象

set(key,value)设置

get(key)获取

delete删除

size大小

clear清空

weakSet

值都是引用类型的set

weakMap

键都是引用类型

symbol唯一符合

(对象的键)

迭代类型

可以for of 遍历的对象都是可迭代对象

String字符串

Array数组

Set集合

Map图

for(let v of myset)

for(let k of myArr.keys())

for(let v of myArr.values())

for(let [k,v] of myArr.entries())

类

type of class 结果是Function

类的本质是函数

class Block{
}

constructor(){}

构造函数

实例化的时候 new关键字调用的就是构造函数

super()

调用父类的构造函数

extends

继承父类的方法

static

类的静态属性和方法

类的this指向的是它的实例（也就是new出来的对象）

Promise承诺

var p=new Promise((resolve,reject)=>{
    //异步操作
    resolve(data)
    reject(err)
})

有三个状态，状态变化就不可逆

pendding

resolved

rejected

实例p

.then(res=>{})

回调函数获取resolved返回的结果

返回一个新的promise实例

.catch(err=>{})

获取rejected的原因

解决

1. 异步操作
2. 回调地狱（层级过深）

all全部

所有promise都resolve,all才执行resolve

race 赛跑

（返回最先resolve结果）拿到最后的resolve结果

async与await

async装饰的函数，返回的是一个promise对象返回的结果是resolved 的结果

await 用来等待异步的resolve结果 只能出现在async装饰的函数中

async function doit(){
   var m1 = await say("你真好看",2000)
   var m2 = await say("像春天花一样",3000)
  return m1+m2;
}

doit()
.then(res=>{})
.catch(err=>{})

generator生成器

就是在函数前面添加个 *

function *range(min,max){
   for(var i=min,i<max;i++){
      yield i;
   }
}

生成器执行的结果是 一个迭代器

var iter = range(1,10)

迭代器通过next方法返回一个对象，对象的value是 yield生成的结果 在生成器里面 遇到yield就停止等待下一次next调用

{value:1,done:false}
....
{value:undefined,done:true}

可以通过for 来遍历迭代器
for(v of range(1,100)){
    console.log(v)
}

String,Array,Set,Map的迭代器
arr[Symbol.iterator]()

Object.defineProperty

Object.defineProperty(obj,props,{
  set(v){ //设置},
 get(){//获取}，

})
可以定义对象的某个属性

proxy代理对象

target目标对象

handle 处理器

set(target,property,value){
   //拦截set
}

get(target,property){
  // 拦截set
  return target[property]
}

var proxy = new Proxy(target,handel)