代码之家 › 专栏 › 技术社区 › Senal

使用更新数组对象

for-loop arrays javascript

Senal · 技术社区 · 7 年前

id 属性匹配,替换数组 x y 项目。

我可以很容易地从一个普通的老人身上做到这一点循环。但我不明白为什么我的的

let x1 = [{
  id: '1',
  a: 1,
  b: 2
}];

let y1 = [{
  id: '1',
  c: 3,
  b: 2
}];

let x2 = [{
  id: '1',
  a: 1,
  b: 2
}];

let y2 = [{
  id: '1',
  c: 3,
  b: 2
}];



let updateX1 = (x, y) => {

  for (let itemY of y) {

    for (let itemX of x) {

      if (itemY.id === itemX.id) {
        itemX = itemY;
      }
    }
  }

  return x;
}

let updateX2 = (x, y) => {

  for (let i = 0; i < y.length; i++) {

    for (let j = 0; j < x.length; j++) {

      if (y[i].id === x[j].id) {
        x[j] = y[i];
      }
    }
  }

  return x;
}

console.log(updateX1(x1, y1));
console.log(updateX2(x2, y2));

为什么上面两种方法会得到两种不同的结果?提前谢谢!

2 回复 | 直到 7 年前

CertainPerformance 7 年前

重新分配一个变量本身永远不会改变现有的对象,或者至少不会超出非常奇怪的情况。当你这么做的时候

itemX = itemY;

itemX 变量指向 itemY 项目X ,以及 项目X 来自,不会改变。为了改变对象,必须始终显式地为财产对象的,例如 obj.foo , obj['foo'] x[j] = y[i]; .

HMR 7 年前

如果你想做的实际上是你说的:

如果id属性匹配,则用数组y替换数组x项项目

然后您可以使用 map find :

const x = [
  { id: 1, name: 'should be replaced by y' },
  { id: 2, name: 'not replaced' },
];
const y = [
  { id: 1, name: 'this is from y' },
  { id: 3, name: 'not not used' },
];

const newX = x.map((xItem) => {
  const fromY = y.find((yItem) => yItem.id === xItem.id);
  return fromY ? fromY : xItem;
});
console.log(newX);

如果你想要的是突变,那么你可以使用 forEach 因为这对副作用更合适

const x = [
  { id: 1, name: 'should be replaced by y' },
  { id: 2, name: 'not replaced' },
];
const y = [
  { id: 1, name: 'this is from y' },
  { id: 3, name: 'not not used' },
];
//mutate x
x.forEach((xItem, index) => {
  const fromY = y.find((yItem) => yItem.id === xItem.id);
  x[index] = fromY ? fromY : xItem;
});
console.log(x);

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

6 月前

Alex · 在轻量级中同时解构和不解构变量

6 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

6 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

6 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

user3472810 · Angular@Output/EventEmitter返回undefined

6 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

6 月前