ESMAScript（3）

目录

ES6

Symbol属性

iterator遍历器

Generator函数

async函数

class类

字符串扩展

includes(str)

startsWith(str)

endsWith(str)

repeat(count)

数值扩展

二进制与八进制数值表示法

Number.isFinite(i)

Number.isNaN(i)

Number.isInteger(i)

Number.parseInt(str)

Math.trunc(i)

数组扩展

Array.from(v)

Array.of(v1,v2,v3)

find(function(value,index,arr){return true})

findIndex(function(value,index,arr){return true})

对象扩展

Object.is(v1,v2)

Object.assign(target,source1,source2……)

直接操作__proto__属性

深度克隆

Set容器

Map容器

for of遍历

ES7

---

ES6

Symbol属性

ES5中对象的属性名都是字符串，容易造成重名，污染环境

概念：ES6中添加了一种原始数据类型Symbol（已有的数据类型：String，Number，boolean，null，undefined，对象）

特点：

1. Symbol属性对应的值是唯一的，解决命名冲突的问题
2. Symbol值不能与其他数据进行计算，包括字符串拼接
3. for in，for of 遍历时不会遍历Symbol属性

使用：

1. 调用Symbol函数得到Symbol值

   let symbol=Symbol()
   let obj={}
   obj[symbol]='hello'

2. 传参标识

   let symbol=Symbol('one')    //Symbol(one)
   let symbol2=Symbol('two')    //Symbol(two)

3. 内置Symbol值。除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语言内部使用的方法。

---

iterator遍历器

概念：iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制

作用：

1. 为各种数据结构提供一种统一的、简便的访问接口
2. 使得数据结构的成员能够按照某种次序排列
3. ES6创造了一种新的遍历方式 for of 循环，iterator接口主要供其消费

拥有iterator接口的数据类型（数组，字符串，arguments，set容器，map容器），可以使用 for of 去循环遍历

---

Generator函数

概念：

1. ES6提供的解决异步编程的方案之一
2. Generator函数是一个状态机，内部封装了不同状态的数据
3. 用来生成遍历器对象
4. 可暂停函数（惰性求值），yield可暂停，next方法可启动。每次返回的是yield后的表达式结果

特点：

1. function 与函数名之间有一个 ' * '
2. 内部用yield表达式来定义不同的状态
3. generator 函数返回的是指针对象，而不会执行函数内部逻辑
4. 调用next方法函数内部逻辑开始执行，遇到yield表达式停止，返回一个对象
5. 再次调用next方法会从上一次停止时的yield处开始
6. yield语句返回结果默认为undefined。当调用next方法时可以进行传参，传参内容会作为启动时yield语句的返回值

利用Generator函数，人为为对象添加Symbol.iterator属性指向遍历器对象，实现遍历遍历器对象中的数据。

---

async函数

概念：真正意义上去解决异步回调的问题，同步流程表达异步操作

本质：Generator的语法糖

语法：

async function fun(){
    await 异步操作
    await 异步操作
}

特点：

1. 不需要像Generator函数去调用next方法，遇到await等待，当前的异步操作完成就往下执行
2. 返回的总是Promise对象，可以用then方法进行下一步操作
3. async取代Generator函数的星号*，await取代Generator的yield
4. 语义上更为明确，使用简单

---

class类

• 通过class定义类或实现类的继承
• 在类中通过constructor方法定义构造方法
• 通过new来创建类的实例
• 通过extends来实现类的继承
• 通过super调用父类的构造方法
• 重写从父类中继承的一般方法

大体跟多数面对对象的编程语言类似

---

字符串扩展

includes(str)

判断是否包含指定的字符串

startsWith(str)

判断是否以指定字符串开头

endsWith(str)

判断是否以指定字符串结尾

repeat(count)

重复指定次数

数值扩展

二进制与八进制数值表示法

二进制用0b，八进制用0o

Number.isFinite(i)

判断是否是有限大的数

Number.isNaN(i)

判断是否是NaN

Number.isInteger(i)

判断是否为整数

Number.parseInt(str)

将字符串转换为对应的数值（若字符串中开头为数字，则只转换到下一个非数字为止；若字符串中开头为非数字，则为NaN）

Math.trunc(i)

直接去除小数部分

数组扩展

Array.from(v)

将伪数组或可遍历对象转换为真数组

Array.of(v1,v2,v3)

将一系列值转换为数组

find(function(value,index,arr){return true})

找出第一个满足条件返回true的元素

findIndex(function(value,index,arr){return true})

找出第一个满足条件返回true的元素下标

对象扩展

Object.is(v1,v2)

判断两个数据是否完全相等

console.log(0==-0)    //true
console.log(NaN==NaN)    //false
console.log(Object.is(0,-0))    //false
console.log(Object.is(NaN,NaN))    //true

Object.assign(target,source1,source2……)

将源对象的属性复制到目标对象上

直接操作__proto__属性

let obj2={}
obj2.__proto__=obj1    //将obj1变为obj2的原型

---

深度克隆

拷贝数据：

        基本数据类型：拷贝后会生成一份新的数据，修改拷贝后不会影响原数据

        对象/数组：拷贝不会生成新的数据，而是指向同一个地址，故修改后会影响原数据

拷贝数据的方法：

1. 直接赋值给一个变量（浅拷贝）
2. Object.assign()（浅拷贝）
3. Array.prototype.concat()（浅拷贝）
4. Array.prototype.slice()（浅拷贝）
5. JSON.parse(JSON.stringify())（深拷贝）

浅拷贝：指向同一地址

深拷贝：创建新的地址

---

Set容器

无序不可重复的多个元素的集合体

• add(value)：添加元素
• delete(value)：删除元素
• has(value)：判断是否含有该元素
• clear()：清除集合

Map容器

无序的key不重复的多个键值对的集合体

• set(key,value)：添加元素
• get(key)：获取对应键的值
• delete(key)：删除对应键
• has(key)：判断是否含有改键
• clear()：清除集合

---

for of遍历

1. 遍历数组
2. 遍历Set
3. 遍历Map
4. 遍历字符串
5. 遍历伪数组

---

ES7

指数运算符：**

Array.prototype.includes(value)：判断数组中是否含有该元素