通过数组迭代设置对象键值对

Posted 2023-02-22

【中文标题】通过数组迭代设置对象键值对

【英文标题】：Setting up object key-value pairs via array iteration

【发布时间】：2018-12-06 14:15:46

【问题描述】：

我正在尝试使用 for 循环创建以下数组。但是，我的结果是一个长度为24的数组，里面的所有对象都变成了 key: '23', text: '12:30', value: '12:30' ，而不是一个一个地迭代。谁能向我解释为什么每次迭代都会覆盖前一个迭代？

const timeOptions = [
   key: '0', text: '1:00', value: '1:00' ,
   key: '1', text: '1:30', value: '1:30' ,
   key: '2', text: '2:00', value: '2:00' ,
   key: '3', text: '2:30', value: '2:30' ,
   key: '4', text: '3:00', value: '3:00' ,
   key: '5', text: '3:30', value: '3:30' ,
   key: '6', text: '4:00', value: '4:00' ,
   key: '7', text: '4:30', value: '4:30' ,
   key: '8', text: '5:00', value: '5:00' ,
   key: '9', text: '5:30', value: '5:30' ,
   key: '10', text: '6:00', value: '6:00' ,
   key: '11', text: '6:30', value: '6:30' ,
   key: '12', text: '7:00', value: '7:00' ,
   key: '13', text: '7:30', value: '7:30' ,
   key: '14', text: '8:00', value: '8:00' ,
   key: '15', text: '8:30', value: '8:30' ,
   key: '16', text: '9:00', value: '9:00' ,
   key: '17', text: '9:30', value: '9:30' ,
   key: '18', text: '10:00', value: '10:00' ,
   key: '19', text: '10:30', value: '10:30' ,
   key: '20', text: '11:00', value: '11:00' ,
   key: '21', text: '11:30', value: '11:30' ,
   key: '22', text: '12:00', value: '12:00' ,
   key: '23', text: '12:30', value: '12:30' ,
];

这是我写的函数：

var array = Array(24).fill();
array[0] =  key: '0', text: '1:00', value: '1:00' ;

function transform(arr) 
  for (var i = 0; i < arr.length; i++) 
    arr[i].key = i.toString();
    if (i % 2 === 0 && i !== 0) 
      arr[i].text = Number(arr[i - 2].text.split(':')[0]) + 1 + ':00';
      arr[i].value = arr[i].text;
     else if (i % 2 !== 0) 
      arr[i].text = arr[i - 1].text.split(':')[0] + ':30';
      arr[i].value = arr[i].text;
    
  
  return arr;


transform(array);

【参考方案1】：

您的问题在于第一行：

var array = Array(24).fill();

本质上，您是在说创建一个包含一堆相同空对象的数组。所以，当你改变一个时，它会改变所有其他的。 您可以将其视为数组中的每个索引都指向存储空对象的同一内存位置。

对此的快速解决方法是使用 for 循环手动填充数组。看一下代码 sn-p 的工作示例：

var array = [];
for(var i = 0; i < 24; i++) 
  array.push();

array[0] =  key: '0', text: '1:00', value: '1:00' ;

function transform(arr) 
  for (var i = 0; i < arr.length; i++) 
    arr[i].key = i.toString();
    if (i % 2 === 0 && i !== 0) 
      arr[i].text = Number(arr[i - 2].text.split(':')[0]) + 1 + ':00';
      arr[i].value = arr[i].text;
     else if (i % 2 !== 0) 
      arr[i].text = arr[i - 1].text.split(':')[0] + ':30';
      arr[i].value = arr[i].text;
    
  
  return arr;


console.log(transform(array));

【参考方案2】：

您不需要额外的 for 循环来填充数组。相反，只需添加 arr[i] = ;在每次迭代开始时：

var array = Array(24);
array[0] =  key: '0', text: '1:00', value: '1:00' ;

function transform(arr) 
  for (var i = 0; i < arr.length; i++) 
    **arr[i] = ;**
    arr[i].key = i.toString();
    if (i % 2 === 0 && i !== 0) 
      arr[i].text = Number(arr[i - 2].text.split(':')[0]) + 1 + ':00';
      arr[i].value = arr[i].text;
     else if (i % 2 !== 0) 
      arr[i].text = arr[i - 1].text.split(':')[0] + ':30';
      arr[i].value = arr[i].text;
    
  
  return arr;