迭代对象文字值

IT技术 javascript
2021-02-11 20:44:01

我有一个标准的 jQuery 插件设置,它在顶部创建默认设置:

jQuery.fn.myPlugin = function(options) { 
    var defaults = {  
        starts: "0px,0px",
        speed: 250, ...
    };
    o = $.extend(defaults, options);
}

我有另一个变量叫做numberOfObjects.

我正在尝试遍历默认变量。对于找到(来自numberOfObjects)的每个对象,我需要复制变量值的值。因此,如果numberOfObjects变量为 3,defaults.starts则应为0px,0px > 0px,0px > 0px,0px> 用于分割值。

这就是我目前所拥有的。X表示默认值中的变量名称。Y表示 的当前值的变量x我已经走了这么远,不知道下一步要做什么。

for (x in defaults) {   // x is defaults.x
    defaults.x = defaults.x + " > y";
}
6个回答
var obj = {
    'foo': 1,
    'bar': 2
};

for (var key in obj) {
    console.log(obj[key]);
}

或者使用 jQuery:

$.each(obj, function(key, value) {
    console.log(this, value, obj[key]);
});
@Kite 虽然是真的,但问题是专门问的 object literals
2021-03-13 20:44:01
此解决方案缺少guard-for-ineslint.org/docs/rules/guard-for-in - UsingObject.keys(obj).forEach(func)是更好的解决方案(请参阅 Blair Anderson 的帖子)。
2021-03-22 20:44:01
这个方法的问题是你还应该检查属性是否属于对象本身而不是它的原型。我建议使用@blair-anderson 解决方案Object.keys(obj)
2021-03-24 20:44:01
@Timo 根据上述评论,这个问题专门询问的是object literals,而不是实例。
2021-03-24 20:44:01
@zero_cool 是的。并且根据我的示例obj[key]为您提供了value。
2021-04-08 20:44:01

您不应该为此依赖 jQuery。

Object.keys(obj).forEach(function (key) {
  var value = obj[key];
   // do something with key or value
});
如果您需要支持小于 9 的 IE,也可以转到 polyfill 的链接。
2021-03-13 20:44:01
@Timo - 原因是 Object.keys 查找所有自己的可枚举属性。'for in' 还查找继承的可枚举属性,而不仅仅是它自己的属性。
2021-03-28 20:44:01
根据带有 ESLint 的 AirBnB 样式指南,这是首选方式 for (var key in obj)
2021-04-05 20:44:01

让我们在开始之前设置我们的基本对象:

const x = {
  x: 1,
  y: 2,
  z: 3
};

我们可以使用 Object.keys(x) 来返回我们对象中所有键的数组。

Object.keys(x)
> ['x', 'y', 'z']

现在我们能够映射、过滤、减少和循环我们的数组,并在我们的对象中使用该值执行某些操作:

Object.keys(x).map(key => x[key] + 1)
> [2,3,4]

Object.keys(x).forEach(key => console.log(x[key]))
> [1,2,3]

这里的主要内容是我们必须使用密钥来访问该特定值,它可以工作,但感觉有点笨拙。ES2017 带来了它Object.values(),它可以用作一个很好的快捷方式,用于返回Object.

Object.values(x)
> [1,2,3]

Object.values(x).map(value => value + 1)
> [2,3,4]

Object.values(x).forEach(value => console.log(value))
> [1,2,3]

您可以在MDN阅读更多关于 Object.values() 的信息,它们还包括一个 polyfill,如果您需要支持尚未实现它的旧浏览器和浏览器。

还有 Object.entries() 可以方便地访问键和值。它返回一个包含数组的数组(第一项是键,第二项是值。

Object.entries(x);
> [['x', 1], ['y', 2], ['z', 3]]

我们可以使用解构来轻松获得这些值:

Object.entries(x).map(([key, value]) => console.log(key, value))
这是最完整的解决方案。谢谢!
2021-04-07 20:44:01

要迭代对象的值,您可以将for...of循环与Object.values一起使用

const myObj = {a: 1, b: 2}

for (let value of Object.values(myObj)) {
    console.log(`value=${value}`)
}

// output: 
// value=1
// value=2

如果在迭代时需要键和值,可以使用Object.entries

const myObj = {a: 1, b: 2}

for (let [key, value] of Object.entries(myObj)) {
    console.log(`key=${key} value=${value}`)
}

// output: 
// key=a value=1
// key=b value=2

最佳实践是验证正在迭代的对象属性是否来自对象本身而不是从原型链继承。您可以使用.hasOwnProperty()进行检查:(当然,如果您确实想包含继承的属性,只需删除 if 语句)。

这是一般情况:

for(var index in object) { 
   if (object.hasOwnProperty(index)) {
       var value = object[index];
       // do something with object value here.
   }
}

这是您提到的示例案例,您要创建一个重复对象,其中每个键的值都根据 var 的值进行复制numberofobjects(我添加了两个解决方案,您可以修改现有对象或创建一个新对象) ):

// function to repeat value as a string inspired by disfated's answer here http://stackoverflow.com/questions/202605/repeat-string-javascript

function repeatValue(value, count) {
    value = String(value); // change to string to be able to add " > " as in question
    if (count < 1) return '';
    var result = '';
    while (count > 1) {
        if (count & 1) result +=  value + " > ";
        count >>= 1, value += " > " + value;
    }
    return result + value;
}

var numberofobjects = 3;
var newObject = {}; // for use if creating a duplicate object with the new values

for(var x in defaults) { 
   if (defaults.hasOwnProperty(x)) {
       //use this to replace existing values
       defaults[x] = repeatValue(defaults[x], numberofobjects);

       //or use this to create values in the new object
       newObject[x] = repeatValue(defaults[x], numberofobjects);
   }
}