es6基础（2）

Yu Lei 2019-3-21 es6 javascript

ES6 基础

数组的常用方法

every 方法

arr.every(v=>{return true}) # 当每一个都返回真 则最终的结果为真
const arr1 = [2,3,4,5,6]
arr1.every(v=>v>4) #false 有一个为假即为假
# 常用于全选和全不选
[...document.getelementByclassName('sel')].every(v=>v.attr('操作'))

1
2
3
4
5

foreach 在内部迭代每次都会执行回调函数的第一个参数值第二个下标第三个数组本身内部的 this 指向 window 对象第二个参数改变 this 的指向arr.foreach(function(value，index，arr){},改变this指向的参数如果写arr则内部this指向arr)
some 和 every 相对只要有一个为真即返回 true

filter 过滤从原有数组中过滤新数组

const arr2 = arr1.filter(v=>v>5)#原数组的值满足条件重新生成的数组

map 方法和 filter 类似但是是映射处一个新数组

const arr3 = arr1.map(v=>v*10)# 原数组中的值进行重新的映射操作获得新数组

reduce 拆解和融合

arr1.reduce((prev,current)=>return prev+current)#prev上一次循环的结果 current当前的循环指针所在的位置

对象的新方法

assign 对象的合并拷贝操作

let obj=Object.assign({},{x:1,y:1})
#把位置1的对象于位置2的对象融合  位置2 不会被改变  位置1 对象会被改变
let  全新的对象 = Object.assign({融合的种子对象},{要被融合的数据对象})
#这个方法是从后到前的拷贝，支持多个对象，但是这个方法是浅拷贝，对象内部的指针指向原数据存储的地址，

1
2
3
4

create 方法用来创建对象，通过 create 创建的是原型对象也就是把对象或属性在创建对象的同时放到原型内部
freeze 冻结不允许再改变
defineProperty（对象，‘属性名称’，{描述属性的详细细节}）通过点中括号等方式添加的属性可配置可枚举可删除等为真而通过这个方法添加的默认为 false，可以说这个方式是手动配置属性的接口。forin 是取对象的可枚举属性，如果可枚举属性为真就可以被遍历。也就是说如果可枚举属性设置为假则 for in 不会遍历这个属性
```
const obj = { x: 1, y: 1 }
obj.prototype.z = 100
Object.defineProperty(obj, 'k', {
  value: 100,
  enumerable: false
})
for (let attr in obj) {
  console.log(attr) //出现 x y z 而K 不会出现  如果enumerable:true  就可以出现
}
```
1
2
3
4
5
6
7
8
9

set

内部数据无序切唯一，可迭代

数组的去重复

let arr=[1,2,3,4,5,4,3,2,1]
arr =[...new Set(arr)] #全部去重

1
2

内部的 Key 和 value 是同一个

map

类似于对象但是 Key 可以是任何类型的值而不仅仅局限于字符串

是一个 key 和 value 的映射关系

有 set 和 get 方法 map 的 key 可以是任意类型

weakmap

类似于 map 但是 key 必须是对象，特点是 key 是弱引用， GC 机制不考虑回收问题。

对象的特点，会一直加载在内存中，也就是存在内存数据泄露的风险，也就是对象的赋值时强引用，也就是在外部存储的数据值观测外部的强引用，外部强引用停用了 wekmap 内部的对应数据会被删除也即是不存在了。

class

class  Persion{
    constructor（name，age）{
        this.name=name
        this.age =age
    }
}
let p = new Persion("haha",18)

1
2
3
4
5
6
7

继承

class Student extends Persion{
    //如果字类有自己的初始化过程 也就是自己的构造函数哪就必须调用父类的构造函数
    constructor（name,age,classNumber）{
        super(name,age);//一定要先调用
        this.classNumber=classNumber
    }
}

1
2
3
4
5
6
7

异步编程

任务队列不是立马执行而是按照队列执行不会出现阻塞 IO

Promise

Promise 有三种状态 pending resolve reject
promise 中的结果只能用 then 在接收
在返回一个 promise 后可以实现链式调用。
如果失败要在后一个回调函数中接受到

promise 的 then 方法返回值也是一个新 promise 对象，而这个 promise 的状态是继承了上一个 promise 的状态而且这个返回的这个 promise 默认是成功的

const a=new Promise((resolve,reject)=>{
    resolve()
    失败reject（）
})
//如果成功则 打印 123  失败则会打印 失败捕获 2 3
a.then(()=>{console.log(1)},()=>{console.log('失败捕获')})
.then(()=>{console.log(2)})
.then(()=>{console.log(3)})

1
2
3
4
5
6
7
8

如果在 promise 中有 catch（） catch 也会返回一个默认为 true 状态的 promise
1 使用 then 的第二个参数那么第二个参数如果无返回则会后面的 promise 会正常执行，如果有返回 reject 则会被 catch 捕获
最好不要使用第二个参数只使用 catch
promise 中的任务队列 Promise.all（【】）.then(data=>{}).catch(err=>{})全部完后才会得到数据 data 是两个任务的数据的集合
promise.race([p1,p2]).then().catch() 谁先成功先拿到谁的结果。

generator

function* fn() {
  console.log(1)
  yield getData()
  yield getData()
  yield getData()
  yield getData()
  yield getData()

  console.log(3)
}
//会返回一个迭代器函数  内部有一个next方法
// let f = fn()
// f.next() //才会执行
//第一次调next  就会执行第一次执行的yield 之前的代码 向debug

//自动化genarator的执行函数
function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(1000)
      resolve(100)
    }, 1000)
  })
}

function c(callback) {
  let cb = callback()

  function next(d) {
    let result = cb.next(d)
    if (result.done) {
      return
    }
    result.value.then(data => {
      next(data)
    })
  }
  next()
}
c(fn)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

async 和 await

定义个 async 内部使用 await 可以暂停函数等待其执行完成继续下一部，也就是 generator 本身是静态的每次的 next 继续向下执行而 async 是动态的 await 等待

错误处理直接使用 try catch，这个是代码上的同步本事还是异步，不会影响其他的操作

es6基础（2）

# ES6 基础

# 数组的常用方法

# 对象的新方法

# set

# map

# weakmap

# class

# 异步编程

# Promise

# generator

# async 和 await