（角度5）-为什么打字稿的for只接受最后一个数字

Question

我正在使用angular 5，并且我的组件中有两个数组：

数据数组

data = [{...},{...}]

数字数组

inputData = [{1,2,3},{4,5,6}]

所以这是因为我想用data内的值来更改inputData数组内的某些值。

为此，我正在使用这样的迭代器：

for (let x in this.data) {
  this.result = this.data[x].ranges;

  for (let y in this.result) {

    for (let z of this.inputData) {
      this.data[x].ranges[y].ph = z;
    }
  }
}

问题是因为for迭代器进行了所有操作以更改该值，但是当我放置console.log(data)时，数据数组仅具有inputData的最后一个值（3）：

    [ 
      { "name": "Low", "ph": 3, "day": 0 },  <- Check the ph value
      { "name": "Medium", "ph": 3, "day": 0 }, <- Check the ph value
      { "name": "High", "ph": 3, "day": 0 }  <- Check the ph value
    ]

我创建了一个堆栈闪电来显示执行中的问题（Link to stackblitz）

Answer 1

将in更改为of。

'of'遍历对象（例如数组）。

'in'遍历对象属性。

这里有两个例子：

此外，我看着您的堆叠闪电……逻辑并不完全正确。试试这个：

  constructor() {
    for (let x of this.data) {
      this.result = x.ranges;

      for (let y in this.result) {
          this.result[y].ph = this.inputValues[y];
      }
    }
  }

这是您的堆叠闪电战的一个分支：https://stackblitz.com/edit/angular-ckdrqe?file=src/app/app.component.ts

您的原始代码：

for (let x in this.data) {
  this.result = this.data[x].ranges;

  for (let y in this.result) {

    for (let z of this.inputValues) {
      this.data[x].ranges[y].ph = z;
    }
  }
}

第一个循环是按索引遍历数据。如上面我的代码副本所示，按值完成此操作要容易得多。

第二个循环按索引循环遍历所有结果...然后针对每个结果更新.ph 倍次，因为在该循环中您循环遍历了所有inputValues。这就是为什么它总是产生最后一个值的原因。

Answer 2

javascript / typescript中的forin和for之间有区别。 forin与C＃或PHP中的foreach不同。

let myObject = {a: 1, b: 2, c: 3};
for(let keys in myObject) {
  // goes through all the keys of an object (i.e. a,b,c)
}

let myArray = [1,2,3];
for(let i = 0; i < myArray.length; i++) {
  // goes through the indexes of an enumerable array (i.e. 0,1,2)
}
// Alternatively, you could also use 
myArray.forEach((value, index, array) => {
   // lists all the values  
}

似乎您还没有完全了解forin。去检查文档：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

https://www.w3schools.com/js/js_loop_for.asp

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach