javascript - 在javascript中向单个数组项添加多个值

Question

我想，我在输出数组时遇到了麻烦。

我希望输出看起来像：

1. FirstName LastName DOB

但我最终得到的是：

1. FirstName
2. LastName
3. DOB

这是我到目前为止所拥有的，但我没有看到我做错了什么。

// global variable:
var tasks = []; 

// Function called when the form is submitted.
// Function adds a task to the global array.
function addTask() {
    'use strict';

    // Get the task:
    var firstName = document.getElementById('firstName');
    var lastName = document.getElementById('lastName');
    var dob = document.getElementById('dob');

    // numerical value of dob
    var dateofBirth = new Date(dob.value);

    // Reference to where the output goes:
    var output = document.getElementById('output');

    // For the output:
    var message = '';

    if (firstName.value && lastName.value && dob.value) {

        // Add the item to the array:
        tasks.push(firstName.value, lastName.value, dateofBirth.toString());


        // Update the page:
        message = '<h2>Persons Entered</h2><ol>';
        for (var i = 0, count = tasks.length; i < count; i++) {
            message += '<li>' + tasks[i] + '</li>';
        }
        message += '</ol>';
        output.innerHTML = message;

    } // End of IF.

    // Return false to prevent submission:
    return false;

} // End of addTask() function.

// Initial setup:
function init() {
    'use strict';
    document.getElementById('theForm').onsubmit = addTask;
} // End of init() function.
window.onload = init;

谢谢，我希望这可以帮助你帮助我。

score 6 · Accepted Answer

tasks.push({firstName: firstName.value, lastName: lastName.value, DOB: dateofBirth.toString()})

进而

tasks[0].firstName will output firstName.value
tasks[0].lastName will output lastName.value

ETC..

编辑

使用它，您可以像这样构建您的消息：

for (var i = 0, count = tasks.length; i < count; i++) {
    message += '<li><span>' + tasks[i].firstName + '</span><span> ' 
    + tasks[i].lastName + '</span><span>' + tasks[i].DOB + '</span></li>';
}

当然，span 标签是可选的，但这将允许您将样式应用于 css 中信息的每个部分（宽度、填充等），并且您将始终能够通过以下方式轻松选择任务的属性指数

score 1 · Accepted Answer

您的问题是您正在向li数组中的每个元素添加元素，而不是只添加一次 teh li

    // Update the page:
    message = '<h2>Persons Entered</h2><ol><li>' + tasks.join(' ') + '</li></ol>';
    output.innerHTML = message;

score 1 · Accepted Answer

为什么你把每个元素都放在自己的位置<li>？

如果你不把它放在不同的地方，<li>而是放在一个共同的地方，一切都会好起来的

message = '<h2>Persons Entered</h2><ol><li>';

        for (var i = 0, count = tasks.length; i < count; i++) {
            message += tasks[i];
            message += " ";
        }
        message += '</li></ol>';
        output.innerHTML = message;

score 0 · Accepted Answer

使用跨度。你可以使用 Array.join

output.innerHTML= '<h2>Persons Entered</h2><div><span>' + tasks.join("</span> <span>") +"</span>";

score 0 · Accepted Answer

您想将它们作为数组添加到数组中，而不是作为值添加到数组中

你有的是这样的：

tasks.push(firstName.value, lastName.value, dateofBirth.toString());

我认为你想要的是：

tasks.push([firstName.value, lastName.value, dateofBirth.toString()]);

上面的答案是相同的，但使用的是对象，而不是数组。

score 0 · Accepted Answer

您正在做的是将多个值推送到您的数组中。您要做的是将不同的值转换为单个值，然后将该值推送到您的数组中。要获得您请求的确切输出，您可以通过将这些值连接成一个字符串来将它们转换为一个：

改变这个：

tasks.push(firstName.value, lastName.value, dateofBirth.toString());

进入这个：

tasks.push(firstName.value + ' ' + lastName.value + ' ' + dateofBirth.toString());

但是，这确实意味着您将无法访问各个值。如果你想访问这些，你可以将它们组装成一个对象：

tasks.push({"firstName" : firstName.value,
            "lastName" : lastName.value,
            "dateOfBirth" : dateofBirth.toString());

score 0 · Accepted Answer

你在问什么有点令人困惑。如果你只是想要这个：

1. FirstName LastName DOB

对此：

1. FirstName
2. LastName
3. DOB

那么您的问题不在于数组，而在于您如何定义循环代码。试试这个：

// Update the page:
message = '<h2>Persons Entered</h2><ol><li>';
for (var i = 0, count = tasks.length; i < count; i++) {
    message += tasks[i] + ' ';
}
message += '</li></ol>';

这样，您将数组元素放在单个列表元素中，而不是跨越三个元素。

编辑 - 用于多维数组遍历

这是假设数组是这样定义的（根据Dan Steingart 的回答）：

tasks.push([firstName.value, lastName.value, dateofBirth.toString()]);

然后我们可以有以下内容：

// Update the page:
message = '<h2>Persons Entered</h2><ol>';

for (var i = 0, count = tasks.length; i < count; i++) {
    message += '<li> + tasks[i].toString().replace(',',' ') + '</li>';
}

message += '</ol>';

在这里，您正在遍历的每个元素tasks本身tasks也是一个数组。内部toString()数组上的将以逗号分隔的方式显示值，然后该replace()函数只需将逗号替换为空格。

javascript - 在javascript中向单个数组项添加多个值

7 回答 7

Related

Reference