ES6

历史

ECMAScrit 是96年 网景公司吧javascript提交给 欧洲计算器制作联合会

版本

• 97年1.0
• 98年2.0
• 99年3.0（之前学js版本）
• 2000年4.0 被和谐
• 09年 5.0（很多新特性没有学）
• 15年ES6正式确定

前端框架与语言

• js
• jquery
• angular
• react
• vue
• typescript 趋势

let与Const

let 局部变量声明

1. 只能在一对{}里面有用
2. 不能重复声明
3. 不会变量提升（在变量声明前访问会报错）

const 常量声明

1. 声明必须赋值
2. 赋值不能修改（简单数据类型）
3. 建议变量名 大小

解构

对象解构

• 基本

let {name,age} = {name:"abc",age:18}

let{name:foo}={name:"abc"}
foo 值就是 abc

• 剩余值

...rest

• 默认值

let {name,age,weight=120} = {name:"abc",age:18}

没有顺序,变量名必须要和对象的键名一致

数组解构

• 基础

let[a,b] = [12,18];
// a 12
// b 18

• 可以嵌套

let[a,b,[c,d,e]] = [1,2,[3,4,5]];
// c 3   
// d 4   
// e 5

• 可以忽略

let[a,,b] = [1,2,3];
// a 1
// b 3

• 剩余值

let [a,...rest] = [1,2,3,4,5];
// rest[2,3,4,5]

• 字符串

let [a,b,c,d] = "中国加油";
// a 中
// b 国

• 默认值

let [a,b=20] = [30];
// b 20
// 如果解析出来的值是undefined 那么就用默认值代替

字符串

空白

• trim()
• trimLeft()
• trimRight()
• 去掉空白，左边空白，右边空白

检测包含

• includes(s)
  字符串是否包含s

• startWith(s)
  是否以s开头

• endsWith(s)
  是否以s结尾

重复

• repeat(n)
  将字符串重复n次

填充

• padStart(len,s)
  以s字符串补齐len长度 从前面补齐

• padEnd(len,s)
  以s字符串补齐len长度 从后面补齐

模板

1.符号 ``
2.可以在字符串模板里面任意换行
3.单双引号 特殊符号不需要转义
4.添加变量 ${变量名}

var name = "abc";
var age = 19;
var str = `大家好，我的名字是${name}，今年我${age}岁了`;

数字

• Number.isNaN()
  检测是不是NaN

• Number.isInteger()
  是不是整数

• ＊＊运算符
  2＊＊3 == 2×2×2

• Number.parseInt
  转化为整数

• Number.parseFloat
  转化为浮点数

数组

迭代方法

• forEach()
  遍历数组

• map() 返回一个Array
  通过原来的数组映射出新的数据

• filter() 返回一个Array
  如果遍历时返回的值为true 则最终返回时保留该元素;
  如果遍历时返回的值为false 则最终返回时过滤该元素;

• reduce(function(a,b){}) 返回一个Any
  a参数是上一次遍历时的结果;
  b参数是当前遍历元素;

• some() 返回一个bool
  如果遍历的值有一个返回值为true

查找

• find()
  查找数组中符合条件的元素

• findIndex()
  查找数组中符合条件的元素的下标

• flat(n)
  扁平化数组 n是扁平的层级

• includes(el)
  查找数组是否包含el元素

• fill(value,start,end)
  填充数组 value 填充值，start 填充开始位置，end 填充结束位置（可选）

• copyWithin(rstart,start,end)
  从数组中拷贝内容替换
  restart 替换开始的位置
  start 拷贝的开始
  end 拷贝的结束

函数

箭头函数的特点

1. => 左边是函数的参数
2. => 右边是函数的执行语句 也是返回值
3. => 如果参数不是一个用()包裹参数
4. => 如果执行语句有多条用{}
5. => 如果执行语句多条,返回用return关键字
6. => 如果返回的是对象用()
7. => this指向当前的指向环境

默认参数

function add(a=1,b=1){
    alert(a+b)
}
add(4,5);
add();

不定参数

function add(...args){
    //args就是函数参数的数组列表
}

对象

1. 对象的简写(变量名和对象的键一致时候)
2. 对象属性的表达式[]
3. 对象的拷贝合并 Object.create()
4. 对象扩展:

• {...a,...b}
  复制与合并对象

map

特点

1. 有顺序
2. 键名可以是任意类型
3. size 长度

初始化

var map = new Map([[key,val],[key2,val2]]);

方法

• set(k,v) 设置
• get(k) 获取
• delete(k) 删除
• has(k) 检测是否有

属性

• size 长度

遍历

for(let [k,v] of map2){
    //k 键名
    //v 值
}

转数组

Array.from(map)

展开合并

[...map1,...map2]

set

不重复的数组

初始化 new set([])

方法

• add() 添加
• has() 检测
• delete() 删除
• clear() 清空

属性

• size长度

转数组

• [...set]

• Array.from(set)

for of ES6 新的遍历方法

• 可遍历的有 Set Map Array String

for(let [k,v] of map){}

可迭代方法

• keys() 键的集合
• values() 值的集合
• entries() 键与值

类

定义: 创造实例对象的一个模板

class 类名 {}

class Animal{}

constructor(){} 构造函数

constructor(name,color){}

new Animal("小乖乖","blue");

say(){} 一般方法

var d1 = new Animal();
d1.say()

static toName(){} 静态方法

Animal.toName()

静态属性

static price = 100;

Animal.price

继承

class 类名 extends 父类名 {}
super()

class Dog extends Animal{
    constructor(){
        super();
    }
}

getter setter

1. 成对出现
2. 不能够直接赋值 和 设置已经有的属性

constructor(age){
    this.age = age;
}

get Age(){
    return this.age()
}
// d1.Age 调用大写的Age属性是会执行 get Age()这个函数返回的小写的age的值

set Age(val){
    this.age = val;
}
// 当d1.Age=15抵用 set Age 这个方法最终设置的是小写的age的值

模块

1. 导出 export

1. 基本

export {name,age,fun,Animal}

2. 使用as

export {Animal as An}

3. default 默认

export default Animal;

• 声明的时候导出 export default class Ball{}

• 先声明 再导出
  class Ball{}
  export default Animal;

2. 导入 import

1. 基本

import {name,age,fun,Animal} from "./xxx.js";

import{An} from "./xxx.js";

import 也可以使用as
import {Animal as An} from "./xxx.js";
var a1 = new An();

 import Animal from "./xxx.js"

promise 承诺

定义: 返回一个延期的承诺,用then来接受结果

• resolve 解决(兑现)
• reject(拒绝)

作用

1. 按顺序执行异步调用
2. 避免回调函数 多层嵌套
3. race 有一个resolve 就调用 then
   4.all 等所有结果都resolve 才调用then 方法

基本写法

new Promise((resolve,reject)=>{
    resolve(结果)
    reject(原因)
})
.then(
res=>{//获取结果},
err=>{//捕捉错误})
.catch(err=>{捕捉错误})

race

Promise.race([多个异步调用])
.then(res=>{返回的是最快resolve结果})

all

Promise.all([多个异步调用])
.then(list=>{所有的resolve结果列表})

generator 生成器

定义

• 遇到yield会挂起 暂停

• 执行时候 next() 再次开始执行

• 通常去做异步请求

function * say(){
    yield "1";
    yield "2";
    yield "3";
}

var it = say();

it.next() //{value:"1",done:false}

it.next() //{value:"2",done:false}

it.next() //{value:"3",done:true}

it.next() //{value:undefined,done:true}

async 异步

await 等待

异步编程

function say(){return new Promise()}

async function doit(){
    await say();
    await say();
    await say();
}

say()
.then(res=>{return say()})
.then(res=>{return say()})

proxy 代理

定义:可以对目标对象的读取调用...进行拦截

1. 目标对象

let target = {name:"abc",age:18};

2. 处理

let handler = {
    get(target,key){},
    set(target,key,value,receiver){}
}

 let proxy = new Proxy(target,handler)

处理函数

• set
• get
• has()
• ownkeys
• apply
  ...

Reflect 反射

• 对对象进行一些操作,方便 代码处理

常用方法

Reflect.ownKeys(obj) 
// 获得对象键的列表
Reflect.set(obj,key,value) 
// 设置对象的值
Reflect.get(obj,key) 
// 获取对象的值
Reflect.has(obj,key) 
// 检测是否有某个值