JavaScript中entries()和Object.values()方法的使用
作者：Peter-Lu
在 JavaScript 中，entries() 和 Object.values() 是两个非常实用的内建方法，它们能帮助我们以不同的方式操作和访问对象的属性。这两个方法对于开发者来说非常重要，尤其在需要对对象的键值对进行遍历和处理时。本文将深入探讨这两个方法，帮助你全面理解它们的作用和应用场景，并通过具体示例进一步讲解它们的使用方法。
一、entries() 方法详解
1. 方法介绍
Object.entries() 是 ES8（ECMAScript 2017）引入的一个方法，它用于将对象的所有可枚举属性转换成一个包含键值对的数组。每一个键值对都是一个数组，其中第一个元素是属性名，第二个元素是对应的属性值。
例如：
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj));
// 输出: [['a', 1], ['b', 2], ['c', 3]]
2. 用法和返回值
Object.entries() 返回一个二维数组，其中每个元素是一个数组，包含对象的键和值。该方法不会遍历不可枚举的属性，也不会遍历原型链上的属性，只会遍历对象自身的可枚举属性。
const person = {
name: 'John',
age: 30,
job: 'developer'
};
const entries = Object.entries(person);
console.log(entries);
// 输出: [['name', 'John'], ['age', 30], ['job', 'developer']]
3. 数组遍历中的应用
entries() 方法常常用于通过 for...of 循环遍历对象的键值对。这种方式使得代码更加简洁，且能够同时访问键和值：
for (const [key, value] of Object.entries(person)) {
console.log(`${key}: ${value}`);
}
// 输出:
// name: John
// age: 30
// job: developer
这种写法在处理复杂的对象时非常有用，尤其是在动态处理对象属性时。
4. 在数组中的应用
除了用于对象，Object.entries() 还可以用于数组。对于数组，它将数组的索引和对应的值作为键值对返回：
const arr = ['apple', 'banana', 'cherry']; console.log(Object.entries(arr)); // 输出: [['0', 'apple'], ['1', 'banana'], ['2', 'cherry']]
通过这种方式，你可以在遍历数组时，轻松获取索引和值。
5. 应用场景
- 遍历对象属性：如果你想遍历一个对象的属性并进行一些操作，
Object.entries()提供了一种简便的方式。 - 处理动态数据：对于动态生成的对象，使用
entries()可以轻松地访问每个属性及其值。 - 转换对象格式：当需要将对象的数据转换为其他形式（如数组、映射）时，
entries()是一个非常有效的工具。
二、Object.values() 方法详解
1. 方法介绍
Object.values() 是 ES8 引入的另一个非常有用的方法，它返回一个数组，数组中包含了对象的所有可枚举属性的值。
例如：
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj));
// 输出: [1, 2, 3]
2. 用法和返回值
Object.values() 返回一个包含对象属性值的数组。与 Object.entries() 不同，values() 只关心对象的值，而不关心键。
const person = {
name: 'Alice',
age: 25,
job: 'designer'
};
const values = Object.values(person);
console.log(values);
// 输出: ['Alice', 25, 'designer']
3. 数组转换
与 entries() 类似，Object.values() 也可以应用于数组。当用于数组时，它会返回数组中的所有值。
const arr = ['dog', 'cat', 'fish']; console.log(Object.values(arr)); // 输出: ['dog', 'cat', 'fish']
4. 用途
- 获取对象的值：如果你只关心对象的值而不关心键，
Object.values()是一个非常简单的方法。 - 进行数组操作：将对象转换为值数组后，可以利用数组的各种方法（如
map(),filter()等）进行处理。 - 简化代码：通过获取对象的值，你可以直接进行值相关的操作，而不需要额外访问键。
三、结合使用 entries() 和 values() 实现复杂操作
示例：查找数组的最短子数组
在实际开发中，entries() 和 Object.values() 可以结合使用，帮助我们解决更复杂的任务。例如，下面的代码需要找到数组中最短的子数组，使得该子数组的度（即某个数字在该数组中出现的频率）最大。为了高效处理，我们使用了 entries() 和 Object.values()：
/**
* @param {number[]} nums
* @return {number}
*/
var findShortestSubArray = function(nums) {
const mp = {}; // 哈希表，记录每个元素的频次和位置
// 遍历数组，更新哈希表
for (const [i, num] of nums.entries()) {
if (num in mp) {
// 如果该数字已经出现过，更新频次和最后一次出现的位置
mp[num][0]++; // 频次加一
mp[num][2] = i; // 更新最后出现的位置
} else {
// 如果是第一次出现该数字，记录频次为1，首次和最后一次索引为当前位置
mp[num] = [1, i, i];
}
}
let maxNum = 0, minLen = 0; // 最大频次和最短子数组长度
// 遍历哈希表，寻找度最大的元素，并计算对应的子数组长度
for (const [count, left, right] of Object.values(mp)) {
if (maxNum < count) {
maxNum = count; // 更新最大频次
minLen = right - left + 1; // 更新最短子数组长度
} else if (maxNum === count) {
// 如果频次相同，取最短的子数组长度
minLen = Math.min(minLen, right - left + 1);
}
}
return minLen; // 返回最短子数组长度
};
代码讲解
entries() 方法的使用：在这段代码中，我们使用 nums.entries() 来遍历数组 nums，获取每个元素的索引和对应的值。通过这种方式，我们不仅能获取值，还能得到每个元素的索引，这对于后续记录每个元素出现的第一次和最后一次位置非常有帮助。
for (const [i, num] of nums.entries()) {
// 遍历数组，并获取索引 i 和元素 num
}
Object.values() 方法的使用：在处理哈希表 mp 时，我们使用 Object.values(mp) 获取所有值，即每个元素的频次、首次出现的索引和最后一次出现的索引。通过遍历这些值，我们可以判断度最大的元素，并计算对应子数组的最短长度。
for (const [count, left, right] of Object.values(mp)) {
// 遍历哈希表的值，计算最大频次和最短子数组长度
}
适用场景
- 遍历复杂数据结构：结合
entries()和Object.values()，可以简洁高效地处理复杂数据结构，特别是在需要同时访问键和值时。 - 优化算法性能：通过这两个方法，可以在遍历对象和数组时减少额外的代码，使得逻辑更加清晰。
到此这篇关于JavaScript中entries()和Object.values()方法的文章就介绍到这了,更多相关JavaScript entries()和Object.values()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！