×

判断和解决TypeError: 'x' is not iterable报错信息的应用

作者:Web前端之家2021.04.21来源:Web前端之家浏览:226评论:0
关键词:js
微信公众号

微信公众号

一起来理解下判断和解决TypeError: 'x' is not iterable的报错信息的应用。报错不可怕,可怕的是你没找到方法,然后抓狂几小时没效果,啊哈哈。

错误提示:

TypeError: 'x' is not iterable (Firefox, Chrome)
TypeError: 'x' is not a function or its return value is not iterable (Chrome)

发生了什么错误?

这个值作为 for…of  的表达式右值,或者作为一个函数的参数,如 Promise.all 或者 TypedArray.from, 不是一个 可迭代对象.  一个可迭代对象可以是一个内置可迭代类型,如Array, StringMap, 一个 generator 生成结果, 或者一个实现了 可迭代协议 的对象。

示例

Iterating over Object properties

在JavaScript中, Object 是不可迭代的,除非它们实现了迭代协议. 因此, 你不能使用 for…of 来迭代对象的属性.

var obj = { 'France': 'Paris', 'England': 'London' };
for (let p of obj) { // TypeError: obj is not iterable
    // …
}

做为替代你必须使用 Object.keysObject.entries 来迭代对象的属性或属性值。

var obj = { 'France': 'Paris', 'England': 'London' };
// 迭代属性名称:
for (let country of Object.keys(obj)) {
    var capital = obj[country];
    console.log(country, capital);
}

for (const [country, capital] of Object.entries(obj))
    console.log(country, capital);

这次case的另外一个选择是使用 Map:

var map = new Map;
map.set('France', 'Paris');
map.set('England', 'London');
// Iterate over the property names:
for (let country of map.keys()) {
    let capital = map[country];
    console.log(country, capital);
}

for (let capital of map.values())
    console.log(capital);

for (const [country, capital] of map.entries())
    console.log(country, capital);

Iterating over a generator

Generators 是用来生成可迭代对象的函数。

function* generate(a, b) {
  yield a;
  yield b;
}

for (let x of generate) // TypeError: generate is not iterable
    console.log(x);

当它没有被调用, 这个 Function 相应的是可调用的,但是不可迭代。 调用 generator 生成一个可迭代对象,该对象将迭代在生成器执行期间生成的值。

function* generate(a, b) {
    yield a;
    yield b;
}

for (let x of generate(1,2))
    console.log(x);

Iterating over a custom iterable

可以使用Symbol.iterator 方法去实现一个自定义迭代器。你必须确定自定义的迭代器方法返回一个迭代器对象,即它必须有一个next()。

const myEmptyIterable = {
    [Symbol.iterator]() {
        return [] // [] is iterable, but it is not an iterator -- it has no next method.
    }
}

Array.from(myEmptyIterable);  // TypeError: myEmptyIterable is not iterable

下面是正确用法:

const myEmptyIterable = {
    [Symbol.iterator]() {
        return [][Symbol.iterator]()
    }
}

Array.from(myEmptyIterable);  // []

差不多这些内容了,大家试试吧。

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/baocuo20210421dfsdf.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    红红火火恍恍惚惚...

  • 跨境电商运营

    谢谢站长的文章已经解决问题了...

  • 跨境电商运营

    非常不错的文章下次还会再来!...

  • Web前端之家

    可以的,有时间会发些关于SEO相关的文章~...

  • s4f

    SEO很难啊,小编多发点类似文章吧!...

  • Web前端之家

    应该没什么问题吧,等待官宣,毕竟还没正式公开这个版本。...

  • 这个版本,能不能作为个人系统使用,有没有什么不同...

  • Web前端之家

    现在基本都是jsonp的呀,json很少,不过处理方式都差不多。如有问题加QQ群。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.7 Valyria