Question

所以我正在尝试设计一个具有3个输入字段（Cust ID，Cust Name和Amount）的表单，如果它存在于Object Array中则需要检查ID，如果是，则抛出错误，否则它会将所有3个值都添加到Object Array。

我需要使用一个对象，这样我就不会使用大量的数组，但是我从来没有真正使用过基于对象的数组，所以如果有人能够提供一个如何使用它的例子，那么一个巨大的帮助！

var garrCust = {id:"", name:"", amount:""};


function addCust(){
    var custID = document.getElementById("custid").value;
    var custName = document.getElementById("custname").value;
    var amount = document.getElementById("amount").value;

    if(!custID){
        document.getElementById("output").innerHTML = "ID Cannot be Blank";
        return false;}


    document.getElementById("output").innerHTML += "<br />Added " + custID + "<br /><br />";
    document.getElementById("output").innerHTML += "List contains: " + garrCust.id;
    return true;

}

Answer 1

我会使用ID来命名和量化对象映射，以简化和加速查找：

var garrCust = []; // an array of id -> {id:"", name:"", amount:""}

function addCust(){
    var custID = document.getElementById("custid").value;
    var custName = document.getElementById("custname").value;
    var amount = document.getElementById("amount").value;

    if(!custID){
        document.getElementById("output").innerHTML = "ID Cannot be Blank";
        return false;
    }

    if (!garrCust[custID]) {
        // ID not found in the array
        garrCust[custID] = { id: custID, name : custName, 'amount' : amount};
        document.getElementById("output").innerHTML += "<br />Added " + custID + "<br /><br />";
    } else {
        document.getElementById("output").innerHTML += "List contains: " + garrCust.id;
    }

    return true;
}

注意：将ID存储为对象的一部分实际上是可选的，因为它已经作为数组索引与条目相关联

Answer 2

您也可以使用构造函数来定义对象内容，并使用id作为索引它们的属性，如下所示：

// Create an object with the two properties name and amount
function Customer(name,amount) {
    this.name = name;
    this.amount = amount;
}

// Declare some variables
var id, c;
var customers = {};

// Sample names
var name = [ 'one','two','three','four','five' ];

// Create five sample entries - reusing id for amount
for (id = 0; id < 5; id++) {
    // Using the new keyword with customer creates the object with 
    // the data you pass
    customers[id] = new Customer(name[id],id);
}

// A loop to test for the presence of customer ids
for (c = 0; c < 5; c++) {
    id = Math.floor(Math.random() * 20);
    if (customers.hasOwnProperty(id)) {
        console.log(id+" exists");
    } else {
        console.log(id+" does not exist");
    }
}

这将创建一个对象作为属性的对象，属性的名称是客户ID。

customers = {44：{name：“John”，金额：6}， 33：{name：“Sally”，金额：5}};

要显示客户列表，您可以使用以下内容：

var html;
// Use a template literal to build the list item for each customer
function listTemplate(id,name,amount) {
        return `<li><span class="id">${id}</span>
                <span class="name">${name}</span>
                <span class="amount">${amount}</span></li>`;
}
html = "<ul>";

// Iterate through all the customers
for (id in customers) {
        c = customers[id];
        // Concatenate the list items
        html += listTemplate(id,c.name,c.amount);
}
html += "</ul>";

// Add the HTML into the DOM
document.getElementById("customer-list").innerHTML = html;

输入值选中为唯一，然后添加到对象数组 - JavaScript

2 个答案: