JS / TS如何遍历对象数组和更改值

Question

考虑以下数组。

routingButtonsHighlighter = [
  {vehicle: true},
  {userAssignment: false},
  {relations: false}
];

构建可以实现以下目标的功能的最佳方法是什么？

1）将所有成员设置为false 2）将选择的成员设置为true（作为参数传递）

Answer 1

您可以使用Array.forEach()迭代数组，使用Object.keys()获取密钥，与所选密钥进行比较，然后相应地设置值：

const routingButtonsHighlighter = [{vehicle: true}, {userAssignment: false}, {relations: false}];

const select = (arr, selectedKey) =>
  arr.forEach((o) => {
    const key = Object.keys(o)[0];
    
    o[key] = key === selectedKey;
  });
  
select(routingButtonsHighlighter, 'userAssignment');

console.log(routingButtonsHighlighter);

Answer 2

由于没有更具体的要求，这是您自己选择的冒险方式。

（注意：为简便起见，此代码使用ES6 computed property names和destructuring assignment和ES2018 object spread syntax，所有这些都可以通过TypeScript进行编译。）

如果每个对象都只有一个键

• ...并且您想对原始数组和对象进行变异

const objects = [ { vehicle: true }, { userAssignment: false }, { relations: false } ];

function selectKey(objects, selectedKey) {
  for (let obj of objects) {
    const [key] = Object.keys(obj);
    obj[key] = key === selectedKey;
  }
  return objects;
}

selectKey(objects, 'userAssignment');
console.log(objects);

• ...，您想要一个新的新对象数组

const objects = [ { vehicle: true }, { userAssignment: false }, { relations: false } ];

function selectKey(objects, selectedKey) {
  const newObjects = [];

  for (let obj of objects) {
    const [key] = Object.keys(obj);
    newObjects.push({ [key]: key === selectedKey });
  }
  
  return newObjects;
}

console.log(selectKey(objects, 'userAssignment'))

• ...但是您真的很喜欢功能样式

const objects = [ { vehicle: true }, { userAssignment: false }, { relations: false } ];

function selectKey(objects, selectedKey) {
  return objects.map(obj => {
    const [key] = Object.keys(obj);
    return { [key]: key === selectedKey };
  });
}

console.log(selectKey(objects, 'userAssignment'))

如果对象可以有多个键

• ...并且您想对原始数组和对象进行变异

const objects = [
  { vehicle: true, relations: false },
  { userAssignment: false, vehicle: true },
  { relations: false, userAssignment: false },
];

function selectKey(objects, selectedKey) {
  for (let obj of objects) {
    for (let key of Object.keys(obj)) {
      obj[key] = key === selectedKey;
    }
  }
  return objects;
}

selectKey(objects, 'userAssignment');
console.log(objects);

• ...，您想要一个新的新对象数组

const objects = [
  { vehicle: true, relations: false },
  { userAssignment: false, vehicle: true },
  { relations: false, userAssignment: false },
];

function selectKey(objects, selectedKey) {
  const newObjects = [];

  for (let obj of objects) {
    const newObj = {};
    for (let key of Object.keys(obj)) {
      newObj[key] = key === selectedKey;
    }
    newObjects.push(newObj);
  }
  
  return newObjects;
}

console.log(selectKey(objects, 'userAssignment'))

• ...但是您真的很喜欢功能样式

const objects = [
  { vehicle: true, relations: false },
  { userAssignment: false, vehicle: true },
  { relations: false, userAssignment: false },
];

function selectKey(objects, selectedKey) {
  return objects.map(obj =>
    Object.keys(obj).reduce((newObj, key) =>
      ({ ...newObj, [key]: key === selectedKey }),
      {}
    )
  );
}

console.log(selectKey(objects, 'userAssignment'))

Answer 3

为这样的事情创建方法将是高度专业的，因此为了对其进行抽象，我决定将其编写为：

function arrayFlagSinglePropertyTrue(key, arrayofobjects) {

    for (let i in arrayofobjects) {

        let keys = Object.keys(arrayofobjects[i]);
        if (keys[0] == key) {
            arrayofobjects[i][keys[0]] = true;
        } else {
            arrayofobjects[i][keys[0]] = false;
        }

    }

    return arrayofobjects;

}

routingButtonsHighlighter = [
    {vehicle: true},
    {userAssignment: false},
    {relations: false}
];

console.log(arrayFlagSinglePropertyTrue("relations", routingButtonsHighlighter));

尽管这可以满足您的要求，但它具有高度的专业性，并且仅在数组中的对象包含一个属性或者至少对象中的第一个属性是您要设置的属性时才起作用。 / p>

---

编辑：一些建议：

列表中的一致性有助于避免出现问题。通过使用统一的属性名称构造对象，然后对值本身进行操作，您不再需要使用专用功能或代码来对其进行修改。此时，您可以依靠基本的编程逻辑来有效地更改属性。

如果您从某个外部来源获得列表，并且无法控制它，那么您可能需要自己重新组织它。如果您不能这样做，那么最后一种选择就是制作专门的功能/代码。

如果可能，请采取以下措施：

routingButtonsHighlighter = [
    {vehicle: true},
    {userAssignment: false},
    {relations: false}
];

将其组织成这样的形式，其中实际对象属性是一致的：

let betterStructureObject = [
    { propertyName: "vehicle", status: true },
    { propertyName: "userAssignment", status: false },
    { propertyName: "vehicle", status: false },
]

因此您可以轻松地遍历它，而不必担心编写专门的代码。

for (let i in betterStructureObject) {

    if (betterStructureObject[i].propertyName == "vehicle")
         betterStructureObject[i].status = true;

    else betterStructureObject[i].status = false;

}