You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

JavaScript循环对象数组修改属性:代码错误排查与正确实现

如何正确循环对象数组并修改每个对象的属性

嘿,我一眼就看出你这段代码里的问题啦——你用for...in遍历数组的思路没问题,但修改属性的方式错了,导致根本没改到每个用户对象上!

原代码的问题分析

你写的for (let key in users)里,key其实是数组的索引字符串(比如"0"、"1"这类),但你直接执行users['isPremium'] = true,这相当于给数组本身添加了一个名为isPremium的属性,完全没碰数组里的每一个用户对象。这就是为什么你的代码运行后,数组里的isPremium还是false的原因。

几种正确的实现方式

下面给你几种靠谱的写法,按需选择:

1. 用for...of循环(最直观的遍历方式)

直接遍历数组里的每个用户对象,修改属性就行:

const users = [
 {isPremium: false},
 {isPremium: false},
 {isPremium: false},
 {isPremium: false},
 {isPremium: false},
]

function setUsersToPremium(users) {
  for (const user of users) {
    user.isPremium = true;
  }
  return users;
}

setUsersToPremium(users);

2. 用普通for循环(传统索引遍历)

如果习惯用索引操作数组,这种写法也很稳妥:

function setUsersToPremium(users) {
  for (let i = 0; i < users.length; i++) {
    users[i].isPremium = true;
  }
  return users;
}

3. 用数组forEach方法(简洁的函数式写法)

数组自带的遍历方法,代码更简洁:

function setUsersToPremium(users) {
  users.forEach(user => {
    user.isPremium = true;
  });
  return users;
}

4. 用map返回新数组(纯函数,不修改原数组)

如果不想改动原数组,而是返回一个新的用户数组,就用map

function setUsersToPremium(users) {
  return users.map(user => ({
    ...user, // 复制原对象的所有属性
    isPremium: true // 覆盖isPremium属性
  }));
}

补充说明

如果一定要用for...in(不推荐遍历数组用这个,因为会遍历到数组原型上的额外属性),那正确写法应该是:

function setUsersToPremium(users) {
  for (let key in users) {
    // 先判断是不是数组自身的属性,避免遍历原型属性
    if (users.hasOwnProperty(key)) {
      users[key].isPremium = true;
    }
  }
  return users;
}

但还是建议用前面几种更适合数组的遍历方式哦~

内容的提问来源于stack exchange,提问作者user2785628

火山引擎 最新活动