Ассоциативные массивы в JavaScript

Question

У меня есть этот объект:

function formBuddy()
{
    var fields = new Array();
    var labels = new Array();
    var rules = new Array();
    var count=0;

    this.addField = function(field, label, rule)
    {
        fields[count] = field;
        labels[field] = label;
        rules[field] = rule;
        count = ++count;
    }
}

Используется следующим образом:

var cForm=new formBuddy();
cForm.addField("c_first_name","First Name","required");
cForm.addField("c_last_name","Last Name","required");

Проблема в том, что в функции addField() массив fields задан правильно (возможно, потому что для ссылки на него используется числовой индекс), но в других 2 массивах (labels и rules) не тронуты вообще. Выполнение console.log показывает их пустыми в firebug.

Что мне нужно изменить, чтобы заставить их работать? Я все еще хотел бы ссылаться на правила и метки по строковому индексу поля.

Answer 1

Используйте объекты вместо:

function formBuddy()
{
    var fields = {};
    var labels = {};
    var rules = {};
    var count = 0;

    this.addField = function(field, label, rule)
    {
        fields[count] = field;
        labels[field] = label;
        rules[field] = rule;
        count++;
    }
}

---

Но поскольку Кристоф уже упомянул , я бы также сохранил эту информацию в одной структуре данных. Например:

function formBuddy() {
    var fields = {};
    this.addField = function(name, label, rule) {
        fields[name] = {
            name: name,
            label: label,
            rule: rule
        };
    };
    this.getField = function(name) {
        return fields[name];
    };
}

var cForm=new formBuddy();
cForm.addField("c_first_name","First Name","required");
cForm.addField("c_last_name","Last Name","required");
alert(cForm.getField("c_last_name").label);

Answer 2

fields должен быть массивом, тогда как labels и rules должны быть объектами, так как вы хотите использовать строки в качестве ключей. Кроме того, addField() одинаково для каждого экземпляра FormBuddy() (имена функций конструктора должны начинаться с заглавной буквы) и должны находиться в прототипе, то есть

function FormBuddy() {
    this.fields = []; // this is the same as `new Array()`
    this.labels = {}; // this is the same as `new Object()`
    this.rules = {};
}

FormBuddy.prototype.addField = function(field, label, rule) {
    this.fields.push(field);
    this.labels[field] = label;
    this.rules[field] = rule;
};

Вы можете получить доступ к ярлыкам / правилам через

var buddy = new FormBuddy();
buddy.addField('foo', 'bar', 'baz');
alert(buddy.labels['foo']);
alert(buddy.rules.foo);

---

Просто, чтобы еще больше разозлить Лука;), вот еще одна версия, которая также не содержит ничего:

function FormBuddy() {
    this.fields = [];
}

FormBuddy.prototype.addField = function(id, label, rule) {
    var field = {
        id : id,
        label : label,
        rule : rule
    };

    this.fields.push(field);
    this['field ' + id] = field;
};

FormBuddy.prototype.getField = function(id) {
    return this['field ' + id];
};

var buddy = new FormBuddy();
buddy.addField('foo', 'label for foo', 'rule for foo');

Он похож на вторую версию Гамбо, но его объект fields объединен с экземпляром FormBuddy. Вместо этого добавляется массив fields, чтобы обеспечить быструю итерацию.

Чтобы получить доступ к метке поля, правилу или идентификатору, используйте

buddy.getField('foo').label

Чтобы перебрать поля, используйте

// list rules:
for(var i = 0, len = buddy.fields.length; i < len; ++i)
    document.writeln(buddy.fields[i].rule);

Answer 3

Массивы рассматриваются как объекты в Javascript, поэтому ваш кусок кода работает, просто у * firebug console.log не отображаются «объекты» внутри массива, а только значения массива ...

Используйте for(var i in obj), чтобы увидеть, какие значения объектов содержит массив:

function formBuddy() {
    var fields = new Array();
    var labels = new Array();
    var rules = new Array();
    var count=0;

    this.addField = function(field, label, rule)
    {        
        fields[count] = field;
        labels[field] = label;
        rules[field] = rule;
        count = ++count;

        for(var i in labels) {
            console.log(labels[i]);
        }
        for(var i in rules) {
            console.log(rules[i]);
        }

        console.log(labels.c_last_name);
        // or
        console.log(labels["c_last_name"]);
    }
}

var cForm = new formBuddy();
cForm.addField("c_last_name","Last Name","required");