Javascript 在本地存储阵列中循环返回未定义的

上下文：我有一个从推送到本地存储的字符串项集合创建的数组。然后我循环遍历这些条目，从一组对象中找到一个匹配的值。它将带回匹配的对象

问题：只有在应用程序typescript文件中使用模拟数据时，我才能让它返回匹配的对象。但是，当我引入本地存储来替换推送值的模拟数组时，结果对象返回未定义的值。我无法理解的是，在执行映射之前，控制台会记录两个查询数组（包括本地存储的查询数组）是否已就绪，并且与模拟数据一样

我在上面创建了一个示例，它也显示了错误。我在示例中创建了两个循环。一个用于本地存储，一个用于模拟数据

我使用的是Angular应用程序，因此出于演示目的，我将其推送到构造函数中的本地存储，并在

ngOnInit（）

中填充数组。通常，本地存储将填充到另一个页面上，但为了便于演示，这代表了一个类似的场景，具有相同的结果

 export class AppComponent {
  constructor() {
    //passing data into local storage
    let data = ["1", "2"];
    const key = "item";
    let id = JSON.parse(localStorage.getItem(key)) || [];
    if (id.indexOf(data) == -1) {
      id.push(data);
      localStorage.setItem(key, JSON.stringify(id));
    }
  }

  array = [];
  arrayTwo = ["1", "2"];
  fieldOptions = [
    {
      id: "1",
      type: "I_am_RED",
      displayKey: "I_am_RED"
    },
    {
      id: "5",
      type: "I_am_RED",
      displayKey: "I_am_RED"
    },
    {
      id: "2",
      type: "I_am_BLUE",
      displayKey: "I_am_BLUE"
    },
    {
      id: "3",
      type: "I_am_BLUE",
      displayKey: "I_am_BLUE"
    },
    {
      id: "4",
      type: "I_am_GREEN",
      displayKey: "I_am_GREEN"
    }
  ];

  ngOnInit() {
    const key = "item";
    this.array.push(JSON.parse(localStorage.getItem(key)));

    //local storage loop
    for (const item of this.array) {
      let obj = this.fieldOptions.find(o => o.id === item);
      console.log("Array Object result getting local storage", obj);
    }

    //mock loop - mock array to simulate local storage
    for (const item of this.arrayTwo) {
      let obj = this.fieldOptions.find(o => o.id === item);
      console.log("ArrayTwo Object result", obj);
    }
  }
}

在构造函数中，“data”是一个字符串数组。indexOf（）将尝试比较对象标识，而不是内容，因此

id.indexOf（data）

将始终为-1 （因为

[“1”，“2”]=[“1”，“2”]

是错误的）

在ngOnInit中，您正在将一个数组推送到另一个数组，这实际上是您想要的吗？我猜您可能希望在构造函数中使用

this.array=this.array.concat（JSON.parse（localStorage.getItem（key））

，“数据”是字符串数组。indexOf（）将尝试比较对象标识，而不是内容，因此

id.indexOf（data）

将始终为-1 （因为

[“1”，“2”]=[“1”，“2”]

是错误的）

---

在ngOnInit中，您正在将一个数组推送到另一个数组，这实际上是您想要的吗？我猜您可能想使用

this.array=this.array.concat（JSON.parse（localStorage.getItem（key））

在localStorage中添加数组数组。请尝试以下代码：

import { Component } from "@angular/core";
import { forEach } from "@angular/router/src/utils/collection";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html"
})
export class AppComponent {
  constructor() {
    //passing data into local storage
    let data = ["1", "2"];
    const key = "item";
    let id = JSON.parse(localStorage.getItem(key)) || [];

    for (let i = 0; i < data.length; i++) {
      if (id.indexOf(data[i]) == -1) {
        id.push(data[i]);
      }
    }
    localStorage.setItem(key, JSON.stringify(id));
  }

  array = [];
  arrayTwo = ["1", "2"];
  fieldOptions = [
    {
      id: "1",
      type: "I_am_RED",
      displayKey: "I_am_RED"
    },
    {
      id: "5",
      type: "I_am_RED",
      displayKey: "I_am_RED"
    },
    {
      id: "2",
      type: "I_am_BLUE",
      displayKey: "I_am_BLUE"
    },
    {
      id: "3",
      type: "I_am_BLUE",
      displayKey: "I_am_BLUE"
    },
    {
      id: "4",
      type: "I_am_GREEN",
      displayKey: "I_am_GREEN"
    }
  ];

  ngOnInit() {
    const key = "item";
    this.array = JSON.parse(localStorage.getItem(key));
    console.log("get storage", this.array);

    for (const item of this.array) {
      let obj = this.fieldOptions.find(o => o.id === item);
      console.log("Array Object result getting local storage", obj);
    }

    for (const item of this.arrayTwo) {
      let obj = this.fieldOptions.find(o => o.id === item);
    }
  }
}

从“@angular/core”导入{Component}；
从“@angular/router/src/utils/collection”导入{forEach}”；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”
})
导出类AppComponent{
构造函数（）{
//将数据传递到本地存储器
让数据=[“1”，“2”]；
const key=“项目”；
让id=JSON.parse（localStorage.getItem（key））| |[]；
for（设i=0；io.id==item）；
log（“获取本地存储的数组对象结果”，obj）；
}
用于（此.arrayTwo的常量项）{
让obj=this.fieldOptions.find（o=>o.id==item）；
}
}
}

您正在localstorage中添加数组的数组。请尝试以下代码：

import { Component } from "@angular/core";
import { forEach } from "@angular/router/src/utils/collection";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html"
})
export class AppComponent {
  constructor() {
    //passing data into local storage
    let data = ["1", "2"];
    const key = "item";
    let id = JSON.parse(localStorage.getItem(key)) || [];

    for (let i = 0; i < data.length; i++) {
      if (id.indexOf(data[i]) == -1) {
        id.push(data[i]);
      }
    }
    localStorage.setItem(key, JSON.stringify(id));
  }

  array = [];
  arrayTwo = ["1", "2"];
  fieldOptions = [
    {
      id: "1",
      type: "I_am_RED",
      displayKey: "I_am_RED"
    },
    {
      id: "5",
      type: "I_am_RED",
      displayKey: "I_am_RED"
    },
    {
      id: "2",
      type: "I_am_BLUE",
      displayKey: "I_am_BLUE"
    },
    {
      id: "3",
      type: "I_am_BLUE",
      displayKey: "I_am_BLUE"
    },
    {
      id: "4",
      type: "I_am_GREEN",
      displayKey: "I_am_GREEN"
    }
  ];

  ngOnInit() {
    const key = "item";
    this.array = JSON.parse(localStorage.getItem(key));
    console.log("get storage", this.array);

    for (const item of this.array) {
      let obj = this.fieldOptions.find(o => o.id === item);
      console.log("Array Object result getting local storage", obj);
    }

    for (const item of this.arrayTwo) {
      let obj = this.fieldOptions.find(o => o.id === item);
    }
  }
}

从“@angular/core”导入{Component}；
从“@angular/router/src/utils/collection”导入{forEach}”；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”
})
导出类AppComponent{
构造函数（）{
//将数据传递到本地存储器
让数据=[“1”，“2”]；
const key=“项目”；
让id=JSON.parse（localStorage.getItem（key））| |[]；
for（设i=0；io.id==item）；
log（“获取本地存储的数组对象结果”，obj）；
}
用于（此.arrayTwo的常量项）{
让obj=this.fieldOptions.find（o=>o.id==item）；
}
}
}
[1,2]！=[1，2]
-不要忘记对象总是唯一的，数组就是对象。即使它包含相同的元素，也永远不会是相同的数组。您必须对对象进行更深入的比较，以查看它是否匹配。此外，不存在对象的JSON解析错误也可能导致此问题。请尝试
JSON.parse（localStorage.getItem | |“[]”
以确保始终至少返回一个有效数组。您应该这样做：
for（this.array的const项）{console.log（item）console.log（this.fieldOptions）
您匹配了错误的内容。请使用
项[0][0]
或
项[0][1]
然后将其与1或2匹配到
ID
，或者将项目[0]升级一级，循环并为每个项目执行。似乎这就是问题所在-我无法使用