Angular Typescript 将对象推入数组，理解错误答案

【问题标题】：Angular Typescript Push Object into Array, Making Sense of ErrorsAngular Typescript 将对象推入数组，理解错误
【发布时间】：2021-04-05 03:51:47
【问题描述】：

所以我试图在我的应用程序中使用 windows.localstorage 创建一个对象数组。

export class MyListComponent implements OnInit {

  public myStorage = window.localStorage;
  public list : any [] = [];
  public empty = true;

  constructor() { }

  ngOnInit(): void {

    for(var k in window.localStorage) {
      var temp = this.myStorage[k].split(",");
      console.log(temp);
      if(temp.length == 4) {
        let item = {
          id: k,
          type: temp[1]
        }
        this.empty = false;
        this.list.push(item);
        console.log(item);
      }
    }
    console.log(this.list);
  }

}

由于某种原因，最后一行 console.log(this.list) 似乎没有工作，或者换句话说，没有添加任何内容。我不确定为什么会这样，因为所有其他控制台日志似乎都在工作，例如 console.log(temp) 和 console.log(item)。我的控制台还显示以下错误：

ERROR TypeError: this.myStorage[k].split is not a function at MyListComponent.ngOnInit

这是为什么呢？如果没有成功拆分，则不会创建 temp。如何将我的项目对象添加到我的列表数组中，为什么 this.myStorage.split 会出现类型错误？

【问题讨论】：

标签： javascript arrays angular typescript

【解决方案1】：

您可以尝试如下。此外，不建议对 localStorage 等这类实例使用 for...in 循环，因为它会迭代所有可枚举属性，而不仅仅是自己的属性。

Object.keys(window.localStorage).forEach(k => {
    const value = window.localStorage[k];
    if (value) {
        var temp = value.split(",");
        console.log(temp);
        if (temp.length == 4) {
            let item = {
                id: k,
                type: temp[1]
            }
            this.empty = false;
            this.list.push(item);
            console.log(item);
        }
    }
});

【讨论】：

谢谢，成功了。我对 Angular 和所有这一切还是很陌生，所以我很困惑为什么我的代码不起作用。老实说，我仍然对它为什么有效以及为什么我的无效感到有些困惑，但我想这可能是语法的设计方式。
你直接调用 split() 没有空检查 "this.myStorage[k].split(",");"，这会有所不同。一旦它中断（抛出异常）该线程的执行将在那里自行停止，除非您使用 try...catch() 处理该异常。 localStorage 有可能只有没有值的键。
localStorage 也有一个继承的属性'length'，它返回数字，你使用 for...in 循环没有字符串检查，直接使用 this.myStorage[k].split(",") 将中断编码。我相信这就是你的情况。

【解决方案2】：

您不能对来自 'window.localStorage'( Storage {editorLastConnected: "1617595775", editorHasEmittedBundle: "true"} ) 的变量使用 'split' 函数。

在您的第一次 for 循环迭代中，您的 temp 变量将保存没有 ',' 的 'editorLastConnected' 的值，并且不能使用 'split' 函数。

在for循环迭代的第二次迭代中。您的临时变量将保存没有 ',' 的 'editorHasEmittedBundle' 的值，并且不能使用 'split' 函数。

所以会抛出错误。

【讨论】：