不知何故，我的数据的每个第二个元素都被删除了（我需要删除循环中的每个元素）

Posted 2021-03-27

所以我正在编写一个js脚本来创建表并用数据填充它。我想限制显示的数据，并决定删除每个数组条目后，我显示插入到dom。

问题是splice和shift方法删除每一个元素，我不明白为什么。

这是主要的责任功能。

// ADD JSON DATA TO THE TABLE AS ROWS.
const loadData = function() {
    for (let i = 0; i < 20; i++) {
        tr = table.insertRow(-1);

        for (let j = 0; j < col.length; j++) {
            const tabCell = tr.insertCell(-1);
            tabCell.innerhtml = myBooks[i][col[j]];
        }
        myBooks.splice(0, 1);
    }
};
loadData();

结果我得到：

index   guid    isActive    balance age eyeColor    name    gender  company email
0   72bb2d7f-75f8-4cba-bb0e-0a0bab3a1fa2    true    $3,952.70   21  blue    Mckenzie Conway male    ENAUT   [e-mail]
2   d0f4e37b-afbe-4970-b303-ba50cfaa02a0    false   $2,198.67   31  green   Susie Peters    female  JIMBIES [e-mail]
4   99d5ad37-44be-41a4-be57-dcb000fab1e3    false   $3,939.64   29  brown   Castillo Carney male    VORATAK [e-mail]
6   5bae2fde-3c2f-4e82-8e96-7436022fd08a    true    $3,284.90   23  brown   Fran Bridges    female  NETERIA [e-mail]
8   a58bb110-4945-46b7-9d10-511ed79b4950    false   $3,612.44   32  green   Lambert Cobb    male    XOGGLE  [e-mail]
10  8d0b1059-dabc-4e4c-8edf-a829370ed734    false   $2,702.12   30  brown   Ilene Waller    female  GOLOGY  [e-mail]
12  1405dacd-57f6-49ad-9b13-49c2992e4bf5    false   $1,266.03   27  brown   Delacruz Talley male    XINWARE [e-mail]
14  a720a721-321a-4502-97b7-c44df194e977    true    $3,953.08   36  blue    Esmeralda Cabrera   female  TOURMANIA   [e-mail]
16  a9a8ab4b-9d2a-489e-bf1b-c6f9df61c3db    false   $2,725.77   28  blue    Annette Atkins  female  QUALITEX    [e-mail]
18  a88bec10-0758-4c89-9905-109e8e64ffb8    true    $2,517.34   39  blue    Mandy Taylor    female  COMBOGEN    [e-mail]
20  fe01ae07-e730-49dc-9ab8-1dc7e3a1526a    false   $2,043.76   29  green   Luisa Schwartz  female  DOGTOWN [e-mail]

结果我期望：

index   guid    isActive    balance age eyeColor    name    gender  company email
0   72bb2d7f-75f8-4cba-bb0e-0a0bab3a1fa2    true    $3,952.70   21  blue    Mckenzie Conway male    ENAUT   [e-mail]
1   5a93ace9-650b-44b7-ae3b-69eb4362f6f1    true    $1,557.97   24  blue    Sasha Lang  female  EARTHPLEX   [e-mail]
2   d0f4e37b-afbe-4970-b303-ba50cfaa02a0    false   $2,198.67   31  green   Susie Peters    female  JIMBIES [e-mail]
3   63bc0cbc-a7b3-4109-a0ad-8e50b5c3d242    false   $3,065.41   25  blue    Chang Franco    male    TRASOLA [e-mail]
4   99d5ad37-44be-41a4-be57-dcb000fab1e3    false   $3,939.64   29  brown   Castillo Carney male    VORATAK [e-mail]
5   47854f72-3867-417f-84b5-b7052ab76a15    false   $3,604.89   29  blue    Ewing Wood  male    VIXO    [e-mail]
6   5bae2fde-3c2f-4e82-8e96-7436022fd08a    true    $3,284.90   23  brown   Fran Bridges    female  NETERIA [e-mail]
7   b33db55d-a093-4002-ab81-c9d99e27a92e    true    $1,551.63   26  brown   Lacy Gallagher  female  OHMNET  [e-mail]
8   a58bb110-4945-46b7-9d10-511ed79b4950    false   $3,612.44   32  green   Lambert Cobb    male    XOGGLE  [e-mail]
9   99cfc79b-0795-4d07-862e-7405b5ffcf53    true    $3,388.09   27  green   Kaye Valencia   female  ZILLATIDE   [e-mail]
10  8d0b1059-dabc-4e4c-8edf-a829370ed734    false   $2,702.12   30  brown   Ilene Waller    female  GOLOGY  [e-mail]

答案

改变tabCell.innerHTML = myBooks[i][col[j]];

至

tabCell.innerHTML = myBooks[0][col[j]];

splice删除了你的第一个元素，所以你总是想要抓住“当前”的第一个元素。

另一答案

所以在@tymeJV之后给我一个想法我稍微切换功能，它现在工作正常:)

const loadData = function() {
    for (let i = 0; i < 20; i++) {
        tr = table.insertRow(-1);

        for (let j = 0; j < col.length; j++) {
            const tabCell = tr.insertCell(-1);
            tabCell.innerHTML = myBooks[i][col[j]];
        }
    }
    myBooks.splice(0, 20);
};
loadData();

另一答案

您正在更改每次迭代循环的数组。为了防止您的问题，您可以：

1. 向后循环，然后当您从数组中删除项目时，您仍然可以处理下一个项目，它将在适当的位置。
2. 在拼接后从柜台上移除所以你将拥有i--，这将确保你留在第一排。
3. 循环后删除项目。

祝好运，

另一答案

试试这个：因为你在每次传递后删除数组的第一项，你总是需要使用数组中的第一项myBooks[0][col[j]]

要删除数组的第一项，可以使用.shift()方法。

// ADD JSON DATA TO THE TABLE AS ROWS.
const loadData = function() {
    for (let i = 0; i < 20; i++) {
        tr = table.insertRow(-1);

        for (let j = 0; j < col.length; j++) {
            const tabCell = tr.insertCell(-1);
            tabCell.innerHTML = myBooks[0][col[j]];
        }
        myBooks.shift();
    }
};
loadData();