快捷導(dǎo)航

js如何修改對象數(shù)組的key值

更新時(shí)間：2024年02月28日 09:21:23 作者：Lemon今天學(xué)習(xí)了嗎

這篇文章主要介紹了js如何修改對象數(shù)組的key值問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

js修改對象數(shù)組的key值

實(shí)例

將dataOld這個(gè)對象數(shù)組的對象中的屬性key變成dataNew中的形式；

//原數(shù)據(jù)
dataOld: [{ count: '33', area: '122.2', districtId: 43000 }, { count: '44', area: '168.2', districtId: 43001 }] 
//接口需要的數(shù)據(jù)
dataNew: [{ countAll: '33', countArea: '122.2', districtId: 43000 }, { count: '44', area: '168.2', districtId: 43001 }]

方法一

使用map循環(huán)，在map循環(huán)內(nèi)創(chuàng)建一個(gè)新對象，將item要改變的key賦給新創(chuàng)建的對象里面新key值，然后push給一個(gè)新創(chuàng)建的數(shù)組dataNew即可；

let dataNew = [];    //新數(shù)組
dataOld.map(item => {
    let obj = {
        countAll: item.count,
        countArea: item.area,
        districtId: item.districtId,
    }
     dataNew.push(obj);
});

方法二

使用map循環(huán) + replace替換，通過循環(huán)然后將子類JSON.stringify后采用replace來改變屬性key；

let dataNew = [];    //新數(shù)組
dataOld.map(item => {
    let _item = JSON.parse(JSON.stringify(item).replace('count', 'countAll').replace('area', 'countArea'));
    dataNew.push(_item)
});

方法三

使用forEach循環(huán) + for循環(huán)，通過Object.keys()來改變屬性key；

convertKey (arr, key) {
    let dataNew = []; //新數(shù)組
    this.dataOld.forEach((item, index) => {
        let obj = {}; //新數(shù)組里的新對象
        for (var i = 0; i < key.length; i++) {
            obj[key[i]] = item[Object.keys(item)[i]]; //key值替換  
        }
        dataNew.push(obj);
    })
    console.log(dataNew,'dataNew');
    return dataNew;
},
                                            // 改變后的key
let dataNew = this.convertKey(this.dataOld, ['countAll', 'countArea', 'districtId']);

結(jié)果：

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript中關(guān)鍵字 in 的使用方法詳解
這篇文章主要介紹了JavaScript中關(guān)鍵字 in 的使用方法詳解,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-10-10
JavaScript瀑布流布局實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript瀑布流布局的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
普通Fetch和Fetch流式的區(qū)別詳解(極簡代碼示例)
流式是一種傳輸技術(shù),與非流式的最大區(qū)別是,數(shù)據(jù)或頁面不是一次發(fā)送給前端,而是使用流的方式,分塊傳輸?shù)角岸?這篇文章主要介紹了普通Fetch和Fetch流式區(qū)別的相關(guān)資料,需要的朋友可以參考下
2026-04-04
JS把年月日轉(zhuǎn)為時(shí)間戳的操作方法
在JavaScript中,將年月日轉(zhuǎn)換為時(shí)間戳可以通過多種方式實(shí)現(xiàn),下面給大家分享JS把年月日轉(zhuǎn)為時(shí)間戳的操作方法,感興趣的朋友跟隨小編一起看看吧
2024-08-08
Javascript 變量作用域兩個(gè)可能會(huì)被忽略的小特性
關(guān)于Javascript，大家肯定都很熟悉啦，對于有編程經(jīng)驗(yàn)的朋友來說，Javascript很快就能上手，不過關(guān)于JS的變量作用域，還是有一點(diǎn)差別的。
2010-03-03
JS組件系列之使用HTML標(biāo)簽的data屬性初始化JS組件
這篇文章主要介紹了JS組件系列之使用HTML標(biāo)簽的data屬性初始化JS組件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
JSON.stringify()方法使用小結(jié)
本文主要介紹了JSON.stringify()方法使用小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2025-11-11
理解Javascript_03_javascript全局觀
今天讓我們站在語言的高度來看一下Javascript都有點(diǎn)什么。因?yàn)槭侨中缘母╊?，所以不針對?xì)節(jié)作詳細(xì)的講解。
2010-10-10
原生js ActiveXObject獲取execl里面的值
使用原生js獲取execl里面的值，想必有很多的朋友都不會(huì)吧，下面有個(gè)不錯(cuò)的方法主要是使用ActiveXObject來實(shí)現(xiàn)，感興趣的朋友可不要錯(cuò)過
2013-11-11
js判斷手機(jī)瀏覽器操作系統(tǒng)和微信瀏覽器的方法
做手機(jī)端的前端開發(fā)，少不了對手機(jī)平臺的判斷。如，對于app下載，就要判斷在Android平臺下就顯示Android下載提示；在iOS平臺下就顯示iOS下載提示
2016-04-04