JS如何修改数组对象的Key和指定的值

 更新时间:2023年10月16日 16:42:16   作者:SwJieJie  
这篇文章主要介绍了JS如何修改数组对象的Key和指定的值,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

js修改数组对象的Key和指定的值

1,修改数组对象的Key

 /**/
    var Arrydata = [{name:'Lily',age:18},{name:'BKqq',age:22}]
    //旧key到新key的映射
    var keyMap = {
      // id: "value",
      name: "label",
      age: "value"
    };
    for (var i = 0; i < Arrydata.length; i++) {
      var obj = Arrydata[i];
      for (var key in obj) {
        var newKey = keyMap[key];
        if (newKey) {
          obj[newKey] = obj[key];
          delete obj[key];
        }
      }
    }
    console.log(Arrydata,'修改后数组对象---')

2,修改数组对象中指定的值

var stooges = [
            {label:1,value:1,placeCode: 'sh', stock_code: 40},
            {label:1,value:1,placeCode: 'sh', stock_code: 50},
            {label:1,value:1,placeCode: 'sz', stock_code: 60,status:1},
            {label:1,value:1,placeCode: 'sz', stock_code: 39,status:1}
        ];
  for(var i=0;i<stooges.length;i++){
      stooges[i].placeCode === 'sh'?stooges[i].placeCode = '沪': stooges[i].placeCode = '深'
  }
  console.log(stooges,'值修改后数组对象---')

js修改对象数组的key值

实例:将dataOld这个对象数组的对象中的属性key变成dataNew中的形式;

//原数据
dataOld: [{ count: '33', area: '122.2', districtId: 43000 }, { count: '44', area: '168.2', districtId: 43001 }] 
//接口需要的数据
dataNew: [{ countAll: '33', countArea: '122.2', districtId: 43000 }, { count: '44', area: '168.2', districtId: 43001 }]

方法一:使用map循环,在map循环内创建一个新对象,将item要改变的key赋给新创建的对象里面新key值,然后push给一个新创建的数组dataNew即可;

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

方法二:使用map循环 + replace替换,通过循环然后将子类JSON.stringify后采用replace来改变属性key;

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

方法三:使用forEach循环 + for循环,通过Object.keys()来改变属性key;

convertKey (arr, key) {
    let dataNew = []; //新数组
    this.dataOld.forEach((item, index) => {
        let obj = {}; //新数组里的新对象
        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']);

结果:

到此这篇关于js修改数组对象的Key和指定的值的文章就介绍到这了,更多相关js修改数组对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 通过Javascript读取本地Excel文件内容的代码示例

    通过Javascript读取本地Excel文件内容的代码示例

    这篇文章主要介绍了通过Javascript读取本地Excel文件内容的代码示例,但需要一定的条件才可以使用js操作本地文件,需要的朋友参考下吧
    2014-04-04
  • JavaScript修剪字符串的方法和技巧

    JavaScript修剪字符串的方法和技巧

    你在 JavaScript 代码编写中有遇到过一个你需要比较或操作处理字符串,但是在开始或者结尾有额外空格的情况吗?在这篇博客中,我将给你展示如何使用不同的方法在 JavaScript 中修剪字符串,需要的朋友可以参考下
    2024-02-02
  • 利用Query+bootstrap和js两种方式实现日期选择器

    利用Query+bootstrap和js两种方式实现日期选择器

    日期选择器在我们平时开发的时候经常要用到,下面这篇文章主要给大家介绍了利用Query+bootstrap和js这两种方式实现日期选择器的方法,文中两种方法都给出了详细的示例代码,有需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-01-01
  • 微信小程序加载机制及运行机制图解

    微信小程序加载机制及运行机制图解

    这篇文章主要介绍了微信小程序加载机制及运行机制图解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • 让IE8支持DOM 2(不用框架!)

    让IE8支持DOM 2(不用框架!)

    众所周知,IE8开放了对DOM原型的支持以及ECMA v5的两个新方法——Object.defineProperty和Object.getOwnPropertyDexcriptor(单词好长……),并且这两个新方法居然只能用于DOM。
    2009-12-12
  • Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码

    Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码

    这篇文章主要介绍了Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • 文本框回车提交与禁止提交示例

    文本框回车提交与禁止提交示例

    文本框输入数据后使用回车进行提交,想必大家都尝试过吧,在本文有个不错的示例,喜欢的朋友可以参下
    2013-09-09
  • 微信小程序计算器实现案例详解

    微信小程序计算器实现案例详解

    最近继续玩一些微信小程序的api来做例子,感觉自己可能创造力不很足,只能模仿着别人的例子来做一个自己的计算器了,下面这篇文章主要给大家介绍了关于微信小程序计算器实现案例的相关资料,需要的朋友可以参考下
    2023-06-06
  • JavaScript如何监测数组的变化

    JavaScript如何监测数组的变化

    最近在造轮子的时候遇到了这么一个问题,那就是数组在调用内部方法的时候怎么才可以监听到数组发生了变化,这篇文章主要给大家介绍了关于JavaScript如何监测数组变化的相关资料,需要的朋友可以参考下
    2021-07-07
  • javascript数组排序汇总

    javascript数组排序汇总

    本文给大家汇总了一下javascript的数组排序算法,包括冒泡排序、快速排序、插入排序、希尔排序,希望对大家熟悉javascript数组排序能够有所帮助。
    2015-07-07

最新评论