介绍
TIP
本篇记录 ES6 在实际开发中用到的一些新特性,更加完整版的请移步阮老师的 ES6 教程
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)
箭头函数
- 作用: 定义匿名函数
- 基本语法:
- 没有参数: () => console.log('xxxx')
- 一个参数: i => i+2 ()可以省略
- 大于一个参数: (i,j) => i+j
- 函数体不用大括号: 默认返回结果
- 函数体如果有多个语句, 需要用{}包围,若有需要返回的内容,需要手动返回
- 箭头函数体中的 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, 对象
- 特点:
- Symbol 属性对应的值是唯一的,解决命名冲突问题
- Symbol 值不能与其他数据进行计算,包括同字符串拼串
- 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 的区别
- 一个 Object 的键只能是字符串或者 Symbols,但一个 Map 的键可以是任意值
- Map 中的键值是有序的(FIFO 原则),而添加到对象中的键则不是
- Map 的键值对个数可以从 size 属性获取,而 Object 的键值对个数只能手动计算
- 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):主要用于拦截获取对象原型的操作,包括以下操作:
- Object.prototype.proto
- Object.prototype.isPrototypeOf()
- Object.getPrototypeOf()
- Reflect.getPrototypeOf()
- instanceof
- isExtensible(target):用于拦截 Object.isExtensible 操作。该方法只能返回布尔值,否则返回值会被自动转为布尔值
- ownKeys(target):用于拦截对象自身属性的读取操作,主要包括以下操作:
- Object.getOwnPropertyNames()
- Object.getOwnPropertySymbols()
- Object.keys()
- 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 消费
工作原理
- 创建一个指针对象(遍历器对象),指向数据结构的起始位置
- 第一次调用 next 方法,指针自动指向数据结构的第一个成员
- 接下来不断调用 next 方法,指针会一直往后移动,直到指向最后一个成员
- 每调用 next 方法返回的是一个包含 value 和 done 的对象,{value: 当前成员的值,done: 布尔值}
- value 表示当前成员的值,done 对应的布尔值表示当前的数据的结构是否遍历结束
- 当遍历结束的时候返回的 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}
可迭代的原生数据结构
- Aarray
- String
- arguments
- Set
- Map
- 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
- 通过 class 定义类/实现类的继承
- 在类中通过 constructor 定义构造方法
- 通过 static 来定义静态方法
- 通过 new 来创建类的实例
- 通过 extends 来实现类的继承
- 通过 super 调用父类的构造方法
- 重写从父类中继承的一般方法
// 定义人物方法类
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
请移步异步章节