189 8069 5689
本篇内容主要讲解“es6的for of可不可以遍历对象”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“es6的for of可不可以遍历对象”吧!
目前创新互联公司已为上千的企业提供了网站建设、域名、网络空间、网站托管、服务器托管、企业网站设计、蓝田网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
es6的“for of”不能遍历对象。原因：ES6中引入了Iterator接口，只有提供了Iterator接口的数据类型才可以使用“for-of”来循环遍历；而普通对象默认没有提供Iterator接口，因此无法用“for-of”来进行遍历。
本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。
随着前端的不断发展，光循环就出现了好多种方法，for、forEach、do..while、for...in等等，不过这些循环也都各有各的应用场景和优缺点。
ES6又为我们提供了新的循环方法for...of，它可以循环字符串、数组及其他类数组对象，那作为最普遍存在的Object对象，按理，可以循环？
我们看一下下方的代码示例：
{
// 迭代数组
const iterable = ['a', 'b'];
for (const value of iterable) {
console.log(value);
}
// output: a b
}
{
// 普通对象
const obj = {
a: 'A',
b: 'B'
}
for(const item of obj){
console.log(item)
}
// Uncaught TypeError: obj is not iterable
}oh no，报错了：Uncaught TypeError: obj is not iterable。提示obj是不可迭代的，显然直接用for...of去遍历Object对象是不行的。
那么可以遍历大部分数据结构的for...of为何不能遍历Object对象？
原因：
ES6 中引入了 Iterator，只有提供了 Iterator 接口的数据类型才可以使用 for-of 来循环遍历，而 Array、Set、Map、某些类数组如 arguments 等数据类型都默认提供了 Iterator 接口，所以它们可以使用 for-of 来进行遍历。
而对于普通的对象，for...of结构不能直接使用，会报错，提示obj is not iterable，也就是说普通对象默认没有Iterator接口，必须部署了 Iterator 接口后才能使用。
怎么解决？让for-of 遍历对象
那么原因清楚了，该怎么解决呢？能不能为对象已经其它的一些数据类型提供 Iterator 接口呢
答案是可以的，ES6 同时提供了 Symbol.iterator 属性，只要一个数据结构有这个属性，就会被视为有 Iterator 接口，接着就是如何实现这个接口了，如下就是一个最简实现：
newObj[Symbol.iterator] = function(){
let index = 0
, self = this
, keys = Object.keys( self )
;
return {
next(){
if( index < keys.length ){
return {
value: self[keys[index++]]
, done: false
};
}
else{
return {
value: undefined
, done: true
}
}
}
};
};仔细看一下发现就会发现 Symbol.iterator 接口其实是一个 Generator 函数，那么就可以简化代码：
newObj[Symbol.iterator] = function* (){
let keys = Object.keys( this )
;
for(let i = 0, l = keys.length; i < l; i++){
yield this[keys[i]];
}
}
for(let v of newObj){
console.log( v );
}
// 输出结果
// 5
// 6值得注意的是 Object.keys 碰巧解决了之前 for-in 遇到的继承问题
这样满足了我们的期望，使用 for-of 来遍历对象，但是好像哪里不对，我们遍历对象时一般都是期望同时输出 key 和 value 的，这样调整一下代码
newObj[Symbol.iterator] = function* (){
let keys = Object.keys( this )
;
for(let i = 0, l = keys.length; i < l; i++){
yield {
key: keys[i]
, value: this[keys[i]]
};
}
}
for(let v of newObj){
console.log( v );
}
// 输出结果
// {key: "e", value: 5}
// {key: "f", value: 6}这样返回了一个对象，似乎又很不舒服，我们能不能尝试一些解构赋值呢。。。
for(let {key, value} of newObj){
console.log(key, value );
}
// 输出结果
// e 5
// f 6这样似乎非常完美了。。。
扩展知识：for-of和其他循环的区别
| 循环名称 | 循环对象 | 是否可中断循环 | 是否有返回值 |
|---|---|---|---|
for | for循环体的length | 可以 | 无返回值 |
forEach | 仅可循环数组、map、set等，不可循环字符串、普通对象 | 不可以 | 无返回值 |
do...while | 满足某种条件，则可一直循环，至少循环一次 | 可以 | 无返回值 |
while | 满足某种条件，则可一直循环 | 可以 | 无返回值 |
map | 组成新的数组成员，仅可循环数组，不可循环字符串、普通对象，set、map | 不可中断 | 返回新数组，不影响原数组 |
filter | 过滤数组成员，仅可循环数组，不可循环字符串、普通对象，set、map | 不可中断 | 返回新数组，不影响原数组 |
for...in | 可循环数组、对象，不可循环map、set。可遍历数字键名，还可遍历手动添加的其他键，甚至包括原型链上的键 | 可以 | 无返回值 |
for...of | 循环可迭代的对象，不可循环普通对象（统一数据结构遍历） | 可以 | 无返回值 |
到此，相信大家对“es6的for of可不可以遍历对象”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！