javascript设置数组对象中的key值方法

这篇具有很好参考价值的文章主要介绍了javascript设置数组对象中的key值方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

方法一:保留旧数组 key 和 value ;

var arr = [
	{label: "张三", value: 1},
    {label: "李四", value: "2"},
    {label: "王五", value: "3"}
];
arr = arr.map(item => ({
	 ...item,
    new_key: item.value
}));

arr打印结果:[
	{label: "张三", value: 1, new_key:1},
    {label: "李四", value: 2, new_key:2},
    {label: "王五", value: 3, new_key:3}
]

方法二:不保留旧数组 key 和 value ;

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

var newArr = [];    //新数组
arr.map(item => {
    let obj = {
        name: item.name,
        value: item.count,
    }
     newArr.push(obj);
});

<2> 使用forEach循环 + for循环,通过Object.keys()来改变属性key;文章来源地址https://www.toymoban.com/news/detail-570164.html

changeKey (arr, key) {
    let newArr = []; // 创建一个新数组
    arr.forEach((item, index) => {
        let obj = {}; // 新数组里的新对象
        for (var i = 0; i < key.length; i++) {
            obj[key[i]] = item[Object.keys(item)[i]]; // 将key值替换掉
        }
        newArr.push(obj);
    })
    console.log(newArr,'newArr');
    return newArr;
};

let newArr = this.changeKey(arr, ['name','value']);

到了这里,关于javascript设置数组对象中的key值方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 〖大前端 - 基础入门三大核心之JS篇㉔〗- JavaScript 的数组的常用方法 (一)

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月07日
    浏览(55)
  • 从 JavaScript 中的数组中删除空对象

    从数组中删除空对象: 使用 Array.filter() 方法遍历数组。 将每个对象传递给 Object.keys() 方法并检查键的长度是否不等于 0。 filter 方法将返回一个不包含空对象的新数组。 我们传递给 Array.filter 方法的函数被数组中的每个元素(对象)调用。 如果函数返回真值,则 filter 方法将

    2024年02月01日
    浏览(56)
  • 【前端灵魂脚本语言JavaScript⑤】——JS中数组的使用

    🐚 作者: 阿伟 💂 个人主页: Flyme awei 🐋 希望大家多多支持😘一起进步呀! 💬 文章对你有帮助👉关注✨点赞👍收藏📂 第一种: var 数组名 = new Array(); 创建一个空数组 第二种: var arr2 = new Array(10); 创建一个定长为10的数组 第三种 var arr3 = new Array(a,b,c); 创建时直接指定元素值

    2023年04月08日
    浏览(57)
  • 〖大前端 - 基础入门三大核心之JS篇㉓〗- JavaScript 的「数组」

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月04日
    浏览(67)
  • js中的内置对象、数学对象、日期对象、数组对象、字符串对象

    car、computer div、p window、console 数学对象 Math (object类型) 1、圆周率 Math.PI 2、向下取整(返回值) Math.floor() 3、向上取整(返回值) Math.ceil() 4、四舍五入 Math.round() 5、随机数 0x1 Math.random() 6、绝对值 Math.abs() 7、最大值 Math.max() 8、最小值 Math.min() 9、指数幂 Math.pow(底数,指数) 10、平

    2024年01月24日
    浏览(42)
  • 【前端|Javascript第5篇】全网最详细的JS的内置对象文章!

    前言 在当今数字时代,前端技术正日益成为塑造用户体验的关键。我们在开发中需要用到很多js的内置对象的一些属性来帮助我们更快速的进行开发。或许你是刚踏入前端领域的小白,或者是希望深入了解内置对象的开发者,不论你的经验如何,本篇博客都将给你详细的讲解

    2024年02月12日
    浏览(53)
  • JavaScript判断数组对象是否含有某个值的方法(6种)

    文章内容 文章链接 vue3 antd table表格的增删改查(一) input输入框根据搜索【后台管理系统纯前端filter过滤】 https://blog.csdn.net/XSL_HR/article/details/128072584?spm=1001.2014.3001.5501 vue3 antd table表格的增删改查(二) input输入框根据搜索【后台管理系统 请求后端接口 前后端

    2024年02月06日
    浏览(59)
  • js判断对象数组中的元素是否存在重复

     1、使用  Array.some()  方法和自定义比较函数: 使用  Array.some()  方法遍历数组,对每个元素执行自定义的比较函数。比较函数使用  Array.findIndex()  方法来查找与当前元素相等且索引不同的元素,如果找到则表示存在重复元素。 2、使用  Set  数据结构: 使用  Set  数据结

    2024年02月13日
    浏览(61)
  • 前端js实现将数组某一项符合条件的对象,放到首位

    哈喽 大家好啊 在日常前端开发需求中,总是会遇到开发数组,将某一项对象值,放到首位,让用户更好的去选择,比如省会城市优先等 我做的案例是需要将地区中的\\\'四川放到首位\\\' 以下是我的代码: 简单说明下思路: 1.首先将接口中的数组暂存起来,用一个新数组表示 2

    2024年02月07日
    浏览(44)
  • 前端js 数据结构:对象 object、数组Array 、Map 的创建、增删改 / 遍历数据

    对象:由一组键值对组成的无序集合,可以通过键来获取对应的值。 每个键值对中的键是唯一的,值可以是任意类型的数据。 对象通常用来表示实体的属性和方法。 1.1.1 对象字面量(最常用): {} 对象字面量:通过在大括号 {} 中定义对象的属性和方法来创建对象。 这是最简单

    2024年01月21日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包