Javascript 如果有任何更改，如果不返回相同的对象，如何更新对象值？

这里我有一个对象，即ApiData1。其中属性内有颜色键值对。我正在根据ApiData2值numberOfProjects更改颜色值，并且有一个范围，其中numberOfProjects值位于一组范围之间，我正在更新颜色值。它工作得很好

在某些情况下，ApiData2值将为null。在这种情况下，它必须返回默认值，即ApiData1中存在的值。但根据我的代码，它删除了这个值。我不知道如何解决这个问题。请帮我做这个。在这里我分享工作演示链接

---

这段代码中有很多需要修改的地方，所以我从一个粗略的过程开始-

//pass1.js 函数更新颜色 {let范围=[ { 最低限额：1， 最高限额：2000， 颜色：1 }, { 最低限额：2000， 最高限额：4000， 颜色：2 }, { 最低限额：4000， 最高限额：6000， 颜色：3 } ] 函数updatePropertiesfeature，colorValue {返回{ …功能。属性， 颜色：colorValue }; } 设newData={ …ApiData1， 功能：ApiData1.features.mapfeature=>{ const data2=ApiData2.findx=> feature.properties.stateId==x.latestMetric.stateId 让新值 range.forEachi=>{ 让值 如果 数据2.latestMetric.numberOfProjects>=i.最小值&& data2.latestMetric.numberOfProjects{ const data2=ApiData2.findx=> // //臭虫！ //TypeError:无法读取null的属性“stateId” //ApiData2=[。。。 // { //id:13， //姓名：马哈拉施特拉邦， //代码:PY,， //纬度：22.9964948， //经度：87.6855882， //latestMetric:null // } // feature.properties.stateId==x.latestMetric.stateId // ... } } 返回新数据 } 在尝试深度属性访问之前，必须进行空检查-

const data2=ApiData2.findx=> feature.properties&&x.latestMetric&&//{ // ... range.forEachi=>{ 让值 如果 // //臭虫！ //TypeError:无法读取未定义的属性“latestMetric” //data2是'ApiData2.find'的结果` //如果未找到元素，`.find`返回未定义的 // 数据2.latestMetric.numberOfProjects>=i.最小值&& data2.latestMetric.numberOfProjects 减少 mr，p=>mr.chainr=>safePropr，p ，fromNullableo 导出{safeProp，safeProps} Safepropapita1型 //只是{value:FeatureCollection} 安全丙烷酯1，zzz //没什么{} safePropsApiData[功能，0，类型] //只是{value:Feature} SAFEPROPSAPIDATA[功能，0，属性，颜色] //只是{value:1} SAFEPROPSAPIDATA[功能，999，属性，颜色] //没什么{} 也许可以让我们以更安全的方式处理可为空的值-

Safepropapita1型 //只是{value:FeatureCollection} 找不到safePropApiData1，类型为.GetOrelse！ //特色收藏 安全丙烷酯1，zzz //没什么{} 未找到safePropApiData1，zzz.GetOrelse！ //没有找到！ 事情开始成形了。让我们现在找一个更安全的地方-

//Util.js 导入/。。。 常量标识=x=>x const safeFind=a=[]，f=identity=> fromNullablea.findf const safeProp/。。。 const safeProps/。。。 导出{safeFind，//…} //Main.js 从导入{safeFind，safeProp，safeProps}。/Util 常量Api2FindByStateId=q=null=> 安全发现 Apidat2 ，x=> safePropsx，[最新计量，stateId] .mapstateId=>stateId==q .getOrElsefalse 函数更新颜色 { // ... 返回{ …ApiData1， 功能：ApiData1.features.mapfeature=>{ 常数数据2= safePropsfeature，[属性，状态ID] .chainApi2FindByStateId //射程 } } } 我们不希望每次使用对象时都使用safeProp。它只用于形状不确定的对象。我们希望尽可能编写我们可以依赖的具体对象。这是定义范围模块的最佳时机-

//Range.js 常数范围=min=0，max=0，data=null=> {min:parsemin，max:parsemax，data} const inRange={min，max}=range，x=0=> x>=最小值和&x<最大值 const parse=n=> 编号.isIntegern？编号：0 导出{range，inRange}// 安全系数，r=>inRanger，q 函数更新颜色 {返回{ …ApiData1， 功能：ApiData1.features.mapfeature=>{ 常量默认颜色= safePropsfeature[属性、颜色] .getOrElse0 康斯特纽科勒= safePropsfeature，[属性，状态ID] .chainApi2FindByStateId .chaindata2=>safePropsdata2[latestMetric，numberOfProjects] chainfindRange先生 .chainrange=>safePropra 数据、颜色 .getOrElsedefaultColor 返回{…功能，属性：{…功能.properties，颜色：newColor} } } }

---

console.logJSON.stringifyupdateColor，null，2//我正在做类似的事情。我会尽快给你写一个答案。你能更新问题以给出你想要的准确输出吗？我已经编辑了我的问题。请看一看ApiData2值为null的值是否意味着整个ApiData2数组将为null？否。如果在ApiData2中看到第四个对象，则latestMetric为null。在这种情况下，ApiData1值（即第四个对象）将保持不变。程序中的技术复杂性令人惊讶。我的最新答案试图提炼出来，但仍有一些地方需要改进。如果你有具体的问题，lmk和我会尽量回答他们，当我为另一个更新腾出时间：DHi，非常感谢你的时间和你付出的努力。你能和我分享一下我应该选择哪种解决方案吗。这里你从某处导入了range和util，这让我很难得到它：range和util在答案中定义。向您展示这些部分是独立的，不应该与您的组件放在同一个文件中，这很有意义。

let ApiData1 = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 10,
                "stateId": 10,
                "name": "Tamil Nadu",
                "code": "TN"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 11,
                "stateId": 11,
                "name": "Karnataka",
                "code": "KA"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 12,
                "stateId": 12,
                "name": "Pondicherry",
                "code": "PY"
            }
        },
         {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 6,
                "id": 13,
                "stateId": 13,
                "name": "Maharashtra",
                "code": "TT"
            }
        },

    ]
}

let ApiData2 = [
    {
        id: 10,
        name: "Tamil Nadu",
        code: "TN",
        latitude: 29.9964948,
        longitude: 81.6855882,
        latestMetric: {
            stateId: 10,
            year: 0,
            numberOfProjects: 1433,
        }
    },
    {
        id: 11,
        name: "Karnataka",
        code: "KA",
        latitude: 21.9964948,
        longitude: 82.6855882,
        latestMetric: {
            stateId: 11,
            year: 0,
            numberOfProjects: 3500,
        }
    },
    {
        id: 12,
        name: "Pondicherry",
        code: "PY",
        latitude: 22.9964948,
        longitude: 87.6855882,
        latestMetric: {
            stateId: 12,
            year: 0,
            numberOfProjects: 5500,
        }
    },
    {
        id: 13,
        name: "Maharashtra",
        code: "PY",
        latitude: 22.9964948,
        longitude: 87.6855882,
        latestMetric: null
    }
];


function updateColor() {  
     function updateProperties(colorJsonObject, colorValue) {
        let updatedProperties = {
            ...colorJsonObject.properties,
            color: colorValue
        };
        /* console.log(updatedProperties) */
        return updatedProperties;

    }

    let range = [
        {
            "Minimum": 1,
            "Maximum": 2000,
            "color": 1
        },
        {
            "Minimum": 2000,
            "Maximum": 4000,
            "color": 2
        },
        {
            "Minimum": 4000,
            "Maximum": 6000,
            "color": 3
        }
    ]

    let newData = {
       ...ApiData1,
       features: ApiData1.features.map(colorObject => {
           const apiData = ApiData2.find(apiData => {
            if (
                colorObject.properties.stateId === apiData.latestMetric.stateId
            ) {
                return true;
            }
            return false;
          });
          console.log(apiData)
          let newValue;
          range.forEach(i => {
                    if (
                        apiData.latestMetric.numberOfProjects >= i.Minimum &&
                        apiData.latestMetric.numberOfProjects <= i.Maximum
                    ) {

                            let value = updateProperties(colorObject, i.color)
                        newValue = {...colorObject,properties:value}
                    }
                });
           return newValue;
       })
    }


    return newData;
}

let colorValue = updateColor();

 console.log(colorValue) 

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 10,
                "stateId": 10,
                "name": "Tamil Nadu",
                "code": "TN"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 2,
                "id": 11,
                "stateId": 11,
                "name": "Karnataka",
                "code": "KA"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 3,
                "id": 12,
                "stateId": 12,
                "name": "Pondicherry",
                "code": "PY"
            }
        },
         {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 6,
                "id": 13,
                "stateId": 13,
                "name": "Maharashtra",
                "code": "TT"
            }
        },

    ]
}