[英]Associative arrays in javascript
I have this object:我有这个 object:
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;
}
}
Its used in this way:它以这种方式使用:
var cForm=new formBuddy();
cForm.addField("c_first_name","First Name","required");
cForm.addField("c_last_name","Last Name","required");
The problem is, in the addField()
function the fields
array is being set correct (perhaps because a numerical index is being used to refer to it) but the other 2 arrays ( labels
and rules
) aren't being touched at all.问题是,在
addField()
function 中, fields
数组设置正确(可能是因为使用数字索引来引用它),但其他 2 个 arrays ( labels
和rules
)根本没有被触及。 Doing a console.log
shows them as empty in firebug.做一个
console.log
显示它们在萤火虫中是空的。
What do I need to change to make them work?我需要改变什么才能使它们工作? I'd still like to refer to the rules and labels by the string index of the field.
我还是想通过字段的字符串索引来引用规则和标签。
Use objects instead: 改为使用对象:
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++;
}
}
But as Christoph already mentioned , I would store this information in a single data structure too. 但正如Christoph已经提到的那样 ,我也会将这些信息存储在一个数据结构中。 For example:
例如:
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);
fields
should be an array, whereas labels
and rules
should be objects as you want to use strings as keys. fields
应该是一个数组,而labels
和rules
应该是对象,因为您希望使用字符串作为键。 Also, addField()
is the same for each instance of FormBuddy()
(names of constructor functions should be capitalized) and should reside in the prototype, ie 此外,
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;
};
You can access the labels/rules via 您可以通过访问标签/规则
var buddy = new FormBuddy();
buddy.addField('foo', 'bar', 'baz');
alert(buddy.labels['foo']);
alert(buddy.rules.foo);
Just to further enrage Luca ;), here's another version which also dosn't encapsulate anything: 只是为了进一步激怒Luca;),这是另一个版本,它也没有封装任何东西:
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');
It's similar to Gumbo's second version, but his fields
object is merged into the FormBuddy
instance. 它类似于Gumbo的第二个版本,但他的
fields
对象被合并到FormBuddy
实例中。 An array called fields
is added instead to allow for fast iteration. 添加一个名为
fields
的数组,以允许快速迭代。
To access a field's label, rule, or id, use 要访问字段的标签,规则或ID,请使用
buddy.getField('foo').label
To iterate over the fields, use 要迭代字段,请使用
// list rules:
for(var i = 0, len = buddy.fields.length; i < len; ++i)
document.writeln(buddy.fields[i].rule);
Arrays are treated as Objects in Javascript, therefore your piece of code works, it's just that firebug's console.log
isn't showing you the "Objects" inside the array, rather just the array values ... 数组在Javascript中被视为对象,因此你的代码片段工作,只是firebug的
console.log
没有向你显示数组中的“Objects”,而只是数组值...
Use the for(var i in obj)
to see what objects values the Array contains: 使用
for(var i in obj)
查看Array包含的对象值:
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");
Is this an alternative to what you are seeking?这是您正在寻找的替代品吗? Try it.
试试看。
<script type="text/javascript">"use strict";
function formBuddy() {
this.fields = new Array();
this.labels = new Array();
this.rules = new Array();
this.count=0;
this.addField = function(field, label, rule)
{
this.fields[this.count] = field;
this.labels[field] = label;
this.rules[field] = rule;
this.count++;
}
}
var cForm = new formBuddy();
// FILLING IN THE DATABASE
cForm.addField("c_first_name","Diasoluka","duplicated");
cForm.addField("c_Middle_name","Nz","inspect");
cForm.addField("c_last_name","Luyalu","mandatory");
cForm.addField("c_first_name","Diasoluka","duplicated");
console.log(`ACCESSING EACH PROPERTY INDIVIDUALLY\n,${'.'.repeat(31)}`);
let el=Object.entries(cForm.fields); // DESTRUCTURING
console.log(Object.is(el,Object.entries(cForm.fields)));
// false
const [f1,f2,f3] = el; // DESTRUCTURING=DÉCOMPOSITION
console.log("FIELDS:\n",f1," | ",f2," | ",f3,"\n\n");
// FIELDS:
// Array [ "0", "c_first_name" ]
// Array [ "1", "c_Middle_name" ]
// Array [ "2", "c_last_name" ]
let labels = Object.entries(cForm.labels); // DESTRUCTURING
const [l1,l2,l3] = labels; // DESTRUCTURING
console.log("LABELS:\n",l1," | ",l2," | ",l3,"\n\n");
// LABELS:
// Array [ "c_first_name", "Diasoluka" ]
// Array [ "c_Middle_name", "Nz" ]
// Array [ "c_last_name", "Luyalu" ]
let rules = Object.entries(cForm.rules); // DESTRUCTURING
const [r1,r2,r3] = rules; // DESTRUCTURING
console.log("RULES:\n",r1," | ",r2," | ",r3,"\n\n");
// RULES:
// Array [ "c_first_name", "duplicated" ]
// Array [ "c_Middle_name", "inspect" ]
// Array [ "c_last_name", "mandatory" ]
console.log(`PAESING THE DATABASE =\nACCESSING ALL THE FIELDS AT ONCE\n,${'.'.repeat(31)}`);
for(let key in cForm.fields){
let el=cForm.fields[key]; // ASSIGNMENT=AFFECTATION
console.log(Object.is(el,cForm.fields[key]));
// true true true true
console.log(`${el} // ${cForm.labels[el]} // ${cForm.rules[el]}\n`);
}
// c_first_name // Diasoluka // duplicated
// c_Middle_name // Nz // inspect
// c_last_name // Luyalu // mandatory
// c_first_name // Diasoluka // duplicated
console.log("\n");
console.log(`THE INNER STRUCTURE OF OUR cForm OBJECT\n,${'.'.repeat(31)}`);
console.log(Object.entries(cForm)); // DESTRUCTURING
// (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
// 0: (2) ['fields', Array(4)]
// 1: (2) ['labels', Array(0)]
// 2: (2) ['rules', Array(0)]
// 3: (2) ['count', 4]
// 4: (2) ['addField', ƒ]
// length: 5
// [[Prototype]]: Array(0)
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.