ES6
2019-12-09 13:19:59 3 举报AI智能生成
ES6知识点详解
作者其他创作
大纲/内容
类
说明
并不是完整意义上的类，基于原型的类
ES5 类定义的一个语法糖
语法
定义
class 关键字
class 中定义的方法都是不可枚举的
类必须使用 new 来调用，否则会报错
constructor 方法
类的构造函数
如果没有显示定义，则默认会生成一个空的构造函数
默认返回实例对象
也可以指定返回另一个对象
类的实例
在构造器中创建的对象都是实例对象
在class中，构造器外，定义的方法都是原型方法
hasOwnProperty 判断一个属性是否存在于对象本身
所有实例共享一个原型对象
getter/setter
在类的内部可以使用 get 和 set 关键字
get
取值函数
当获取使调用 get 方法
set
当设置时调用 set 方法
属性表达式
类的属性名和方法名可以采用表达式
名称为表达式的结果
Class 表达式
与函数一样，类也可以使用表达式定义
在 Class 内部需要使用的话，调用本身类名
外部使用，调用表达式的名称
静态方法
在方法前加上 static 来设置静态方法
静态方法通过类来调用，实例无法使用
静态方法this指向类，而不是实例
静态属性
默认情况下需要在类的外面定义
static 也可以定义静态方法，但还是草案
注意点
严格模式
类和模块的内部默认都是严格模式
不存在变量声明提升
name属性
this的指向
类方法内部如果含有 this，默认指向类的实例
继承
extends 关键字继承
可以继承类的所有属性和方法
原型
静态
必须调用 super 方法
子类构造函数通过父类的构造函数加工完成
如果不调用，子类就得不到 this 对象
只有调用 super 之后才可以使用 this 关键字，之前使用的会报错
如果子类没有定义 constructor 方法，这个方法会被默认添加
super关键字
但作为函数调用
代表父类的构造函数
返回的是子类的实例
this 执行子类
只能在子类构造器中使用，否则会报错
当作为对象调用
普通方法中指向父类的原型对象
方法内部的 this 指向当前的子类实例
静态方法中指向父类
在使用super的时候，必须显示的指定是作为函数还是作为对象使用，否则会报错
新增数据结构
Set
类似数组，当时成员值是唯一的，没有重复的值。
new Set()
本身是一个构造函数
可以接受一个具有 iterable 接口的数据结构作为参数
可以将其转化为数组
[...set]
原型属性和方法
属性
constructor
构造函数，默认就是Set函数
size
返回Set实例的成员总数
方法
add(value)
添加某个值，返回 Set 结构本身。
delete(value)
删除某个值，返回一个布尔值，表示删除是否成功。
has(value)
返回一个布尔值，表示该值是否为Set的成员。
clear()
清除所有成员，没有返回值。
Map
它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
new Map()
Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组
set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。
get(key)
get方法读取key对应的键值，如果找不到key，返回undefined。
has(key)
has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。
delete(key)
delete方法删除某个键，返回true。如果删除失败，返回false。
clear方法清除所有成员，没有返回值。
Symbol 元编程
一种新的数据类型，表示独一无二的值
第七种原始数据类型
创建
通过 Symbol 函数生成
let s = Symbol();
Symbol 函数前不能使用 new 命令，否则会报错
类似字符串的数据类型
函数参数
可以接受一个字符串作为参数
为了方便区分
如果参数是一个对象
会调用该对象的 toString 方法，将其转为字符串，然后将结果作为函数的参数
独一无二的，两个相同参数的 Symbol 不相等
Symbol() == Symbol();// false
无法运算
Symbol 值不能与其他类型的值进行运算，会报错。
值的转换
Symbol 值可以显示转换为字符串
调用String或toString方法
也可以显示转换为布尔
强制转换
Boolean
隐式转换
!
if
不能转换为数值
转换的话会报错
description 属性
创建 Symbol 的时候，可以添加一个描述。
可以使用 description 属性，直接返回 Symbol 的描述
Symbol('foo').description // \"foo\"
作为属性名的 Symbol
可以使用Symbol值作为对象名，这样就可以保证不会出现同名的属性。
用法
直接给一个对象属性名设置为 Symbol 值
不能使用点运算符
点运算符后面跟的是字符串，会导致Symbol的标识符名称失效
a.mySymbol = 'Hello!';a[mySymbol] // undefined
在对象内部使用 Symbol 值定义属性是，必须放在方括号之中
let obj = { [s]: function (arg) { ... }};
Symbol 值作为属性名时，该属性还是公开属性，不是私有属性。
属性名的遍历
Symbol 作为属性名，遍历对象的时候，该属性不会出现在for...in、for...of循环中，也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。
Object.getOwnPropertySymbols() 方法
获取指定对象的所有 Symbol 属性名
成员是当前对象的所有用作属性名的 Symbol 值
该方法返回一个数组
Reflect.ownKeys() 方法
返回所有类型的键名，包括常规键名和 Symbol 键名
可以利用 Symbol 值作为键名不会被常规遍历到的特性来模拟对象的一些非私有，但又希望只用于内部的方法。
Symbol.for() / Symbol.keyFor()
Symbol.for()
创建两个相同的 Symbol 值
它接受一个字符串作为参数，然后搜索有没有以该参数作为名称的 Symbol 值
如果有，就返回这个 Symbol 值
没有就新建一个以该字符串为名称的 Symbol 值，并将其注册到全局。
会先在全局登记一次，之后每次搜索返回
Symbol.keyFor()
返回一个已登记（使用 for 方法）的 Symbol 类型值的 key。
let s1 = Symbol.for(\"foo\");Symbol.keyFor(s1) // \"foo\"
新增 API
Array
Array.of
将一组参数转换为数组
只有一个参数时，是一个数组项
Array.from
将类数组转换为数组
浅拷贝
支持和map类似的映射
find
找到满足的第一个元素
findIndex
找到满足第一个条件的元素的下标
includes
检测是否包含
Object
Object.is
判断两个值是否相等
0 和 -0不相等
NaN等于自身
Object.getOwnPropertySymbols
从指定对象上获取所有符号属性名组成的数组
Object.getOwnPropertyNames
获取对象身上所有可枚举但不包括symbol的属性名组成的数组
不能获取原型上的
Object.keys
获取对象身上可枚举属性组成的数组
Object.assign
将源对象拷贝到目标对象身上
会改变目标对象的值
Number
Number.isNaN
判断数字是否为NaN
String
startsWith
判断当前字符串是否以指定字符开头
endsWith
判断当前字符串是否以指定字符结尾
判断字符是否包含指定字符串
ES6
'use strict'
开启关键字
必须在作用域第一行使用
特性
严格模式下变量必须先声明后使用
禁止了 this 指向 wind ow，它是一个 undefined
严格模式下对 argument 对象进行了限制
不允许对 arguments 赋值
arguments 不再追踪参数的变化
禁止使用 arguments.callee
对一个只读属性进行赋值会报错
块级作用域声明
let / const
let 声明一个变量
不能重复声明，但可以重新赋值
const 声明一个常量
不能重复声明并且要在声明的时候立即赋值
原始类型值不能改变
引用类型值的可以改变，因为保存的是内存地址
共同特性
只在当前代码块有效
暂时性死区
从开头到声明关键字之间存在一个封闭区域，这个区域内不能任何方式使用这个变量
块级作用域
使用 let 和 const 触发
可以嵌套多层
每一层之间互不影响
内层作用域可以访问上层作用域，反之不行
内部变量存储在块级环境变量中
for循环每一次都会输出相应的数值
在循环中如果()中包含let和const，这个循环体就是个块级作用域
展开/收集运算符
...
spread / rest
展开
展开数组
展开对象
收集
当实参比形参多
默认参数值
作用
可以给函数的形参直接赋值，当没有传入相应的实参时，使用形参的默认值
也可以给解构赋值设置默认值，当解构不出来的时候，使用默认值
默认值表达式
可以在赋值默认值的时候使用表达式，计算的结果就是默认值
解构
解构化赋值
声明新变量对其进行匹配赋值
使用全等来判断相应位置的值是否有效
可以对2个生效
数组解构
变量和数组值一一对应
对象解构
解构 key 和目标 key 一一对应
赋值模式
对象
key: value
value: key
解构值详解
值的数量
多余的变量因为无法解构所以为 undefined
可以只取其中某几个值
可以和展开运算符一起使用
默认值赋值
和函数默认值用法相同
嵌套结构
解构的结构要和目标结构对应
数组
let {x:{y:{z:w}}} = {x:{y:{z:6}}}
函数解构参数
可以在形参中设置解构，实参会被解析出来
可以使用解构来进行函数默认值的设置
默认值设置在左边
有值就覆盖，没有值就使用默认值
默认值设置在右边
相等于将原先的指针替换掉了，这时有值就使用，没有值就是 undefined
解构高级用法
高级赋值操作
将值解构到一个对象中
快捷改变数组值的位置
解构中的表达式
可以在解构中使用表达式，最终结果根据表达式来定
互相映射
将数组映射为对象
将对象映射为数组
重复赋值
使用不同的变量名，解构相同的值
链式解构
可以使用 = 进行多个对象的解构
将解构赋值和普通赋值混用
普通值是对象的引用
对象字面量扩展
简洁属性和方法
当 key 和 value 相等时，可以只写 key
方法可以省略冒号和 function
属性名即为方法名
实际上是一个匿名函数
计算属性名
[] 可以定义一个对象的属性名
支持任何表达式
super对象
super 相等于原型上的父类
一般在 class 中使用，对象中不常使用
模板字符串
字符串模板
字符串字面量
``
渲染区域
${}
插入表达式
内部支持任何表达式
let txt = world;`hello ${txt}`;hello world
字符串模板中的换行都是真实有效的，结果会被保留下来
标签模板
可以使用``来使用函数
箭头函数
()=>{}
3部分组成
参数列表
()
0或多个参数，只有一个参数可以省略()
标识
=>
函数体
{}
可以省略，省略的情况下会默认在前面加一个return，只适用于一条语句省略
特点
this指向
this 指向定义时外层包含的作用域中继承的 this
只取决于第一次定义的作用域，无法被改变
call、apply、bind无效
arguments 对象
箭头函数中没有 arguments 对象
继承自父层
不能OOP编程
不存在 prototype 属性
也不能使用 new 操作符创建对象
代码组织
遍历器 Iterator
遍历不同数据结构的一种接口，任意数据结构只要部署 Iterator 接口，就可以完成遍历操作。
为各种数据结构，提供一个统一的、简便的访问接口
使得数据结构的成员能够按某种次序排列
ES6 创造了一种新的遍历命令 for...of 循环，Iterator 接口主要供 for...of 消费
在函数中返回一个 next 方法
next 方法中返回 2 个属性
value
当前成员的值
done
布尔值，表示遍历是否结束
默认 Iterator 接口
ES6规定，默认的 Iterator 接口部署在数据结构的 Symbol.iterator 属性，一个数据类型只要具有 Symbol.iterator 属性，就可以认为是“可遍历的”。
ES6 有些数据结构原生具备 Iterator 接口，可以不用任何处理，就可以被 for...of 循环遍历
TypedArray
函数的 arguments 对象
NodeList 对象
对象之所以没有默认 Iterator 接口，是因为对象属性遍历的顺序是不确定的。
for...of
遍历所有数据结构的统一方法
一个数据结构只要要部署了 Symbol.iterator 属性，就可以使用 for...of 循环遍历它的成员
生成器 Generator
Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。
执行 Generator 函数会返回一个遍历器对象。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。
function 关键字与函数名直接有一个 *
任何地方都可以
函数体内部使用 yield 表达式，来定义不同的状态
使用 next 方法来获取遍历器对象的每一个状态。
内部状态值
是否遍历结束
异步流控制
Promise
Promise 是避免异步编程中回调地狱的一种解决方案
最早由社区提出和实现，ES6 将其写入到标准里
三种状态
Pending
进行中
Fulfilled
已完成
Rejected
已失败
一旦确定状态无法改变
最终状态只有 2 个
成功
失败
可以随时得到这个状态
不受外界影响，只能由异步操作的结果来确定
缺点
无法取消 Promise ，一旦创建就立即指向，无法中途取消
如果不设置回调函数，Promise 内部抛出的错误不会反应到外部
当处于 Pending 状态的时候，无法得知目进展到哪一个阶段
基本用法
new Promise
resolve
进行中变为已完成，并且可以传递一个参数
可以传入一个 Promise 对象那么根据传入的这个Promise 对象确认状态
reject
进行中变为以失败，并且可以传递一个参数
如果程序运行中出现错误，则会改变为 reject 状态
实例方法
then
使用 then 方法获取 Promise 对象返回的结果
2个参数
第一个参数，resolve 状态时的回调
第二个参数，reject 时的回调
catch
捕获 Promise 状态为 reject 时的结果
then的第二个参数失效
链式调用
当处于Promise对象的时候，可以多次调用实例方法（和 jQuery 链式调用原理相同）
then 和 catch 会返回一个 Promise 对象
也可以手动返回一个 Promise 对象
之后的状态由这个 Promise 决定
常用 API
finally
不管 Promise 对象结果如何都会执行这个回调
all
统一返回所有成功状态的结果
返回第一个失败状态的结果
race
谁先成功先执行谁
async 函数
理解
同步方式处理异步
异步编程的一种解决方案
generator 的语法糖
基本使用
任何函数前面加上 async
默认返回一个promise
也可以手动抛出一个错误使状态变为 reject
return 方法相等于将状态改变为 resolve
可以通过 then 来获取返回的结果
await 命令
await 必须在 async 函数里出现
后跟任意值
直接返回
后跟 Promise 对象
获取对象的执行结果
但会照成一定时间的阻塞
要得到promise的结果
错误处理
使用 try...catch... 捕获错误
直接在 Promise 对象后面使用 catch方 法来捕获
收藏
收藏
0 条评论
回复 删除
下一页
