对象值不更新javascript

Question

const displayDataTypes = [];
const TypeMap = {
  data: ['type2', 'type3'],
};
  
const Type = {
  title: 'Type',
  values: [
    { label: 'Type-1', value: 'type1', disabled: false },
    { label: 'Type-2', value: 'type2', disabled: false },
    { label: 'type-3', value: 'type3', disabled: false },
    { label: 'type-4', value: 'type4', disabled: false },
    { label: 'type-5', value: 'type5', disabled: false }
  ]
};
  
const TypesSelection = TypeMap['data'];  
  
Type.values.forEach((item) => {
  const tmp = Object.create(item);
  TypesSelection.forEach((type) => {
    if (tmp.value !== type) {
      tmp.disabled = true;
    }
  });
  displayDataTypes.push(tmp);
});
  
console.log(displayDataTypes);

在上面的代码中，每个对象属性disabled都是true。我需要type2和type3应该是假的，rest应该是真的，因为TypeMap - data。所以输出应该是

[
  { label: 'Type-1', value: 'type1', disabled: true  },
  { label: 'Type-2', value: 'type2', disabled: false },
  { label: 'type-3', value: 'type3', disabled: false },
  { label: 'type-4', value: 'type4', disabled: true  },
  { label: 'type-5', value: 'type5', disabled: true  }
]

Answer 1

使用Array.map函数尝试一下：

const output = Type.values.map(v => {
  v.disabled = !TypesSelection.includes(v.value);
  return v;
})

console.log(output)

这不仅更小，而且更具可读性。

了解有关Array.map函数的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Answer 2

问题出在迭代中。在某一时刻，tmp.value将是'type2'，而将是'type3'。这将导致将'type2‘对象的disabled设置为true。

我想这就是你想要的。

​

const Type = {
  title: 'Type',
  values: [
{
  label: 'Type-1',
  value: 'type1',
  disabled: false,
},
{
  label: 'Type-2',
  value: 'type2',
  disabled: false,
},
{
  label: 'type-3',
  value: 'type3',
  disabled: false,
},
{
  label: 'type-4',
  value: 'type4',
  disabled: false,
},
{
  label: 'type-5',
  value: 'type5',
  disabled: false,
},
  ],
};
  
const TypeMap = {
  data: ['type2', 'type3']
};
  
const TypesSelection = TypeMap['data'];
const displayDataTypes = Type.values.map(item => {
  const shallowCopy = {...item};
  if (TypesSelection.every(type => (type !== shallowCopy.value))) {
shallowCopy.disabled = true;
  }
  return shallowCopy;
});
  
console.log(displayDataTypes);

​

我建议不要使用名为"disable“的属性，因为它会导致令人困惑的双重否定情况。请改用"enabled“。当然，这是假设您能够控制属性名称。

如果您不需要在副本上保留初始的“禁用”状态，并且不需要副本，那么使用Ilijaz的答案中的更小/更简单的实现。

Answer 3

你的代码失败了，因为正确的结果被你的内部循环的其他迭代所覆盖。

您当前的结构是两步：

1. 遍历Type.values
2. Loop中的每个值，遍历TypeMap.data中的每个值，并检查这两个元素是否与

不匹配

作为第二步的结果，即使是匹配的元素也会与另一个不匹配的元素进行比较，导致条件代码无论如何都会被执行。

例如：

1. 外部循环：
   1. 项目为type2

条件类型内循环:条件类型为type2

• check条件：false

• Skip is code

在以下条件下，

1. 内循环代码类型现在为true

：

1. is true
2. ，type3 !== type3 is true
3. run conditional code，将disabled设置为true

因此，所有disabled都将始终设置为true。

使用嵌套的forEach并不是很适合这个用例，因为没有直接的方法来避免这个问题。如果您仍然希望将forEach用于外部循环，则可以，或者可以使用map()进一步简化，正如@Ilijaz在another answer中建议的那样。

使用forEach和Array.prototype.includes

​

const displayDataTypes = [];

const TypeMap = {
  data: ['type2', 'type3'],
};

const Type = {
  title: 'Type',
  values: [{
      label: 'Type-1',
      value: 'type1',
      disabled: false,
    },
    {
      label: 'Type-2',
      value: 'type2',
      disabled: false,
    },
    {
      label: 'type-3',
      value: 'type3',
      disabled: false,
    },
    {
      label: 'type-4',
      value: 'type4',
      disabled: false,
    },
    {
      label: 'type-5',
      value: 'type5',
      disabled: false,
    },
  ],
};

const TypesSelection = TypeMap['data'];

Type.values.forEach((item) => {
  const tmp = Object.create(item);
  if (!TypesSelection.includes(tmp.value)) {
    tmp.disabled = true;
  }
  displayDataTypes.push(tmp);
});

console.log(displayDataTypes);

.as-console-wrapper {
  max-height: 100% !important;
}

​