时间戳

首页 > 解决方案 > 使用 Javascript .find() 似乎做了一些奇怪的强制，我似乎无法确定

javascript - 使用 Javascript .find() 似乎做了一些奇怪的强制，我似乎无法确定

问题描述

我正在尝试收集所有对象DATA并与schemesFromPOI. 如果名称是AMERICAN_EXPRESS，我只想在scheme对象中将其更改为AMEX，保留DATA对象。

const DATA =
    [
      {
        "name": "MASTERCARD",
        "id": "MASTERCARD123"
      },
      {
        "name": "VISA",
        "id": "VISA456"
      },
      {
        "name": "AMERICAN_EXPRESS",
        "id": "AMEX789"
      }
    ];

const schemesFromPOI = [
  { dpaId: 'DPA1', name: 'MASTERCARD' },
  { dpaId: 'DPA2', name: 'VISA' },
  { name: 'AMERICAN_EXPRESS' }
];

let config = [];

schemesFromPOI.forEach(function (schemeFromPOI) {

  let scheme = DATA.find(function (element) { return element.name === schemeFromPOI.name; });

  if(scheme) {
    if (scheme.name === "AMERICAN_EXPRESS") {
      console.log("Before updating scheme.name property: ", DATA);
      scheme.name = 'AMEX';
      console.log("After updating scheme.name property: ", DATA);
    }

    config.push(scheme);
  }

});

但是，当我更改时scheme.name，DATA对象也会更新。以下是上述控制台输出的结果：

Before updating scheme.name property: "[{'name':'MASTERCARD','id':'MASTERCARD123'},{'name':'VISA','id':'VISA456'},{'name':'AMERICAN_EXPRESS','id':'AMEX789'}]"
After updating scheme.name property: "[{'name':'MASTERCARD','id':'MASTERCARD123'},{'name':'VISA','id':'VISA456'},{'name':'AMEX','id':'AMEX789'}]"

显然，DATA对象正在更新，而不仅仅是scheme对象。为什么会发生这种强制？跟.find()方法有关系吗？

标签： javascriptarraysjavascript-objects

解决方案

这是因为数组是引用类型。因此，当您在编辑时scheme.name = 'AMEX';，这意味着scheme.name将被更改并且在 中找到的对象DATA。

如果要创建一个全新的对象，请使用扩展...运算符：

const data = [
    { name: "John", age: "22", weight: "60", height: "180cm" },
    { name: "Emma", age: "25", weight: "55", height: "160cm" }
];

let obj = data.find(f=> f.name =='John');

let brandNewObject = {...obj};

一个例子：

const data = [
        { name: "John", age: "22", weight: "60", height: "180cm" },
        { name: "Emma", age: "25", weight: "55", height: "160cm" }
    ];
    
    let obj = data.find(f=> f.name =='John');        
    let brandNewObject = {...obj};        
    brandNewObject .name = "Joseph";
    
    console.log(`obj`, obj);
    console.log(`brandNewObject `, brandNewObject );

推荐阅读