在 JavaScript 中动态增长数组项答案

【问题标题】：Dynamically grow array item in JavaScript在 JavaScript 中动态增长数组项
【发布时间】：2023-01-12 19:54:44
【问题描述】：

假设我有 3 个项目，我想将它们一一添加到数组中。

首先，我传递abc，它在array中添加abc，第二次传递cde，然后array删除第一项并添加第二项cde。

但是，我想将它们添加为array={abc,cde,...}

看来我需要存储以前的值。第一次，当我添加 abc 时，它看起来像 array ={abc}。第二次，当我添加 cde 时，array 应该在添加新的 cde 之前存储以前的 abc 值，它看起来像 array ={abc,cde,..}。

请看这个截图：

没有我可以循环遍历并将它们添加到另一个数组中的项目数组。

这一行总是var array= Arr.push(Arr[0]);添加一项。

    var Arr ="";
    var TD;
    function AddData(sVal) {
    var AddRow = true;  
    sVal = Replace(sVal, "~", "%"); 
    Arr = sVal.split("^");                   
            TD.innerHTML = "<INPUT TYPE='HIDDEN' value='" + Arr[0] + "'>";                                  
            TD.innerHTML = Arr[0]; 
            var array= Arr.push(Arr[0]);
    }
}

【问题讨论】：

push 接受任意数量的 args 作为要推入数组的元素。所以例如：arr.push(...[1, 2, 3]); //arr: [1,2,3] ..它实现了将数组作为多个参数传播以传递给推送
不是答案，但您在某处缺少一个括号，您的function AddData 永远不会关闭。
@DiegoD，在某个特定时间，我只添加了一项，例如var array= Arr.push(Arr[0]);。如果我添加abc，它就会添加abc。看来我必须存储以前的值并添加新值。请给我一个答案。
嗨@NickG，抱歉更新了支架。谢谢
@testingtest 在我之前的评论中，我试图回答似乎是核心问题的问题。但是要解决您遇到的真正问题，您应该更加清楚。您共享的代码不清楚，并且使用了非常奇怪的策略。您正在处理 <tr> id！为什么？您正试图将数组的第一个元素推入数组中吗？为什么？如果您只是想将新行推入目标表，则该代码可以缩减为几行。我建议你只说出你的函数到底应该做什么，而不是问如何将组中的项目添加到数组中

标签： javascript arrays

【解决方案1】：

将值数组推入目标数组：

起初，您似乎需要将值列表推送到数组中。

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

push() 方法将一个或多个元素添加到数组的末尾，并且返回数组的新长度。

推（元素0）

推（元素0，元素1）

push(元素 0, 元素 1, /* … ,*/ 元素)
const target = [1, 2, 3];
const elementsToAdd = [4, 5, 6];
target.push(...elementsToAdd);

console.log(target); //[ 1, 2, 3, 4, 5, 6 ]
使用序列化字符串中的值向目标表添加新行：

为了进一步了解您的代码，我尝试重写您的addData 函数以限制其按照其名称所暗示的方式执行的操作（添加数据）。

好吧，实际上这样的名字无论如何都可以建议几种不同的操作，以阐明您到底期望什么我剥离了它的核心，所以现在它只是将自己限制为附加使用来自其单元格的序列化字符串的值到目标表的新行。

这些单元格将包含一个 <input type=hidden> 以及序列化字符串中相应索引的值。为了更好地展示原本不可见的数据，我还决定将单元格 innerText 设置为相同的值。

当然这还不是全部
//appends 10 rows to the target table
const table = document.getElementById('Table1');
for(let i=0;i<10;i++){
  addData(table, 'col~1^col~2^col~3^col~4');
}

//appends a row in target table, with the content coming from raw
function addData(target, raw) {

  //replaces the ~ with % on raw,
  const processed = raw.replaceAll('~', '%'); 
  console.log(processed);
  //and splits its values delimited by ^
  const values = processed.split("^");    
  
  //creates and append a new row in target table
  const newRow = target.insertRow(-1);    

  //for each value in values
  for(value of values){
    //creates a new <input type=hidden>
    const input = document.createElement('input');
    input.setAttribute('type', 'hidden');
    //sets its value as the current value of the array
    input.value = value;            
    
    //creates a new row cell appending the input to its children
    newCell = newRow.insertCell(-1);            
    newCell.append(input);    
    
    //since the only cell content is an hidden input I show it on its content also
    newCell.textContent = value;
  }
}
body{
  padding: 1rem;
}

table{
  border-collapse: collapse;
  width: 100%;
}

table tr{
  height: 2rem;
}

table td{
  border: solid 1px;
}
<table id="Table1">
  <tr id="TR01">
    <td>header #1</td>
    <td>header #2</td>
    <td>header #3</td>
    <td>header #4</td>
  </tr>
</table>

【讨论】：