ES6——知识点记录
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，则会有默认的构造器，该构造器需要的参数和父类一致，并且自动调用父类构造器
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 { 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(); // 输出： 失败 123Promise的基本概念
链式调用规则
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匹配