知识回调

知识专栏	专栏链接
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); // keyconsole.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)相关推荐

前端动态生成数组/获取数组对象中的最值
Array.from Array.from({ length: 20 }, (v, k) => k) 获取数组对象中的最大值/最小值方法一 Math的静态方法max/min结合ES6的扩展运算 ...
简单的循环以及从接口获取数组对象的一个字段集合
1.简单的循环字段循环 if (this.videolist) {console.log(111);for (let j = 0; j < this.videolist.length; j++) ...
js给数组添加数据的方式/js 向数组对象中添加属性和属性值
参考:https://www.cnblogs.com/ayaa/p/14732349.html js给数组添加数据的方式有以下几种: 直接利用数组下标赋值来增加(数组的下标起始值是0) 例,先存在一个 ...
html显示隐藏域的值,JavaScript获取文本框/编辑框/隐藏域的值
/p> "http://www.w3.org/TR/html4/loose.dtd"> JavaScript获取文本框/编辑框/隐藏域的值_网页代码站(www.webd ...
Javascript 获取数组长度, 对象成员个数, 字符串数
1.应用场景主要用于获取数组长度, 对象成员个数, 字符串数. 2.学习/操作 Q1.Javascript怎么得到数组长度(也就是数组的元素个数)? Q2.Javascript怎么获取对象的成员个数 ...
JavaScript：数组对象去重的几种方法
数组对象去重元素是对象类型的数组的去重我这粗分为两类,一类是当数组中整个元素一样时的去重(这里说的一样是指元素对象中的属性和值都一样),第二类是,元素对象中的某一个属性的值一样时进行去重 // 通用 ...
js 合并数组对象，相同键的求和。合并数组对象中的相同项，并统计数量和
代码: var list=[{price:1000,amount:1 },{price:1500,amount:3 },{price:1000,amount:1 },{price:1200,amoun ...
javascript获取事件源对象和产生事件的对象
事件源对象是指event对象,其封装了与事件相关的详细信息,比如按键状态. 获取事件源对象的方法: 1 <!doctype html> 2 <html lang="en&q ...
Javascript的数组对象
创建和定义数组: 1.r mycars=new Array(); //不定义数组的长度,可以随意放值 mycars[0]="1" mycars[1]="2"2. ...

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

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