我有一个JavaScript对象,如下所示:
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
我如何循环遍历p的所有元素(p1、p2、p3…)并获取它们的键和值?
我有一个JavaScript对象,如下所示:
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
我如何循环遍历p的所有元素(p1、p2、p3…)并获取它们的键和值?
当前回答
当对象实现.next()方法时,它将成为迭代器
常量james={name:“James”,高度:`5'10“`,重量:185,[符号迭代器](){让财产=[]for(let key of Object.keys(james)){财产推送(键);}索引=0;返回{下一个:()=>{let键=财产[索引];let value=this[key];让done=索引>=属性.length-1;索引++;返回{钥匙价值完成};}};}};constiterator=james[Symbol.iiterator]();console.log(迭代器.next().value);//'詹姆斯console.log(迭代器.next().value);//`5'10`console.log(迭代器.next().value);//185
其他回答
您可以向所有对象添加一个简单的forEach函数,这样就可以自动循环任何对象:
Object.defineProperty(Object.prototype, 'forEach', {
value: function (func) {
for (var key in this) {
if (!this.hasOwnProperty(key)) {
// skip loop if the property is from prototype
continue;
}
var value = this[key];
func(key, value);
}
},
enumerable: false
});
对于那些不喜欢“For…in”方法的人:
Object.defineProperty(Object.prototype, 'forEach', {
value: function (func) {
var arr = Object.keys(this);
for (var i = 0; i < arr.length; i++) {
var key = arr[i];
func(key, this[key]);
}
},
enumerable: false
});
现在,您可以简单地调用:
p.forEach (function(key, value){
console.log ("Key: " + key);
console.log ("Value: " + value);
});
如果您不想与其他forEach方法发生冲突,可以使用您的唯一名称命名它。
在ES6中,我们有众所周知的符号来公开一些以前的内部方法,您可以使用它来定义迭代器如何为这个对象工作:
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3",
*[Symbol.iterator]() {
yield *Object.keys(this);
}
};
[...p] //["p1", "p2", "p3"]
这将给出与用于…相同的结果。。。在es6循环中。
for(var key in p) {
console.log(key);
}
但了解您现在使用es6的能力很重要!
考虑到ES6,我想添加自己的一勺糖,并提供另一种方法来迭代对象的财产。
由于纯JS对象不能立即迭代,因此我们无法使用。。用于迭代其内容的循环。但没有人能阻止我们使其可迭代。
让我们有书的对象。
let book = {
title: "Amazing book",
author: "Me",
pages: 3
}
book[Symbol.iterator] = function(){
let properties = Object.keys(this); // returns an array with property names
let counter = 0;
let isDone = false;
let next = () => {
if(counter >= properties.length){
isDone = true;
}
return { done: isDone, value: this[properties[counter++]] }
}
return { next };
}
既然我们做到了,我们可以这样使用它:
for(let pValue of book){
console.log(pValue);
}
------------------------
Amazing book
Me
3
或者如果你知道ES6发电机的功率,那么你当然可以让上面的代码更短。
book[Symbol.iterator] = function *(){
let properties = Object.keys(this);
for (let p of properties){
yield this[p];
}
}
当然,通过在原型级别上使Object可迭代,您可以对所有对象应用这样的行为。
Object.prototype[Symbol.iterator] = function() {...}
此外,符合可迭代协议的对象可以与新的ES2015特性扩展运算符一起使用,因此我们可以将对象属性值作为数组读取。
let pValues = [...book];
console.log(pValues);
-------------------------
["Amazing book", "Me", 3]
或者可以使用析构函数赋值:
let [title, , pages] = book; // notice that we can just skip unnecessary values
console.log(title);
console.log(pages);
------------------
Amazing book
3
您可以使用我上面提供的所有代码查看JSFiddle。
如果我们不提循环对象的其他方法,这个问题就不完整了。
如今,许多知名的JavaScript库提供了自己的方法来迭代集合,即在数组、对象和类数组对象上迭代。这些方法使用方便,与任何浏览器都完全兼容。
如果使用jQuery,可以使用jQuery.each()方法。它可以用于对对象和数组进行无缝迭代:$.each(obj,函数(键,值){console.log(键,值);});在Undercore.js中,您可以找到方法_.each(),它遍历一个元素列表,依次生成一个提供的函数(注意iterate函数中参数的顺序!):_.each(obj,函数(值,键){console.log(键,值);});Lo-Dash提供了几种迭代对象财产的方法。Basic _.forEach()(或其别名_.each())对于循环遍历对象和数组非常有用,但是(!)具有长度属性的对象被视为数组,为了避免这种行为,建议使用_.forIn()和_.forOwn()方法(这些方法也有值参数):_.forIn(obj,函数(值,键){console.log(键,值);});_.forIn()迭代对象的自身和继承的可枚举财产,而_.forOwn()只迭代对象的自己的财产(基本上是检查hasOwnProperty函数)。对于简单对象和对象文本,这些方法中的任何一种都可以正常工作。
通常,所有描述的方法都具有与任何提供的对象相同的行为。除了将本机用于。。in循环通常比任何抽象(如jQuery.each())都快,这些方法使用起来非常容易,需要更少的编码,并提供更好的错误处理。
您必须使用for in循环
但在使用这种循环时要非常小心,因为这将沿着原型链循环所有财产。
因此,在循环中使用for时,请始终使用hasOwnProperty方法来确定迭代中的当前属性是否真的是要检查的对象的属性:
for (var prop in p) {
if (!p.hasOwnProperty(prop)) {
//The current property is not a direct property of p
continue;
}
//Do your logic with the property here
}