JavaScript foreach 循环在关联数组对象上
JavaScript foreach loop on an associative array object
为什么我的for-for-each循环不遍历我的JavaScript关联数组对象?
// Defining an array
var array = [];
// Assigning values to corresponding keys
array["Main"] = "Main page";
array["Guide"] = "Guide page";
array["Articles"] = "Articles page";
array["Forum"] = "Forum board";
// Expected: loop over every item,
// yet it logs only "last" assigned value - "Forum"
for (var i = 0; i < array.length; i++) {
console.log(array[i]);
}
jQuery each()
可能会有所帮助:https://api.jquery.com/jQuery.each/
.length
属性仅跟踪具有数字索引(键)的属性。 您正在使用字符串作为键。
您可以这样做:
var arr_jq_TabContents = {}; // no need for an array
arr_jq_TabContents["Main"] = jq_TabContents_Main;
arr_jq_TabContents["Guide"] = jq_TabContents_Guide;
arr_jq_TabContents["Articles"] = jq_TabContents_Articles;
arr_jq_TabContents["Forum"] = jq_TabContents_Forum;
for (var key in arr_jq_TabContents) {
console.log(arr_jq_TabContents[key]);
}
为了安全起见,最好在这样的循环中确保没有任何属性是意外的继承结果:
for (var key in arr_jq_TabContents) {
if (arr_jq_TabContents.hasOwnProperty(key))
console.log(arr_jq_TabContents[key]);
}
编辑 — 现在最好注意 Object.keys()
函数在现代浏览器和 Node 等中可用。该函数以数组的形式返回对象的"own"键:
Object.keys(arr_jq_TabContents).forEach(function(key, index) {
console.log(this[key]);
}, arr_jq_TabContents);
传递给 .forEach()
的回调函数与 Object.keys()
返回的数组中的每个键和键的索引一起调用。它还传递了函数迭代的数组,但该数组对我们并没有真正的用处;我们需要原始对象。 这可以直接按名称访问,但是(在我看来)显式传递它会更好一些,这是通过将第二个参数传递给.forEach()
(原始对象)来完成的,该参数将在回调中绑定为this
。(刚刚看到这在下面的评论中注明了。
这是非常简单的方法。优点是您也可以获得密钥:
for (var key in array) {
var value = array[key];
console.log(key, value);
}
对于 ES6:
array.forEach(value => {
console.log(value)
})
对于 ES6(如果你想要值、索引和数组本身):
array.forEach((value, index, self) => {
console.log(value, index, self)
})
如果 Node.js 或浏览器支持 Object.entries()
,它可以用作使用 Object.keys()
的替代方案(Pointy 的答案)。
const h = {
a: 1,
b: 2
};
Object.entries(h).forEach(([key, value]) => console.log(value));
// logs 1, 2
在此示例中,forEach
使用数组的解构赋值。
已经有一些简单的例子了,但我注意到你对问题的措辞,你可能来自PHP背景,你希望JavaScript以同样的方式工作 - 它没有。PHP array
与 JavaScript Array
非常不同。
在 PHP 中,关联数组可以完成数字索引数组可以完成的大部分工作(array_*
函数工作,您可以count()
它,等等)。您只需创建一个数组并开始分配给字符串索引而不是数字。
在 JavaScript 中,一切都是对象(除了原语:字符串、数字、布尔值),数组是允许你拥有数字索引的特定实现。任何推送到数组的东西都会影响它的length
,并且可以使用数组方法(map
、forEach
、reduce
、filter
、find
等)进行迭代。但是,由于所有内容都是对象,因此您始终可以自由地简单地分配属性,因为这是您对任何对象执行的操作。方括号表示法只是访问属性的另一种方式,因此在您的情况下:
array['Main'] = 'Main Page';
实际上相当于:
array.Main = 'Main Page';
从你的描述中,我的猜测是你想要一个"关联数组",但对于 JavaScript,这是一个使用对象作为哈希图的简单情况。另外,我知道这是一个示例,但避免仅描述变量类型的无意义名称(例如 array
),以及基于其应包含的内容的名称(例如 pages
)。简单的对象没有很多好的直接迭代方法,所以通常我们会先使用Object
方法(在这种情况下Object.keys
- 现在还有一些entries
和values
被添加到一些浏览器中)我们可以循环。
// Assigning values to corresponding keys
const pages = {
Main: 'Main page',
Guide: 'Guide page',
Articles: 'Articles page',
Forum: 'Forum board',
};
Object.keys(pages).forEach((page) => console.log(page));
arr_jq_TabContents[key]
将数组视为 0 索引形式。
下面是将关联数组用作泛型对象类型的简单方法:
Object.prototype.forEach = function(cb){
if(this instanceof Array) return this.forEach(cb);
let self = this;
Object.getOwnPropertyNames(this).forEach(
(k)=>{ cb.call(self, self[k], k); }
);
};
Object({a:1,b:2,c:3}).forEach((value, key)=>{
console.log(`key/value pair: ${key}/${value}`);
});
在大多数情况下,这(基本上)是不正确的:
var array = [];
array["Main"] = "Main page";
这会在数组上创建一个名为 Main
的非元素属性。尽管数组是对象,但通常您不希望在它们上创建非元素属性。
如果要按这些名称索引array
,通常使用 Map
或纯对象,而不是数组。
使用Map
(ES2015+),我称之为map
,因为我很有创造力:
let map = new Map();
map.set("Main", "Main page");
然后,您可以使用迭代器从其values
、keys
或entries
方法迭代它,例如:
for (const value of map.values()) {
// Here, `value` will be `"Main page"`, etc.
}
使用一个普通对象,我将创造性地将其称为obj
:
let obj = Object.create(null); // Creates an object with no prototype
obj.Main = "Main page"; // Or: `obj["Main"] = "Main page";`
然后,您可以使用Object.keys
、Object.values
或Object.entries
来迭代其内容,例如:
for (const value of Object.values(proches_X)) {
// Here, `value` will be `"Main page"`, etc.
}
var obj = {
no: ["no", 32],
nt: ["no", 32],
nf: ["no", 32, 90]
};
count = -1; // Which must be a static value
for (i in obj) {
count++;
if (obj.hasOwnProperty(i)) {
console.log(obj[i][count])
};
};
在此代码中,我对数组中的调用值使用了括号方法,因为它包含一个数组。但是,简单地说,变量i
具有属性键的想法,并且具有称为关联数组的两个值的循环。
这是完美的方法。
你可以这样做:
var array = [];
// Assigning values to corresponding keys
array[0] = "Main page";
array[1] = "Guide page";
array[2] = "Articles page";
array[3] = "Forum board";
array.forEach(value => {
console.log(value)
})
似乎几乎每个答案都不是一开始就问的。
foreach循环不起作用似乎有点不对劲。 简单的 for 循环也不会起作用,因为在关联数组(回退之一)的情况下,长度属性将为零。 但是for-in为关联数组做这件事
// Defining an array
var array = [];
// Assigning values to corresponding keys
array["Main"] = "Main page";
array["Guide"] = "Guide page";
array["Articles"] = "Articles page";
array["Forum"] = "Forum board";
// Expected: loop over every item,
// yet it logs only "last" assigned value - "Forum"
for (var index in array) {
console.log(index,array[index]);
}
- 将数组对象传递到struts2中的操作类
- 如何使用jquery返回php-json数组对象
- 从其名称获取javascript数组对象
- 值未与数组对象绑定
- 如何按数组/对象值的倍数过滤对象数组
- 在表中显示数组对象
- 在数组对象中分组
- 将第二个或多个数组推送到数组对象 AngularJS 中
- 重新排列 JavaScript 数组/对象
- 键上的javascript数组对象过滤器
- handontable:在不更改数据数组/对象的情况下隐藏某些列
- 用于跟踪购物车可用性的Javascript数组/对象/哈希表
- 重建有角度的java脚本数组对象
- 对JSON数组对象进行排序
- 连接与数组对象相关的文本:方式和位置
- 哪些浏览器和版本支持将常见的类数组对象直接传递到fn.apply()
- 如何使用Handlebars循环数组对象和模板
- 是否可以引用JS数组/对象中的另一个元素
- Javascript中的名称索引-数组/对象
- 数组长度不等于数组对象