JavaScript获取数组对象里面的键(key)和值(value)

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

知识回调

知识专栏 专栏链接
JavaScript知识专栏 https://blog.csdn.net/xsl_hr/category_12024214.html?spm=1001.2014.3001.5482

有关JavaScript的相关知识可以前往JavaScript知识专栏查看复习!!

场景复现

在后台管理系统的项目开发中,对于后端接口返回的数据进行处理是一件很重要的事情。有时候返回的值是json格式的数据,这个时候我们就需要通过键来获取值,因此本期文章以此为主线,详细介绍三种方法获取数组对象里面的键(key)和值(value) 对象键值

方法一: 使用 Object.keys() 方法获取 javascript 对象的键
方法二:使用 Object.entries(obj) 方法获取 javascript 对象的键
方法三:使用for 循环获取 javascript 对象的 key

三种方法获取数组对象里的键值

javascript 对象是键值对的集合。我们需要一个键来从 javascript 对象中获取它的值。键值对广泛用于客户端-服务器通信和 JavaScript 编程。我们知道从 JSON 对象中检索一个值,只要我们有它的键。但是如果我们没有 key 名称怎么办?

1、Object.keys()

Object.keys() 函数返回一个包含 javascript 对象键的数组。
我们将 javascript 对象作为参数传递给 Object.keys() 函数。
输出数组包含的键的顺序与它们在原始 javascript 对象中的顺序相同。
如果我们将数组传递给 Object.keys(),它将返回数组索引作为输出。
并且参数对象带有索引,那么 Object.keys() 将返回这些索引的数组。

var fruitsArr1 = ["Apple", "Orange", "Mango", "Banana"];
var fruitsObj2 = { 0: "Apple", 4: "Orange", 2: "Mango", 3: "Banana"};
var fruitsObj3 = { "id": "1", "name": "mango", "color": "yellow"};
console.log(Object.keys(fruitsArr1));
console.log(Object.keys(fruitsObj2));
console.log(Object.keys(fruitsObj3));
["0", "1", "2", "3"]
["0", "2", "3", "4"]
["id", "name", "color"]
  • 如果键是数字Object.keys() 函数将按排序顺序返回数字键的数组。
  • fruitsObj2 具有编号为 0、4、2、3 的键。但是当我们应用 Object.Keys() 函数时,它返回的键是 [“0”, “2”, “3”, “4”],按排序顺序排列。键值仍将保持与原始 javascript 对象相同的值映射。
  • 例如,fruitsObj2 包含 4: “Orange” 和 2: “Mango”,但 Object.keys(fruitsObj2) 将它们的顺序返回为 “2”, “4”。
  • 如果我们是 console.log 他们在键 2 和 4 上的值,我们会得到正确的值作为输出。
  • 因此,该函数没有修改实际键值映射中的任何内容即使 Object.keys 按排序顺序返回数组或对象的数字键
console.log(fruitsObj2[2]);
console.log(fruitsObj2[4]);
Mango
Orange

2、Object.entries(obj)

Object.entries(obj) 方法多种多样,比 Object.keys() 函数更灵活。
它将整个对象拆分为小数组。每个数组由 [key, value] 形式的键值对组成。
使用 Object.keys(),我们只得到一个对象的键,但是使用 Object.entries(obj),我们可以得到一个对象中的所有条目,包括 keys 和它们的 values.
Object.entries(obj) 不是常用的方法。在大多数情况下,我们需要从对象中获取键。借助 keys可以轻松获得相应的值。

  • 语法Object.entries(object)
  • 参数:与 Object.keys() 方法相同,Object.entries(obj) 接受javascript object作为参数。
  • 返回值
    Object.entries(obj) 返回析构为数组的键值对。
    返回类型将是一个数组数组每个子数组包含两个元素:键和值
    类似于 [[key1, value1], [key2, value2], [key3, value3] … ]。

该函数保留对象属性的顺序。在幕后的实现中,键值对是通过迭代对象属性形成的。我们使用 JSON.stringify() 来获取函数输出值的可读字符串版本。

var fruitsObj3 = { "id": "1", "name": "mango", "color": "yellow"};
console.log(JSON.stringify(Object.entries(fruitsObj3)));
"[["id","1"],["name","mango"],["color","yellow"]]"

我们可以以另一种方式使用 Object.entries()遍历 javascript 对象并记录属性键及其值。

for (const [key, value] of Object.entries(fruitsObj3)) {
  console.log(`${key}: ${value}`);
}
id: 1
name: mango
color: yellow

3、for 循环【常用】

我们可以像使用 for-in 组合遍历数组一样遍历任何 javascript 对象。它遍历每个参数,其中i(迭代器)保存对象的 key,而 object[i] 保存与对象中的 key 对应的值

var obj = { "id": "1", "name": "mango", "color": "green"};
for(let i in obj) {
  console.log(i); // key
  console.log(obj[i]); // value against the key
}
id
1
name
mango
color
green
  • 如果我们只想从对象中提取键,我们可以使用迭代器值。我们可以在上面代码中的 for(let i in obj) 块中使用 console.log(i)
  • 如果我们在 javascript 对象中有嵌套结构,则可以使用 for(let i in obj) 来获取键。但是,嵌套结构的值将是结构本身
var a = { "id": "1", "name": "mango", "color": {"name": "yellow", "appearance": "bright"}};
for(let i in a){
  console.log(i);
  console.log(a[i]);
}
id
1
name
mango
color
{name: "yellow", appearance: "bright"}

以上就是运用JavaScript获取数组对象里面的键和值的三种方法,一般常用的是循环获取键值。


下期文章将介绍vue antd checkbox多选框限制选择个数~
感兴趣的小伙伴可以订阅本专栏,方便后续了解学习~
觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~

JavaScript获取数组对象里面的键(key)和值(value)文章来源地址https://www.toymoban.com/news/detail-413856.html

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

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

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

相关文章

  • <List<Map<String,Object>>>循环List Map获取里面的key和value,进行操作

    输出: Map循环:(Value为Object)

    2024年02月12日
    浏览(50)
  • JS对Json数组进行抽取 获取key: “value“

    这篇文章 不是拿key或value 是 抽取需要的 key: “value” 【必须是单一数组 若是多组数据需要for循环】 // row 是json串 !!! 一、我有一个单一的json【row】 只要 id 和 appStatus 且分开成新数组 二、我有一个单一的json【row】 只要 id 和 appStatus 不分开在一起 方式1:row[0] 括号里面用数字

    2023年04月24日
    浏览(34)
  • javascript设置数组对象中的key值方法

    方法一:保留旧数组 key 和 value ; 方法二:不保留旧数组 key 和 value ; 1说明:使用map循环,在map循环内创建一个新对象,将item要改变的key赋给新创建的对象里面新key值,然后push给一个新创建的数组newArr即可; 2 使用forEach循环 + for循环,通过Object.keys()来改变属性key;

    2024年02月16日
    浏览(46)
  • Debezium系列之:把value中指定字段的键值对放到key中,进一步实现key中只保留指定字段的值

    需要把value中的指定的键值对放到key中 例如需要把产品代号cdc_code和产品名称product放到key中#

    2024年02月09日
    浏览(40)
  • C++-map:获取map中value最大值、最小值对应的键值对

    简述:通过调用 max_element 函数,给定其特定的比较方式,将会获得在给定比较方式下得结果.上述代码中,给定的比较方式是根据 value 值进行比较, 相当于重构了 号.将返回最大值 . 使用匿名函数重构: 打印结果: C++获取map中value最大最小值对应的键值对_普通网友的博客-CSDN博客

    2024年02月16日
    浏览(44)
  • JS如何获取对象的键名、键值

    使用Object.keys()获取对象的键名 object.keys()方法只返回对象的键名,并转换为一个数组。 使用Object.entries()获取对象的键名 object.entries()方法是从对象中获取每个键值对,并将这些键值对转换为一个数组并将它们存储在一个大数组中。此方法只接受一个参数,即对象本身。 使用

    2024年02月12日
    浏览(39)
  • 【JavaScript】函数 ⑥ ( 使用 arguments 获取所有实参 | arguments 内置对象 | 伪数组概念 )

    在 定义 JavaScript 函数 时 , 有时 不确定 形参的个数 , 形参写少了不够用 , 写多了又很浪费 , 这里 推荐使用 arguments 内置参数对象 ; 在 JavaScript 的 每个函数 的 内部都可以访问 内置的 arguments 对象 , 该对象中 包含了 调用者 传递给函数的所有 实参 , 即使 在 函数 形参 中没有明

    2024年04月22日
    浏览(44)
  • js遍历对象key,value

    方法一:转化为操作数组forEach遍历 遍历对象属性 关于Object.keys()方法 Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。 例子 遍历对象属性值 关于Object.values()方法 object .values()静态方

    2024年02月11日
    浏览(42)
  • js如何遍历对象的key和value

    在JavaScript中,可以使用for…in循环来遍历对象的键(key)和值(value)。以下是一个示例: 在这个例子中,for…in循环会遍历对象obj的所有键。然后,hasOwnProperty函数会检查这个键是否是对象obj自身的一个属性,而不是从其原型链继承的。如果是对象自己的属性,就输出这个键

    2024年02月10日
    浏览(43)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包