关于ES6新增的方法总结,包含了一些个人笔记的重点强调
发布于 2 年前 作者 olai 4990 次浏览 来自 分享

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友可以来关注我的公众号以便获得更优良的阅读体验~

6 回复

ES6很重要的新特性还有像块级作用域 关键字let, 常量const,这些也值得研究喔

挺不错的~

这笔记太棒了!ES6对中增加了很多新特性,让本来就不太好学习的js更难学了。看完这篇文章我又有了一点点学习的信心。向大佬学习!

先码住了,感谢大佬分享

社区大佬真多 我算是学到了 我这么优秀是不是应该赞我一下

属于是大佬行为了,学习学习

回到顶部