Question

Vue.js 应用程序中的“TypeError: 使用过滤方法时无法将未定义或空转换为对象”

2019-06-20

13650

javascript vue.js

代码如下所示：

getSections () {
  if (!this.document) {
    return []
  }

  return Object.keys(this.document.Sections).filter(x => this.document.Sections[x])
}

this.document.Sections 是包含属性（也是对象）的对象。

如何摆脱这个错误？

Answer 1

正如消息所示，此错误是由于将 null 传递给 Object.keys 而导致的。请在控制台中尝试：

Object.keys(null)

VM198:1 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)

因此，在您的代码中 this.document.Sections 为 null 。

这里有一个修复它的选项。希望对您有所帮助。

function getSections() {
    return (this.document && this.document.Sections)
        ? Object.keys(this.document.Sections)
            .filter(x => this.document.Sections[x])
        : [];
}

在代码片段中查看：

var test = {
    document: {
        Sections: {
            a: 1,
            b: undefined,
            c: 3
        }
    }
};

function getSections() {
    return (test.document && test.document.Sections)
        ? Object.keys(test.document.Sections)
            .filter(x => test.document.Sections[x])
        : [];
}
console.log(getSections())

Answer 2

您需要检查 this.document.Sections 是否为空或未定义

getSections () {
  if (!this.document && !this.document.Sections) {
    return []
  }

  return Object.keys(this.document.Sections).filter(x => this.document.Sections[x])
}

Answer 3

[1,null,2,undefined,{},3].filter(x => isFinite(x) && x > 1) 生成 [2, 3]

[1,null,2,undefined,{},3].filter(x => x !== null && x != undefined) 生成 [1, 2, {}, 3]

只需在过滤器中指定正确的条件即可。