ES6——知识点记录

这里写目录标题

1.字符串支持
2.函数
3.对象Object
4.async和await
5.Fetch Api
6 新增的数组API
- - - - 静态方法
        
        实例方法

1.字符串支持

1.codePointAt——根据字符串码元的位置得到其码点

2.includes——判断字符串中是否包含指定的子字符串

3.startsWith——判断字符串中是否以指定的字符串开始

4.endsWith——判断字符串中是否以指定的字符串结尾

5.repeat——将字符串重复指定的次数，然后返回一个新字符串

6.模板字符串

ES6之前处理字符串繁琐的两个方面：

多行字符串

字符串拼接

在ES6中，提供了模板字符串的书写，可以非常方便的换行和拼接，要做的，仅仅是将字符串的开始或结尾改为 ` 符号

如果要在字符串中拼接js表达式，只需要在模板字符串中使用${JS表达式}

2.函数

2-1. 参数默认值

使用

在书写形参时，直接给形参赋值，附的值即为默认值

这样一来，当调用函数时，如果没有给对应的参数赋值（给它的值是undefined），则会自动使用默认值。

[扩展]对arguments的影响

只要给函数加上参数默认值，该函数会自动变量严格模式下的规则：arguments和形参脱离

[扩展]留意暂时性死区

形参和ES6中的let或const声明一样，具有作用域，并且根据参数的声明顺序，存在暂时性死区。

2-6. 箭头函数

回顾：this指向

通过对象调用函数，this指向对象

直接调用函数，this指向全局对象

如果通过new调用函数，this指向新创建的对象

如果通过apply、call、bind调用函数，this指向指定的数据

如果是DOM事件函数，this指向事件源

使用语法

箭头函数是一个函数表达式，理论上，任何使用函数表达式的场景都可以使用箭头函数

完整语法：

(参数1, 参数2, ...)=>{
    //函数体
}

如果参数只有一个，可以省略小括号

参数 => {

}

如果箭头函数只有一条返回语句，可以省略大括号，和return关键字

参数 => 返回值

注意细节

箭头函数中，不存在this、arguments、new.target，如果使用了，则使用的是函数外层的对应的this、arguments、new.target
箭头函数没有原型
箭头函数不能作用构造函数使用

应用场景

临时性使用的函数，并不会可以调用它，比如：

事件处理函数

异步处理函数

其他临时性的函数

为了绑定外层this的函数

在不影响其他代码的情况下，保持代码的简洁，最常见的，数组方法中的回调函数

3.对象Object

3-1. Object的新增API

1. Object.is

用于判断两个数据是否相等，基本上跟严格相等（===）是一致的，除了以下两点：

NaN和NaN相等
+0和-0不相等

2. Object.assign

用于混合对象

3. Object.getOwnPropertyNames 的枚举顺序

Object.getOwnPropertyNames方法之前就存在，只不过，官方没有明确要求，对属性的顺序如何排序，如何排序，完全由浏览器厂商决定。

ES6规定了该方法返回的数组的排序方式如下：

先排数字，并按照升序排序
再排其他，按照书写顺序排序

4. Object.setPrototypeOf

该函数用于设置某个对象的隐式原型

比如： Object.setPrototypeOf(obj1, obj2)，
相当于： obj1.__proto__ = obj2

3-2. 类：构造函数的语法糖

传统的构造函数的问题

属性和原型方法定义分离，降低了可读性

原型成员可以被枚举

默认情况下，构造函数仍然可以被当作普通函数使用

类的特点

类声明不会被提升，与 let 和 const 一样，存在暂时性死区

类中的所有代码均在严格模式下执行

类的所有方法都是不可枚举的

类的所有方法都无法被当作构造函数使用

类的构造器必须使用 new 来调用

3-3. 类的其他书写方式

1. 可计算的成员名

2. getter和setter

Object.defineProperty 可定义某个对象成员属性的读取和设置

使用getter和setter控制的属性，不在原型上

3. 静态成员

构造函数本身的成员

使用static关键字定义的成员即静态成员

4. 字段初始化器（ES7）

注意：
1). 使用static的字段初始化器，添加的是静态成员
2). 没有使用static的字段初始化器，添加的成员位于对象上
3). 箭头函数在字段初始化器位置上，指向当前对象

5. 类表达式

6. [扩展]装饰器（ES7）(Decorator)

横切关注点

装饰器的本质是一个函数

3-4. 类的继承

如果两个类A和B，如果可以描述为：B 是 A，则，A和B形成继承关系

如果B是A，则：

B继承自A

A派生B

B是A的子类

A是B的父类

如果A是B的父类，则B会自动拥有A中的所有实例成员。

新的关键字：

extends：继承，用于类的定义

super

直接当作函数调用，表示父类构造函数

如果当作对象使用，则表示父类的原型

注意：ES6要求，如果定义了constructor，并且该类是子类，则必须在constructor的第一行手动调用父类的构造函数

如果子类不写constructor，则会有默认的构造器，该构造器需要的参数和父类一致，并且自动调用父类构造器

【冷知识】

用JS制作抽象类
- 抽象类：一般是父类，不能通过该类创建对象
正常情况下，this的指向，this始终指向具体的类的对象

4.async和await

消除回调

有了Promise，异步任务就有了一种统一的处理方式

有了统一的处理方式，ES官方就可以对其进一步优化

ES7推出了两个关键字async和await，用于更加优雅的表达Promise

async

async关键字用于修饰函数，被它修饰的函数，一定返回Promise

async function method1(){
  return 1; // 该函数的返回值是Promise完成后的数据
}

method1(); // Promise { 1 }

async function method2(){
  return Promise.resolve(1); // 若返回的是Promise，则method得到的Promise状态和其一致
}

method2(); // Promise { 1 }

async function method3(){
  throw new Error(1); // 若执行过程报错，则任务是rejected
}

method3(); // Promise { <rejected> Error(1) }

await

await关键字表示等待某个Promise完成，它必须用于async函数中

async function method(){
  const n = await Promise.resolve(1);
  console.log(n); // 1
}

// 上面的函数等同于
function method(){
  return new Promise((resolve, reject)=>{
    Promise.resolve(1).then(n=>{
      console.log(n);
      resolve(1)
    })
  })
}

await也可以等待其他数据

async function method(){
  const n = await 1; // 等同于 await Promise.resolve(1)
}

如果需要针对失败的任务进行处理，可以使用try-catch语法

async function method(){
  try{
    const n = await Promise.reject(123); // 这句代码将抛出异常
    console.log('成功', n)
  }
  catch(err){
    console.log('失败', err)
  }
}

method(); // 输出： 失败 123

Promise的基本概念

链式调用规则

then方法必定会返回一个新的Promise

可理解为后续处理也是一个任务

新任务的状态取决于后续处理：

若没有相关的后续处理，新任务的状态和前任务一致，数据为前任务的数据

若有后续处理但还未执行，新任务挂起。

若后续处理执行了，则根据后续处理的情况确定新任务的状态
- 后续处理执行无错，新任务的状态为完成，数据为后续处理的返回值
- 后续处理执行有错，新任务的状态为失败，数据为异常对象
- 后续执行后返回的是一个任务对象，新任务的状态和数据与该任务对象一致

Promise的静态方法

方法名	含义
Promise.resolve(data)	直接返回一个完成状态的任务
Promise.reject(reason)	直接返回一个拒绝状态的任务
Promise.all(任务数组)	返回一个任务任务数组全部成功则成功任何一个失败则失败
Promise.any(任务数组)	返回一个任务任务数组任一成功则成功任务全部失败则失败
Promise.allSettled(任务数组)	返回一个任务任务数组全部已决则成功该任务不会失败
Promise.race(任务数组)	返回一个任务任务数组任一已决则已决，状态和其一致

5.Fetch Api

Fetch Api 概述

XMLHttpRequest的问题

所有的功能全部集中在同一个对象上，容易书写出混乱不易维护的代码

采用传统的事件驱动模式，无法适配新的 Promise Api

Fetch Api 的特点

并非取代 AJAX，而是对 AJAX 传统 API 的改进

精细的功能分割：头部信息、请求信息、响应信息等均分布到不同的对象，更利于处理各种复杂的 AJAX 场景

使用 Promise Api，更利于异步代码的书写

Fetch Api 并非 ES6 的内容，属于 HTML5 新增的 Web Api

需要掌握网络通信的知识

基本使用

请求测试地址：http://study.yuanjin.tech/api/local

使用 fetch 函数即可立即向服务器发送网络请求

参数

该函数有两个参数：

必填，字符串，请求地址

选填，对象，请求配置

请求配置对象

method：字符串，请求方法，默认值 GET

headers：对象，请求头信息

body: 请求体的内容，必须匹配请求头中的 Content-Type

mode：字符串，请求模式

cors：默认值，配置为该值，会在请求头中加入 origin 和 referer

no-cors：配置为该值，不会在请求头中加入 origin 和 referer，跨域的时候可能会出现问题

same-origin：指示请求必须在同一个域中发生，如果请求其他域，则会报错

credentials: 如何携带凭据（cookie）

omit：默认值，不携带 cookie

same-origin：请求同源地址时携带 cookie

include：请求任何地址都携带 cookie

cache：配置缓存模式

default: 表示 fetch 请求之前将检查下 http 的缓存.

no-store: 表示 fetch 请求将完全忽略 http 缓存的存在. 这意味着请求之前将不再检查下 http 的缓存, 拿到响应后, 它也不会更新 http 缓存.

no-cache: 如果存在缓存, 那么 fetch 将发送一个条件查询 request 和一个正常的 request, 拿到响应后, 它会更新 http 缓存.

reload: 表示 fetch 请求之前将忽略 http 缓存的存在, 但是请求拿到响应后, 它将主动更新 http 缓存.

force-cache: 表示 fetch 请求不顾一切的依赖缓存, 即使缓存过期了, 它依然从缓存中读取. 除非没有任何缓存, 那么它将发送一个正常的 request.

only-if-cached: 表示 fetch 请求不顾一切的依赖缓存, 即使缓存过期了, 它依然从缓存中读取. 如果没有缓存, 它将抛出网络错误(该设置只在 mode 为”same-origin”时有效).

返回值

fetch 函数返回一个 Promise 对象

当收到服务器的返回结果后，Promise 进入 resolved 状态，状态数据为 Response 对象
当网络发生错误（或其他导致无法完成交互的错误）时，Promise 进入 rejected 状态，状态数据为错误信息

Response 对象

ok：boolean，当响应消息码在 200~299 之间时为 true，其他为 false

status：number，响应的状态码

text()：用于处理文本格式的 Ajax 响应。它从响应中获取文本流，将其读完，然后返回一个被解决为 string 对象的 Promise。

blob()：用于处理二进制文件格式（比如图片或者电子表格）的 Ajax 响应。它读取文件的原始数据，一旦读取完整个文件，就返回一个被解决为 blob 对象的 Promise。

json()：用于处理 JSON 格式的 Ajax 的响应。它将 JSON 数据流转换为一个被解决为 JavaScript 对象的 promise。

redirect()：可以用于重定向到另一个 URL。它会创建一个新的 Promise，以解决来自重定向的 URL 的响应。

Headers 对象

在Request和Response对象内部，会将传递的请求头对象，转换为Headers

Headers对象中的方法：

has(key)：检查请求头中是否存在指定的key值

get(key): 得到请求头中对应的key值

set(key, value)：修改对应的键值对

append(key, value)：添加对应的键值对

keys(): 得到所有的请求头键的集合

values(): 得到所有的请求头中的值的集合

entries(): 得到所有请求头中的键值对的集合

文件上传

流程：

客户端将文件数据发送给服务器

服务器保存上传的文件数据到服务器端

服务器响应给客户端一个文件访问地址

测试地址：http://study.yuanjin.tech/api/upload
键的名称（表单域名称）：imagefile

请求方法：POST
请求的表单格式：multipart/form-data
请求体中必须包含一个键值对，键的名称是服务器要求的名称，值是文件数据

HTML5 中，JS 仍然无法随意的获取文件数据，但是可以获取到 input 元素中，被用户选中的文件数据
可以利用 HTML5 提供的 FormData 构造函数来创建请求体

6 新增的数组API

静态方法

Array.of(…args): 使用指定的数组项创建一个新数组

Array.from(arg): 通过给定的类数组或可迭代对象创建一个新的数组。

实例方法

find(callback): 用于查找满足条件的第一个元素

findIndex(callback)：用于查找满足条件的第一个元素的下标

fill(data)：用指定的数据填充满数组所有的内容

copyWithin(target, start?, end?): 在数组内部完成复制

includes(data)：判断数组中是否包含某个值，使用Object.is匹配