了解 Javascript 中 Find 方法的行为

Question

let arr = [{ age: 3 }, { age: 5 }, { age: 6 }, { age: 7 }];
let exists = arr.find(x => x.age < 4);
exists.age += 1;
console.log(arr);

//output is [{age:4},{age:5},{age:6},{age:7}];

在上面的示例中，我正在更新 find 方法返回的结果，但它也更改了原始数组的值，为什么会这样？

Answer 1

Array.prototype.find将返回满足您作为回调 function 传递的条件的第一个元素。

由于您正在寻找age属性小于4的 object 。 所以它将返回第一个对象（其age为3 ）。 因此，如果您要检查exists和arr[0]的相等性，那么它将返回满足条件的 object

 let arr = [{ age: 3 }, { age: 5 }, { age: 6 }, { age: 7 }]; let exists = arr.find((x) => x.age < 4); console.log(exists === arr[0])

因此，如果您要对find方法返回的 object 进行任何类型的突变，那么原始 object 将反映这些变化。

因为两者都是相同的 object 只是不同的参考。

---

如果您不想改变原始 object，那么您应该在对 object 进行任何类型的更改之前克隆它。

Note: Both of the following method does shallow copy

1)使用spread syntax

 let arr = [{ age: 3 }, { age: 5 }, { age: 6 }, { age: 7 }]; let exists = arr.find((x) => x.age < 4); const clone = {...exists }; clone.age += 1; console.log(arr);

 /* This is not a part of answer. It is just to give the output full height. So IGNORE IT */.as-console-wrapper { max-height: 100%;important: top; 0; }

2)使用Object.assign

 let arr = [{ age: 3 }, { age: 5 }, { age: 6 }, { age: 7 }]; let exists = arr.find((x) => x.age < 4); const clone = Object.assign({}, exists); clone.age += 1; console.log(arr);

Answer 2

因为你有一个 object 引用数组。 在 JavaScript 中，对象实际上存储在其他地方（称为“堆”），而 object 变量实际上只包含对 object 的引用。 所以原因是因为您正在更新相同的 object。

如果要对 object 进行浅层克隆，可以使用Object.assign({}, obj) 。

此外，与您的问题没有直接关系，如果您的 object 属性本身包含其他 object 引用，包括 arrays，并且您希望它们也成为副本，那么您必须深入了解它们。 这不是由库存 JavaScript function 或方法自动完成的。 您必须找到为您执行此操作的代码或自己编写。 上次我这样做时，我使用了 randa 的克隆 function，因为我团队中的另一个开发人员已经将 ramda 库导入到我们的项目中。 对您的项目最有意义的可能会有所不同。

Answer 3

这是因为 JavaScript 中的对象是通过引用传递的，所以你得到了 object ( {age: 3} ) 存在，然后在它的“年龄”键上加了 1，所以原来的 ZA8CFDE6331BD59EB62AC96F8911C4 也发生了变化。

 let obj1 = {age: 3, name: 'jack' } let obj2 = obj1 console.log(obj1 === obj2 ) // true // if you change the second object, the first one will change too: obj2.age = 15 console.log(obj1, obj2 ) // obj1 = { age: 15, name: 'jack' } // obj2 = { age: 15, name: 'jack' }