如果用一句话概况:
for…of 不能循环普通对象 需要搭配Object.keys(),for…of 是es6引入修复es5 for…in 的不足,
for…in 都可以循环,循环的是key 推荐循环对象属性用for…in,循环数组用for…of.
显然本篇不会这么介绍就完事.
首先我们应该了解什么是迭代器以及生成器,继而去了解迭代对象,再去创建迭代循环,为自定义的迭代钩子去执行不同的语句
在 JavaScript 中，迭代器是一个对象，它定义一个序列，并在终止时可能返回一个返回值。 更具体地说，迭代器是通过使用 next() 方法实现 Iterator protocol 的任何一个对象，该方法返回具有两个属性的对象： value，这是序列中的 next 值；和 done ，如果已经迭代到序列中的最后一个值，则它为 true 。如果 value 和 done 一起存在，则它是迭代器的返回值。
可迭代对象
内置可迭代对象:String、Array、TypedArray、Map 和 Set，它们的原型对象都实现了 @@``iterator 方法。
迭代器可用于:
可以展开可迭代对象:初始化数组或者函数调用的参数列表
可以用于解构赋值
迭代map对象的时候 返回的是键值对
在for/of循环中可以直接使用解构赋值
只想循环键或者值用object key objectvalues操作可迭代对象类似array set map .
JavaScript迭代三种类型
- 可迭代对象
- 迭代器对象
- 迭代结果对象(保存每次迭代结果)
言归正传.
无论是for…in还是for…of语句都是迭代一些东西。 它们之间的主要区别在于它们的迭代方式。
for...of 语句遍历可迭代对象定义要迭代的数据
Object.prototype.objCustom = function() {}
Array.prototype.arrCustom = function() {}
const iterable = [3, 5, 7]
iterable.foo = 'hello'
for (const i in iterable) {
console.log(i) // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}
for (const i in iterable) {
if (iterable.hasOwnProperty(i)) {
console.log(i) // logs 0, 1, 2, "foo"
}
}
for (const i of iterable) {
console.log(i) // logs 3, 5, 7
}对于为什么使用for…in:MDN的官方解释是:
for ... in是为遍历对象属性而构建的，不建议与数组一起使用，数组可以用Array.prototype.forEach()和for ... of，那么for ... in的到底有什么用呢？它最常用的地方应该是用于调试，可以更方便的去检查对象属性（通过输出到控制台或其他方式）。
尽管对于处理存储数据，数组更实用些，但是你在处理有
key-value数据（比如属性用作“键”），需要检查其中的任何键是否为某值的情况时，还是推荐用
for ... in。
下面的函数接受一个对象作为参数。被调用时迭代传入对象的所有可枚举属性然后返回一个所有属性名和其对应值的字符串。
遍历对象
var obj = {a:1, b:2, c:3};
for (var prop in obj) {
console.log("obj." + prop + " = " + obj[prop]);
//console.log(`obj.${prop}=${obj[prop]}`);
}
// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"for of 不能直接遍历对象
var obj = {a:1, b:2, c:3};
for (var prop of obj) {
console.log("obj." + prop + " = " + obj[prop]);
//console.log(`obj.${prop}=${obj[prop]}`);
}
VM293:3 Uncaught TypeError: obj is not iterable
at <anonymous>:3:18配合object.keys.返回键值
const obj = {
a:1,
b:2,
c:3
}
for (let i of Object.keys(obj)){
console.log(obj[i])
}遍历数组
const arr = ['a','b','c']
for(let i in arr ){
console.log(i)
}
//1
//2
//3const arr = ['a','b','c']
for(let i of arr ){
console.log(i)
}
//a
//b
//c
