迭代器遍历过程
- 创建指针对象，指向 数据结构 起始位置
- 调用
next方法，指向 数据结构 下一个成员 - 重复2，直到指向 数据结构 结束位置
迭代器特性
- 凡带迭代器的，都可以通过
[...obj]转为数组 - 对象有迭代器（即对象某个属性进行了迭代处理），也可以通过
[...obj]转为数组 -
[...likeArr]可以代替Array.form(likeArr)
// dom类数组转数组
let DOMList = document.getElementsByTagName('p')
console.log([...DOMList]);
判断是否可迭代
通过判断
[Symbol.iterator]迭代器接口
let str = 'string'
let num = 123
if (str[Symbol.iterator]) {
console.log('字符串可迭代')
}
if (!num[Symbol.iterator]) {
console.log('数字不可迭代')
}
默认可迭代数据结构
线性数据结构，有迭代方法
- Array
- Set
- Map
- String
- arguments 对象
- NodeList 对象
对象属性→可迭代
对象本身不是线性数据结构，但是可以对其中的属性进行可迭代处理（比如请求到的数据列表）
对属性可迭代之后，就可以直接遍历结果啦
- 简单使用
// 简单使用
let res = {
status: 'Ok',
code: 200,
message: '请求成功',
list: ['刘秀', '项羽', '王勃'],
[Symbol.iterator]() {
let index = 0
return {
next: ()=> {
return {
value: this.list[index],
done: this.list.length == index++
}
}
}
}
}
let list = [...obj]
for (let n of res) {
console.log(n);
}
- 封装使用
function CreateSymbolIterator(attr) {
return function () {
let index = 0
return {
next: () => {
return {
// value: this[attr][index], // 不注释编辑器无法保持，只能临时注释，需手动反注释
done: this[attr].length == index++
}
}
}
}
}
// 存放数据
let obj = {
[Symbol.iterator]: CreateSymbolIterator('datas') // 可传入值位数组的属性
}
// 模拟请求结果
let res = {
code: 200,
message: 'Ok',
result: {
totle: 4,
datas: ['刘秀', '项羽', '王勃', '貂蝉']
}
}
// 合并或者继承
Object.assign(obj, res.result)
// 或者
// obj = {
// ...obj,
// ...res.result
// }
for (let n of obj) {
console.log(n); // '刘秀', '项羽', '王勃', '貂蝉'
}
let list = [...obj] // ["刘秀", "项羽", "王勃", "貂蝉"]
