0


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:1name: 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多选框限制选择个数~ 感兴趣的小伙伴可以订阅本专栏,方便后续了解学习觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦
在这里插入图片描述


本文转载自: https://blog.csdn.net/XSL_HR/article/details/129793129
版权归原作者 XSL_HR 所有, 如有侵权,请联系我们删除。

“JavaScript获取数组对象里面的键(key)和值(value)”的评论:

还没有评论