个人博客

介绍

TIP

本篇记录 ES6 在实际开发中用到的一些新特性，更加完整版的请移步阮老师的 ES6 教程open in new window

let 和 const

  • ES6 新增加了两个重要的 JavaScript 关键字: let 和 const
  • let 声明的变量只在 let 命令所在的代码块内有效
  • const 声明一个只读的常量，一旦声明，常量的值就不能改变

let

  • 作用：与 var 类似, 用于声明一个变量
  • 特点：只在块级作用域有效，不能重复什么，不会预处理，不存在变量提升

代码块内有效

// let 是在代码块内有效，var 是在全局范围内有效
{
	let a = 0
	var b = 1
}
a // ReferenceError: a is not defined
b // 1

不能重复声明

// let 只能声明一次 var 可以声明多次
let a = 1
let a = 2
var b = 3
var b = 4
a // Identifier 'a' has already been declared
b // 4

不存在变量提升

// let 不存在变量提升，var 会变量提升
console.log(a) // ReferenceError: Cannot access 'a' before initialization
let a = "apple"

console.log(b) //undefined
var b = "banana"

const

  • 作用：定义一个只读变量，定义之后不能改变。意味着，一旦声明必须初始化，否则会报错
  • 特点：与 let 相似，多了一个不能修改
  • 应用：保存不用改变的数据，比如常量和引用地址不变的引用数据类型

基本用法

const PI = "3.1415926";
PI  // 3.1415926

const MY_AGE;  // SyntaxError: Missing initializer in const declaration

暂时性死区

var PI = "a"
if (true) {
	console.log(PI) // ReferenceError: Cannot access 'PI' before initialization
	const PI = "3.1415926"
}

ES6 明确规定，代码块内如果存在 let 或者 const，代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内，在声明变量 PI 之前使用它会报错

模板字符串

  • 主要用于简化字符串的拼接，也可以来定义多行字符串
  • 模板字符串必须用 `` 包含
  • 变化的部分使用${xxx}定义
  • 模板字符串中的换行和空格都是会被保留的
let obj = {
	name: "test",
	age: 41,
}
// 不用模板字符串的拼接
console.log("我叫:" + obj.name + ", 我的年龄是：" + obj.age)
// 模板字符串的拼接
console.log(`我叫:${obj.name}, 我的年龄是：${obj.age}`))

解构赋值

  • 解构赋值是对赋值运算符的扩展
  • 是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值

数组解构

基本用法

let arr = ["abc", 23, true]
let [a, b, c, d] = ["abc", 1, true]
console.log(a, b, c, d) // abc 1 true undefined
// a = abc
// b = 1
// c = true
// d = undefined

可嵌套

let [a, [[b], c]] = [1, [[2], 3]]
console.log(a, b, c) // 1 2 3
// a = 1
// b = 2
// c = 3

可忽略

let [a, , b] = [1, 2, 3]
console.log(a, b) // 1 3
// a = 1
// b = 3

不完全解构

let [a = 1, b] = []
console.log(a, b) // 1 undefined
// a = 1
// b = undefined

剩余运算符

let [a, ...b] = [1, 2, 3]
console.log(a, b) // 1 [2, 3]
//a = 1
//b = [2, 3]

对象解构

基本用法

let { foo, bar } = { foo: "aaa", bar: "bbb" }
console.log(foo, bar)
// foo = 'aaa'
// bar = 'bbb'

let { baz: val } = { baz: "ddd" }
console.log(val)
// val = 'ddd'

剩余运算符

let { a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 }
console.log(a, b, rest)
// a = 10
// b = 20
// rest = {c: 30, d: 40}

形参赋值

function test({ name, age }) {
	console.log(name, age) // name 1
}
let obj = { name: "name", age: 1 }
test(obj)
// name = name
// age = 1

三点运算符

函数的不定参数

  • 三点不定参数也称为 rest(可变)参数
  • 用来取代函数的 arguments 但比 arguments 灵活,只能是最后部分形参参数
function foo(...args) {
	console.log(args) // 数组：[2, 65]
	// 数组可遍历
	args.forEach((item, index) => {
		console.log(item, index)
		// 2 0
		// 65 1
	})
}
foo(2, 65)

数组扩展运算符

  • 解构数组
  • 复制数组，浅拷贝
  • 合并数组
let arr = [1, 6]
let arr1 = [2, 3, 4, 5]
// 复制数组
console.log([...arr]) // [1, 6]
// 解构数组
console.log(...arr) // 1 2 3 4 5 6
// 合并数组
arr = [...arr, ...arr1]
console.log(arr) // [1, 2, 3, 4, 5, 6]

对象扩展运算符

  • 拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象
  • 可用于合并两个对象
  • 此运算符属于浅拷贝，仅对引用数据类型的第一层进行了拷贝，再深就不会拷贝了
// 对象拷贝
let person = { name: "Amy", age: 15, num: { arr: [1, 2] } }
let someone = { ...person }
person.num.arr = [1]
// 浅拷贝：只拷贝了第一层引用数据类型
console.log(someone) // {name: "Amy", age: 15, num: { arr: [1]}}

// 可用于合并两个对象
let age = { age: 15 }
let name = { name: "Amy" }
let test = { ...age, ...name }
console.log(test) // {age: 15, name: "Amy"}

形参默认值

  • 当不传入参数的时候默认使用形参里的默认值
  • 只有在未传递参数，或者参数为 undefined 时，才会使用默认参数，null 值被认为是有效的值传递
  • 使用函数默认参数时，不允许有同名参数
function fn(x = 1, y = "y", z = "z", m = "m") {
	console.log(x, y, z, m) // x null z m
}
fn("x", null, undefined)

箭头函数

  • 作用: 定义匿名函数
  • 基本语法:
    1. 没有参数: () => console.log('xxxx')
    2. 一个参数: i => i+2 ()可以省略
    3. 大于一个参数: (i,j) => i+j
    4. 函数体不用大括号: 默认返回结果
    5. 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回
  • 箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象
  • 不可以作为构造函数，也就是不能使用 new 命令，否则会报错
// 形参的情况
// 1、没有形参的时候
let fun1 = () => console.log("我是箭头函数")
fun1()

// 2、只有一个形参的时候，()可以省略
let fun2 = (a) => console.log(a)
fun2("aaa")

// 3、两个及两个以上形参的时候，()不能省略
let fun3 = (x, y) => console.log(x, y)
fun3(22, 33)

// 函数体的情况
// 4、函数体只有一条语句或者表达式的时候，{}可以省略
// 》会自动返回语句执行的结果或表达式的结果
let fun4 = () => console.log("箭头函数")
fun4()
let fun5 = (x, y) => x + y
console.log(fun5(24, 36))

// 5、函数体不止一条语句或者是表达式的情况，{}不能省略
let fun6 = (x, y) => {
	console.log(x, y)
	return x + y
}
console.log(fun6(35, 49))

字符串扩展

  • includes(str) : 判断是否包含指定的字符串
  • startsWith(str) : 判断是否以指定字符串开头
  • endsWith(str) : 判断是否以指定字符串结尾
  • repeat(count) : 重复指定次数，返回新的字符串，表示将字符串重复指定次数返回
let str = "abcdefghhikkkk"
console.log(str.includes("t")) // false
console.log(str.includes("a")) // true
console.log(str.startsWith("a")) // true
console.log(str.endsWith("k")) // true
console.log(str.repeat(1)) // abcdefghhikkkk

数值扩展

  • 二进制与八进制数值表示法: 二进制用 0b, 八进制用 0o
  • Number.isFinite(i) : 判断是否是有限大的数
  • Number.isNaN(i) : 判断是否是 NaN
  • Number.isInteger(i) : 判断是否是整数
  • Number.parseInt(str) : 将字符串转换为对应的整数
  • Number.parseFloat(i)：将字符串转换为对应的浮点数
  • Math.trunc(i) : 直接去除小数部分
console.log(0b1010) // 10
console.log(0o56) // 46
console.log(Number.isFinite(Infinity)) // false
console.log(Number.isNaN(NaN)) // true
console.log(Number.isInteger(1.0)) // true
console.log(Number.parseInt("123abc")) // 123
console.log(Number.parseFloat("123.45#")) // 123.45
console.log(Math.trunc(1.234)) // 1

数组扩展

  • Array.from(v): 将类数组对象或可遍历对象转换为真数组
  • Array.of(v1, v2, v3): 将一系列参数值转换成数组
  • find(): 找出第一个满足条件返回 true 的元素
  • findIndex(): 找出第一个满足条件返回 true 的元素下标
  • fill(): 用给定一定范围的值填充数组
  • copyWithin()：将一定范围索引的数组元素修改为此数组另一指定范围索引的元素
  • entries(): 遍历键值对
  • keys(): 遍历键名
  • values()：遍历键值
  • includes()：数组是否包含指定的值
  • flat()：将嵌套数组转为一维数组
// Array.from：将类数组转为数组
let arrayLike = {
	"0": "a",
	"1": "b",
	"2": "c",
	length: 3,
}
let arr2 = Array.from(arrayLike)
console.log(arr2) // ["a", "b", "c"]

// Array.of：参数值转为数组
let arr = Array.of(1, 4, "abc", true)
console.log(arr) // [1, 4, "abc", true]

// find：返回大于3的第一个元素
let arr3 = [2, 3, 4, 2, 3, 5]
let result3 = arr3.find((item, index) => {
	return item > 3
})
console.log(result3) // 4

// findIndex：返回大于3的第一个元素的下标值
let arr4 = [2, 3, 4, 2, 3, 5]
let result4 = arr4.findIndex((item, index) => {
	return item > 3
})
console.log(result4) // 2

// fill：用给定值填充数组
let arr5 = ["a", "b", "c"].fill(7)
console.log(arr5) //  [7, 7, 7]
// 参数1：用来填充的值
// 参数2：被填充的起始索引
// 参数3(可选)：被填充的结束索引，默认为数组末尾
let arr6 = [1, 2, 3, 4].fill(0, 1, 2)
console.log(arr6.fill(0, 1, 2)) //[1, 0, 3, 4]

// copyWithin：一段元素修改为另一段元素
// 参数1：被修改的起始索引
// 参数2：被用来覆盖的数据的起始索引
// 参数3(可选)：被用来覆盖的数据的结束索引，默认为数组末尾
console.log([1, 2, 3, 4].copyWithin(0, 2, 4)) // [3, 4, 3, 4]
// 参数1为负数表示倒数
console.log([1, 2, 3, 4].copyWithin(-2, 0)) // [1, 2, 1, 2]
console.log([1, 2, , 4].copyWithin(0, 2, 4)) // [, 4, , 4]

// entries：遍历键值对
for (let [key, value] of ["a", "b"].entries()) {
	console.log(key, value)
}
// 0 "a"
// 1 "b"

// keys：遍历键名
for (let key of ["a", "b"].keys()) {
	console.log(key)
}
// 0
// 1

// values：遍历键值
for (let value of ["a", "b"].values()) {
	console.log(value)
}
// "a"
// "b"

// includes：数组是否包含指定的值
// 参数1：包含的指定值
console.log([1, 2, 3].includes(1)) // true
// 参数2：可选，搜索的起始索引，默认为0
console.log([1, 2, 3].includes(1, 2)) // false

// flat：将嵌套数组转为一维数组
console.log([1, [2, 3]].flat()) // [1, 2, 3]
// 指定转换的嵌套层数
console.log([1, [2, [3, [4, 5]]]].flat(2)) // [1, 2, 3, [4, 5]]
// 不管嵌套多少层
console.log([1, [2, [3, [4, 5]]]].flat(Infinity)) // [1, 2, 3, 4, 5]
// 自动跳过空位
console.log([1, [2, , 3]].flat()) // [1, 2, 3]

对象扩展

  • 对象属性和方法的简写
  • Object.is(value1, value2)
  • Object.assign(target, source_1, ···)
  • 直接操作 proto 属性
// 简化的对象写法
let x = 1
let y = 2
let point = {
	// 省略同名的属性值
	x,
	y,
	// 省略方法的function
	setX(x) {
		this.x = x
	},
}

// Object.is(): 用来比较两个值是否严格相等，与（===）基本类似
console.log(Object.is(0, -0)) // false
console.log(Object.is(NaN, NaN)) // true
Object.is("q", "q") // true
Object.is(1, 1) // true
Object.is([1], [1]) // false
Object.is({ q: 1 }, { q: 1 }) // false

// Object.assign(): 用于将源对象的所有可枚举属性复制到目标对象中
// assign 的属性拷贝是浅拷贝
let obj = {}
let obj1 = { username: "av", age: 42 }
let obj2 = { sex: "man" }
Object.assign(obj, obj1, obj2)
console.log(obj) // { age: 42, sex: "man", username: "av"}

//直接操作 **proto** 属性
let obj3 = {}
let obj4 = { qian: 50000 }
obj3.__proto__ = obj4
console.log(obj3) // {__proto__: { qian: 50000 }}
console.log(obj3.qian) // 50000

Symbol

  • ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值
  • 它是 JavaScript 语言的第七种数据类型，已有：String, Number, boolean, null, undefined, 对象
  • 特点：
    1. Symbol 属性对应的值是唯一的，解决命名冲突问题
    2. Symbol 值不能与其他数据进行计算，包括同字符串拼串
    3. for in, for of 遍历时不会遍历 symbol 属性
// 普通用法，不能new，直接使用
console.log(Symbol()) // Symbol()
let sy = Symbol("KK")
console.log(sy) // Symbol(KK)

// 作为属性名
let symbol = Symbol()
let obj = { username: "kobe", age: 39 }
obj[symbol] = "hello"
console.log(obj) // {username: "kobe", age: 39, Symbol(): "hello"}

// 可以去定义成常量
const KEY = Symbol("key")
console.log(KEY) // Symbol(key)

Set 和 Map

Set

  • Set 对象用于存储任何类型的唯一值，无论是原始值或者是对象引用，都不可重复
  • Set 是一个容器，无序且不可重复的多个 value 的集合体
  • Set 一个构造函数，使用需要用 new

实例属性和方法

  • Set.prototype.constructor：构造函数，默认就是 Set 函数
  • Set.prototype.size：返回 Set 实例的成员总数
  • Set.prototype.add(value)：添加某个值，返回 Set 结构本身
  • Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
  • Set.prototype.has(value)：返回一个布尔值，表示该值是否为 Set 的成员
  • Set.prototype.clear()：清除所有成员，没有返回值
  • Set.prototype.keys()：返回键名的遍历器
  • Set.prototype.values()：返回键值的遍历器
  • Set.prototype.entries()：返回键值对的遍历器
  • Set.prototype.forEach()：使用回调函数遍历每个成员
// 创建实例，可以不传参
let set = new Set([1, 2, 3, 4, 5, 1, 2])
console.log(set) // Set(5) {1, 2, 3, 4, 5} 这里体现了值的唯一性

// size属性：返回长度
console.log(set.size) // 5

// add方法：新增
set.add(7)
console.log(set) // Set(6) {1, 2, 3, 4, 5, 6}

// delete方法：删除
console.log(set.delete(1)) // true
console.log(set) // Set(5) {2, 3, 4, 5, 7}

//has方法：判断有无某个元素
console.log(set.has(8)) // false
console.log(set.has(7)) // true

// clear方法：清除全部元素
set.clear()
console.log(set) // Set(0) {}

let set2 = new Set(["red", "green"])
// keys方法：返回键名的遍历器
console.log(set2.keys()) // SetIterator {"red", "green"}
for (let item of set2.keys()) {
	console.log(item)
}
// red
// green

// values方法：返回键值的遍历器
console.log(set2.values()) // SetIterator {"red", "green"}
for (let item of set2.values()) {
	console.log(item)
}
// red
// green

// entries方法：返回键值对的遍历器
console.log(set2.entries()) // SetIterator {"red" => "red", "green" => "green"}
for (let item of set2.entries()) {
	console.log(item)
}
// ["red", "red"]
// ["green", "green"]

// forEach方法：使用回调函数遍历每个成员
set2.forEach((value, key) => console.log(key + " : " + value))
// red : red
// green : green

Map

  • Map 对象保存键值对，任何值(对象或者原始值) 都可以作为一个键或一个值
  • Map 是一个有序集合体，遍历顺序就是插入顺序
  • Map 和 Object 的区别
    1. 一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值
    2. Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是
    3. Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算
    4. Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突

实例属性和方法

  • Map.prototype.constructor：构造函数，默认就是 Map 函数
  • Map.prototype.size：返回 Map 结构的成员总数
  • Map.prototype.set(key, value)：添加某个值，返回 Map 结构本身
  • Map.prototype.get(key)：根据 key 获取对应的键值，如果找不到 key，返回 undefined
  • Map.prototype.has(key)：返回一个布尔值，表示某个键是否在当前 Map 对象之中
  • Map.prototype.delete(key)：删除某个键，返回 true，如果删除失败，返回 false
  • Map.prototype.clear()：清除所有成员，没有返回值
  • Map.prototype.keys()：返回键名的遍历器
  • Map.prototype.values()：返回键值的遍历器
  • Map.prototype.entries()：返回键值对的遍历器
  • Map.prototype.forEach()：遍历 Map 的所有成员
// 创建实例
const map = new Map([
	["name", "张三"],
	["title", "Author"],
])
console.log(map) // Map(2) {"name" => "张三", "title" => "Author"}

// size属性：返回长度
console.log(map.size) // 2

// add方法：新增
map.set("age", 18)
console.log(map) // Map(3) {"name" => "张三", "title" => "Author", "age" => 18}

// delete方法：删除
console.log(map.delete("title")) // true
console.log(map) // Map(2) {"name" => "张三", "age" => 18}

//has方法：判断有无某个元素
console.log(map.has("name")) // true

// clear方法：清除全部元素
map.clear()
console.log(map) // Map(0) {}

const map2 = new Map([
	["F", "no"],
	["T", "yes"],
])
// keys方法：返回键名的遍历器
console.log(map2.keys()) // MapIterator {"F", "T"}
for (let item of map2.keys()) {
	console.log(item)
}
// F
// T

// values方法：返回键值的遍历器
console.log(map2.values()) // MapIterator {"no", "yes"}
for (let item of map2.values()) {
	console.log(item)
}
// no
// yes

// entries方法：返回键值对的遍历器
console.log(map2.entries()) // MapIterator {"F" => "no", "T" => "yes"}
for (let item of map2.entries()) {
	console.log(item)
}
// ["F", "no"]
// ["T", "yes"]

// forEach方法：使用回调函数遍历每个成员
map2.forEach((value, key) => console.log(key + " : " + value))
// F : no
// T : yes

Proxy 代理

语法

const p = new Proxy(target, handler)
  • target：一个目标对象(可以是任何类型的对象，包括数组，函数，另一个代理)
  • handler：一个对象，属性是函数，用于定义各种操作代理 p 的行为

简单 demo

let target = {
	name: "Tom",
	age: 24,
}
let handler = {
	get(target, key) {
		console.log("getting " + key)
		return target[key] // 不是target.key
	},
	set(target, key, value) {
		console.log("setting " + key)
		target[key] = value
	},
}
let proxy = new Proxy(target, handler)
proxy.name // 实际执行 handler.get
proxy.age = 25 // 实际执行 handler.set
// getting name
// setting age
console.log(proxy) // Proxy {name: "Tom", age: 25}
  • target 对象可以为空，这时需要先设值，再取值
  • handler 对象也可以为空，相当于不设置拦截操作，直接访问目标对象

###实例方法

  • get(target, propKey, receiver)：用于拦截 target 对象上 propKey 的读取操作
  • set(target, propKey, value, receiver)：用于拦截 target 对象上的 propKey 的赋值操作。如果目标对象自身的某个属性，不可写且不可配置，那么 set 方法将不起作用
  • has(target, propKey)：用于拦截 HasProperty 操作，即在判断 target 对象是否存在 propKey 属性时，会被这个方法拦截。此方法不判断一个属性是对象自身的属性，还是继承的属性。此方法不拦截 for ... in 循环
  • construct(target, args)：用于拦截 new 命令。返回值必须为对象
  • deleteProperty(target, propKey)：用于拦截 delete 操作，如果这个方法抛出错误或者返回 false ，propKey 属性就无法被 delete 命令删除
  • defineProperty(target, propKey, propDesc)：用于拦截 Object.definePro 若目标对象不可扩展，增加目标对象上不存在的属性会报错；若属性不可写或不可配置，则不能改变这些属性
  • getOwnPropertyDescriptor(target, propKey)：用于拦截 Object.getOwnPropertyD() 返回值为属性描述对象或者 undefined
  • getPrototypeOf(target)：主要用于拦截获取对象原型的操作，包括以下操作：
    1. Object.prototype.proto
    2. Object.prototype.isPrototypeOf()
    3. Object.getPrototypeOf()
    4. Reflect.getPrototypeOf()
    5. instanceof
  • isExtensible(target)：用于拦截 Object.isExtensible 操作。该方法只能返回布尔值，否则返回值会被自动转为布尔值
  • ownKeys(target)：用于拦截对象自身属性的读取操作，主要包括以下操作：
    1. Object.getOwnPropertyNames()
    2. Object.getOwnPropertySymbols()
    3. Object.keys()
    4. or...in
  • preventExtensions(target)： 拦截 Object.preventExtensions 操作。该方法必须返回一个布尔值，否则会自动转为布尔值
  • setPrototypeOf： 主要用来拦截 Object.setPrototypeOf 方法。返回值必须为布尔值，否则会被自动转为布尔值
  • Proxy.revocable()：用于返回一个可取消的 Proxy 实例
  • apply(target, ctx, args)：用于拦截函数的调用、call 和 reply 操作。target 表示目标对象，ctx 表示目标对象上下文，args 表示目标对象的参数数组

Reflect

  • Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法
  • Reflect 不是一个构造函数，因此它是不能用 new 构造的

###实例方法

  • Reflect.get(target, name, receiver)：用于查找并返回 target 对象的 name 属性
  • Reflect.set(target, name, value, receiver)：将 target 的 name 属性设置为 value。返回值为 boolean ，true 表示修改成功，false 表示失败。当 target 为不存在的对象时，会报错
  • Reflect.deleteProperty(target, property)：是 delete target[property] 的函数化，用于删除 target 对象的 property 属性，返回值为 boolean。如果 target 不是对象则会报错 TypeError
  • Reflect.construct(target, args)：等同于 new target(...args)
  • Reflect.getPrototypeOf(target)：用于读取 target 的 proto 属性。在 target 不是对象时不会像 Object 一样把 target 转为对象，而是会报错
  • Reflect.setPrototypeOf(obj, newProto)：用于设置目标对象的 prototype
  • Reflect.apply(func, thisArg, args)：等同于 Function.prototype.apply.call(func, thisArg, args) 。func 表示目标函数；thisArg 表示目标函数绑定的 this 对象；args 表示目标函数调用时传入的参数列表，可以是数组或类似数组的对象。若目标函数无法调用，会抛出 TypeError
  • Reflect.defineProperty(target, propertyKey, attributes)：用于为目标对象定义属性。如果 target 不是对象，会抛出错误
  • Reflect.getOwnPropertyDescriptor(target, propertyKey)：用于得到 target 对象的 propertyKey 属性的描述对象。在 target 不是对象时，会抛出错误表示参数非法，不会将非对象转换为对象
  • Reflect.isExtensible(target)： 用于判断 target 对象是否可扩展。返回值为 boolean 。如果 target 参数不是对象，会抛出错误
  • Reflect.preventExtensions(target): 用于让 target 对象变为不可扩展。如果 target 参数不是对象，会抛出错误
  • Reflect.ownKeys(target)：用于返回 target 对象的所有属性，等同于 Object.getOwnPropertyNames 与 Object.getOwnPropertySymbols 之和

Iterator

概念

iterator(迭代器)是一种接口机制，为各种不同的数据结构提供统一的访问机制

作用

  • 为各种数据结构，提供一个统一的、简便的访问接口
  • 使得数据结构的成员能够按某种次序排列
  • ES6 创造了一种新的遍历命令 for...of 循环，Iterator 接口主要供 for...of 消费

工作原理

  1. 创建一个指针对象(遍历器对象)，指向数据结构的起始位置
  2. 第一次调用 next 方法，指针自动指向数据结构的第一个成员
  3. 接下来不断调用 next 方法，指针会一直往后移动，直到指向最后一个成员
  4. 每调用 next 方法返回的是一个包含 value 和 done 的对象，{value: 当前成员的值,done: 布尔值}
  5. value 表示当前成员的值，done 对应的布尔值表示当前的数据的结构是否遍历结束
  6. 当遍历结束的时候返回的 value 值是 undefined，done 值为 false
// iterator迭代器原理代码
// 模拟指针对象(遍历器对象)
function myIterator(arr) {
	// 记录指针的位置
	let nextIndex = 0
	// iterator接口
	return {
		// 遍历器对象
		next: function () {
			return nextIndex < arr.length
				? {
						value: arr[nextIndex++],
						done: false,
				  }
				: {
						value: undefined,
						done: true,
				  }
		},
	}
}

// 准备一个数组
let arr = [1, 4, 5, "a"]
let iteratorObj = myIterator(arr)
console.log(iteratorObj.next()) // {done: false, value: 1}
console.log(iteratorObj.next()) // {done: false, value: 4}
console.log(iteratorObj.next()) // {done: false, value: 5}
console.log(iteratorObj.next()) // {done: false, value: "a"}
console.log(iteratorObj.next()) // {done: true, value: undefined}

可迭代的原生数据结构

  1. Aarray
  2. String
  3. arguments
  4. Set
  5. Map
  6. NodeList
// 将iterator接口部署到指定的数据类型上，可以使用for  of  去循环遍历
// 数组
let arr = [1, 4, 5, "a"]
for (const i of arr) {
	console.log(i)
}

// 字符串
let str = "abcdefg"
for (const i of str) {
	console.log(i)
}

// arguments
function fun() {
	for (const i of arguments) {
		console.log(i)
	}
}
fun(1, 2, 3, "abc")

for ... of 原理

  • 对象不能使用 for of 遍历
  • 等同于在指定的数据内结构上部署了 iterator 接口
  • 当使用 for of 去遍历某一个数据结构的时候，首先去找 Symbol.iterator，找到了就去遍历
  • 如果没有找到的话不能遍历，就报错：XX is not iterable
// Symbol.iterator 的原理
let targetData = {
	[Symbol.iterator]: function () {
		// 记录指针的位置
		let nextIndex = 0
		// iterator接口
		return {
			// 遍历器对象
			next: function () {
				return nextIndex < this.length
					? {
							value: this[nextIndex++],
							done: false,
					  }
					: {
							value: undefined,
							done: true,
					  }
			},
		}
	},
}

三点运算符和 yield*

  • 使用三点运算符，解构赋值，默认去调用 iterator 接口
  • yield*后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口
// 使用三点运算符，解构赋值，默认去调用iterator接口
let arr0 = [1, 6]
let arr1 = [2, 3, 4, 5]
arr0 = [1, ...arr1, 6]
console.log(arr0) // [1, 2, 3, 4, 5, 6]
console.log(...arr0) // 1 2 3 4 5 6

// yield*
let generator = function* () {
	yield 1
	yield* [2]
	yield 3
}
var iterator = generator()
console.log(iterator.next()) // {value: 1, done: false}
console.log(iterator.next()) // {value: 2, done: false}
console.log(iterator.next()) // {value: 3, done: false}
console.log(iterator.next()) // {value: undefined, done: true}

Class

  1. 通过 class 定义类/实现类的继承
  2. 在类中通过 constructor 定义构造方法
  3. 通过 static 来定义静态方法
  4. 通过 new 来创建类的实例
  5. 通过 extends 来实现类的继承
  6. 通过 super 调用父类的构造方法
  7. 重写从父类中继承的一般方法
// 定义人物方法类
class Person {
	// 类的构造方法
	constructor(name, age) {
		this.name = name
		this.age = age
	}
	// 类的一般方法
	showName() {
		console.log("调用父类的方法")
		console.log(this.name)
	}
	// 类的静态方法-可以被继承
	static hello() {
		console.log("静态方法")
	}
}
let person = new Person("kobe", 39)
console.log(person)
person.showName()

// 子类继承父类
class Son extends Person {
	constructor(name, age, salary) {
		super(name, age) // 调用父类的构造方法
		this.salary = salary
	}
	// 父类的方法重写
	showName() {
		console.log("调用子类的方法")
		console.log(this.name, this.salary)
	}
}
let son = new Son("wade", 36, 1000000)
console.log(son)
son.showName()

Module

请移步模块化章节

Promise

请移步异步章节

Generator

请移步异步章节

async

请移步异步章节