ES6

创建数组：

Array.prototype.from(伪数组，函数)//伪数组转换成真数组

Array(length)

设置初始值：

Array.of(value)

Array.fill(value,start,end)//数组的填充start-end-1都用value填充，可以用于数组值的更改

数组值限制

Array.filter(function)//满足条件的所有值并返回，数组形式。return true时将该数加入新数组，false就过滤掉

Array.map(function)//对数组中的值进行普遍操作，比如全部乘2，就return n*2

查找值

Array.find(function)//满足条件的第一个值就返回，数值形式

Array.findIndex(function)//下标

数组删减增加

Array.splice(index,length,[value])//1.开始下标 2.要删除多少长度 3.替换成后面的值，删除为空 可以改变原数组

数组求和

Array.reduce(function,initValue)//对数组进行合并缩减，最终缩减为一个值

数组合并

Array.concat(secondArray)

字符串翻转

string.split("").reverse().join("")

class类

原型链

ES5中

类的静态方法（只加到原型上，即Animal.eat=function）

实例对象的方法（要Animal.prototype.eat=function）要加到object的原型对象上，所有的实例才继承

ES6中

加static就是类的静态方法

不加static就是实例对象的方法

类的继承：

ES5不管了过于复杂，直接上ES6

Dog继承于Animal

class Dog extends Animal {}

子类中如果没有新构造，例如上图中的this.age=2，那么子类中不需要写constructor(已默认继承)

函数

arguments为传入的参数伪数组

函数形参可以设置默认值：f(x,y=1,z)

如果要用函数默认值，则调用console.log(f(1,undefined,2))//undefined即可，而不能0或空字符串

function sum (…nums)//调用时可以是 sum(1,2,3)

data=[1,2,3] function sum(x,y,z)//调用时 sum(…data)

即数组遍历，一边参数散开，一边是数组形式的收

箭头函数

()=>{}
箭头函数无this，箭头函数内部的this指针为外层

Set

声明时内为可遍历对象, let s=new Set([1,2,3])

s.add()//添加元素

s.has()//是否有某数据

s.size()

s.forEach(item => {console.log(item)})

Map

let map=new Map([[1,2],[3,4],[“zjc”,“shuaibi”]])//创建map对象同时初始化值

map.set(1,2)//新增

map.delete(1)//删除的是键为1的键值对

map.has()//找的是键值

map.get()//找的是某个键对应的值

map.forEach((value,key)=>{console.log(value,key)})中，是先值再键

对象拷贝

Object.assign(new,old)//直接覆盖，即深拷贝，直接将新的引用到旧的数据上

object和Map存储的都是键值对组合。但是：

object的键的类型是 字符串；

map的键的类型是 可以是任意类型；

另外注意，object获取键使用Object.keys（返回数组）；

Map获取键值使用 map变量.keys() (返回迭代器)。

正则表达式

const s=‘aaa_aa_a’

const r1=/a+/g

const r2=/a+/y

r1.exec(s)//对于对象r1调用该方法，目的是在s中找r1出现的首个下标

/g 全局匹配，从第一位开始

/y 从上一次匹配的位置开始

即第一次执行r2.exec(s)返回0，第二次执行r2.exec(s)返回4

字符串拼接 ``的妙用

es5中用+拼接

es6中用 ``表示字符串，里面的${}内部表示字面量

${‘retail’}为传入参数

函数中的s1=string[0]代表传入参数位置的前面的字符串，type为传入的参数，

检查完type==='retail’后，返回传入参数处前面的字符串和函数内部计算后的字符串，即如下

字符串换行：

解构赋值

let arr=[1,2,3]

let [zjc,aaa]=arr//以一对应赋值

对于对象(键值对)，可以用Object.entries(object)来遍历所有键值对

因此可以用for-of来迭代 for(let [k,v] of Object.entries(user)) {console.log(k,v)}

如何达到异步机制

Promise对象，then，resolve,reject(这俩为了快速创建promise对象)，catch，all，race

js是单线程，同步的

先执行完某个作用域中的所有语句，再执行这些语句中引发的另外的事情，下例中先1再2后3

Callback 回调函数

Promise

返回一个状态(改变同步) 处于pending挂起状态

当第一个文件正确执行后运行onload事件，即执行resolve函数

当第一个文件执行失败运行onerror事件，即执行reject函数

来改变挂起状态

then

传入两个参数，且返回的是Promise实例 (.then是promise原型的对象和方法)

promise.then(onFulfilled,onRejected)//onFullfilled对应上图resolve 必选参数；第二个为可选

如果onFulfilled为非函数，则.then返回空的Promise对象

下例中，第一个return的意思是箭头函数要有一个返回值，将return后面的loadScript得到的promise对象返回给第一个.then，让他能继续作为一个promise继续执行下一个.then

用Promise对象提供的两个静态方法resolve && reject 实现异步操作

resolve和reject可以快速生成promise实例，而不用new Promise

Catch 捕获错误

Promise对象的方法，代替reject

上面的分一个一个接着执行的，为串行

All 对于并行的异步操作

Race 竞争，异步中的先到先得

Promise.race(p1(),p2())

Rflect反射机制，未来可能代替object

Reflect不用new，直接用

apply

在非反射中(es5中无反射)，应用apply就得先指定方法再通过apply改变作用域

反射中可以先apply，再根据执行中的条件去指定要调用哪个方法

用法：Reflect.apply(function,作用域,以数组形式传入的参数)

Reflect.apply(Math.floor,null,[4.72])//apply中的null指的是作用域，没指定作用域就默认全局

construct

用于实例化一个类，跟new关键字用法一样

let d=Reflect.construct(Date,[])跟 let d=new Date()一样

construct方法中，第一个参数为什么类，第二个参数为初始化填入的东西，都必填，可以是空数组

修改某对象的原型对象

Reflect.setPrototypeof(old,new)//例如将一个数组改为字符串

例如：Reflect.setPrototypeof(arr,String.prototype)

新增一个寻找某个对象其原型对象的方法

Reflect.getPrototypeof()

验证某个对象上是否有某个属性或方法

Reflect.has(object,属性或方法)

返回某对象的所有键或某数组所有数据的索引值

Reflect.ownKeys(object)

Proxy 代理

let d=new Proxy(object,function)//object要代理谁，哪个对象；第二个参数为代理后干什么事，读写

有点像中介

代理对象禁止赋值(通过set返回false)

用处：某对象想只能自己修改而用户不能修改，那么将代理对象设置成只读后给用户即可

对代理的写进行限制且 对象结构不被破坏(has限制)

监控错误

最顶端加，且要捕获而不是冒泡

对于错误的处理，可以return false，也可以throw new TypeError(’’)

对新类添加代理，让某个属性只读

撤销代理

对代理对象进行Proxy.revocable声明，将代理数据和撤销代理方法存到对象d中

接着可以通过d.proxy.price读取数据

d.revoke() 撤销代理

Generator

控制遍历的停止

要点：

控制的函数声明时加星号 function * name(){}

当运行函数时遇到 yield 就会停止，调用.next()让函数继续运行，传递yield后面的结果回去

通过l.next()控制函数执行

加星号函数返回给l两个结果，一个是value，遍历的值，另一个是done，是否结束

yield后面加星号，代表后面为可遍历对象

.next(xxx)//next方法可以传参，将参数传给函数体内部yield的返回值，上图中是给val，value空时才能传

.return()//return方法可以控制函数的提前结束

函数外部抛出异常到函数，如何在函数内部捕获该异常？

内部try{}catch{}，外部.throw(new Error(’’))

可迭代对象

如何将拥有复杂的数据结构的不可迭代对象变为可迭代对象呢？即该对象能用for-of进行遍历

给对象挂载一个Symbol.iterator方法，该方法输入为this，输出为一个对象

该方法的返回值写法为return{next(){return{done:true,value:1}}}

返回值要有next方法，该next方法有两个字段，返回值为done和value，

done代表遍历结束没，默认为false没结束，value为遍历开始的值

以上方法为通过控制done是否结束来输出value

以下为通过yield来按节奏来输出

可迭代协议：（for of循环）
允许对象定义他的可迭代行为，比如在for of结构中，哪些值可以遍历到。在js中的某些类型是内置好的可迭代对象，比如：字符串、数组、类型数组、Map对象、Get对象等。而Object类型不可迭代。这些内置可迭代对象可以进行迭代的原因是内部实现了@@iterator 方法，即在该对象或该对象的原型链上有Symbol.iterator属性实现了@@iterator 方法。
简单来说就是将不可迭代对象变为可迭代对象，上例手写该协议，用Generator实现，yield控制输出

迭代器协议：（Iterator对象）
定义了产生一系列值的标准方式。一个对象必须实现next()方法，才能成为迭代器。

next() 方法必须返回一个对象，该对象应当有两个属性： done 和 value

done（boolean）如果迭代器可以产生序列中的下一个值，则为 false。

value 迭代器返回的任何 JavaScript 值

模块

导出 export {const one=‘name’}

导入 import {name} from ‘xxx文件，可以省略.js拓展名’

对于默认导出和对导入的模块进行改名

export default 变量名//只能有一个默认导出

在导入时，对于默认导入变量不写在{}里，例如import name2,{name} from ‘src’

如果想对模块改名，默认变量直接改，其他得加as

例如，原文件默认导出为name，导入时 import name2,{addr as addr2} from ‘src’

如果导出的是对象，只能导出一个对象，

可以import对象后，进行结构化赋值取出该对象里涵盖的多个对象

默认导出类时，可以不声明类名

如果想一次性导入多个模块，可以用*关键字，例如 import * as Mod from ‘src’

注意：默认导出的模块需要用Mod.default()//默认去查找

觉得该篇文章有用的请不要忘记忘记点击右下角的大拇指~

欢迎大家关注我的公众号：Smooth前端成长记录
公众号同步更新CSDN博客内容，想方便阅读博客的C友可以来关注我的公众号以便获得更优良的阅读体验~