it编程 > 编程语言 > Javascript

一文熟练掌握JavaScript中Object.keys()与Object.values()的实用技巧

30人参与 • 2025-02-14 • Javascript

简介：

本文深入解析了javascript内置方法 object.keys() 和 object.values() ，揭示了它们在处理对象属性时的用法、功能及相关知识点。通过实例演示了如何使用这些方法进行对象的遍历、复制、比较和属性计算等操作，并提供了注意事项，如处理不可枚举属性和性能考虑。示例代码展示了如何在实际项目中运用这些技巧。 

1. javascript中的 object.keys()

在javascript中， object.keys() 方法是一个非常实用且常用的方法，它可以返回一个给定对象自身的所有可枚举属性的键名组成的数组。这个方法对于遍历对象属性、进行属性操作或是复制对象属性时都显得尤为关键。本章将带领我们一步步了解 object.keys() 的基本用法、原理、及在实际项目中的应用。

1.1 基本用法

首先，让我们来看看 object.keys() 的基本用法：

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(object.keys(object1)); // ["a", "b", "c"]

上述代码展示了如何获取对象 object1 的所有键名，并将它们打印出来。 object.keys() 方法接受一个对象作为参数，并返回一个数组。

1.2 遍历对象

除了直接获取键名列表， object.keys() 常与数组方法如 foreach 结合使用来遍历对象的键值对，比如：

object.keys(object1).foreach(key => {
  console.log(`${key}: ${object1[key]}`);
});

这段代码将遍历 object1 的所有属性，并打印出键和对应的值。 object.keys() 使得对象能够使用数组的方法进行处理，极大地提高了操作的灵活性。

1.3 深入理解

虽然 object.keys() 方法非常实用，但我们也要了解它的局限性。它只能访问对象自身的可枚举属性，不能获取到继承自原型链的属性，且对于symbol类型的键名是无能为力的。在实际应用中，我们需要根据具体需求选择合适的方法和工具。

通过这一章节的学习，我们已经对 object.keys() 有了初步的理解，下一章将继续深入探讨javascript中对象操作的其它方法。

2. javascript中的 object.values()

object.values() 是javascript中的一个内置函数，它接受一个对象作为参数，并返回一个包含该对象所有自有属性值的数组。这个函数在处理键值对数据结构时尤其有用，比如在你想要获取对象中所有属性值以便进一步操作时。相比 object.keys() 返回属性名的数组， object.values() 让开发者可以专注于属性的数据值，而不是它们的名称。下面我们将详细探讨 object.values() 的使用、性能和相关实践。

2.1 object.values() 的使用场景

object.values() 非常适用于以下场景：

2.2 object.values() 的性能特点

从性能角度讲， object.values() 要比手动遍历对象属性快，因为它是内置的优化过的函数。但是，与 object.keys() 类似，它只能获取到对象自身的属性值，不会包括从原型链继承来的属性值。

2.3 使用 object.values() 的实际示例

下面是一个使用 object.values() 来获取对象所有值的简单示例：

const object = {
  a: 'some string',
  b: 42,
  c: false,
  d: { hello: 'world' }
};

const values = object.values(object);
console.log(values); // 输出: ["some string", 42, false, { hello: 'world' }]

在上面的例子中， object.values() 返回了对象 object 的所有自有属性值的数组。

2.4 object.values() 与 object.keys() 的对比

object.values() 和 object.keys() 是姐妹方法，它们的主要区别在于返回值： object.values() 返回对象的值，而 object.keys() 返回对象的键（属性名）。在实际应用中，选择哪一个取决于你需要处理的是键还是值。

2.5 object.values() 在实际项目中的应用

在实际的javascript项目中， object.values() 可以用于多种情况。例如，当你需要快速地获取对象中的数据来展示在前端，或者你正在处理一些特定的数据结构，需要提取值进行进一步的逻辑处理。

2.6 object.values() 的潜在问题

需要注意的是， object.values() 方法在处理对象属性值为 undefined 或 null 时可能不会返回预期的结果。此外，对于特殊类型的对象（如日期对象或正则表达式对象）返回的结果可能不是直接可用的，这可能需要额外的转换或处理。

2.7 总结

object.values() 是一个非常有用的内置函数，能够帮助开发者快速地获取对象的所有自有属性值。通过理解它的用法和局限性，开发者可以在合适的情况下有效利用这一方法来简化代码并提高性能。在下章中，我们将继续探索javascript对象操作的其他技巧，如遍历对象的多种方式。

3. 遍历对象的技巧

遍历对象是处理javascript中键值对数据结构的基本操作之一。在这一章节，我们会讨论几种遍历对象属性的方法，并且深入探讨每种方法的适用场景和性能考量。理解这些技巧能够帮助开发者更高效地操作对象数据，编写更健壮的代码。

3.1 使用for...in循环遍历对象

for...in 循环是javascript中最基础的对象遍历方式之一。它允许你遍历一个对象的所有可枚举属性。这种循环会返回对象上所有可枚举的属性名。

const person = {
  name: "alice",
  age: 25,
  occupation: "engineer"
};

for (const key in person) {
  if (person.hasownproperty(key)) {
    console.log(key, person[key]);
  }
}

在上述代码中， for...in 循环遍历了 person 对象的所有属性。 hasownproperty 方法用于确保属性是对象自身的属性，而不是继承自原型链。

for...in循环的优势和注意事项

3.2 使用object.keys()和for...of循环遍历对象

object.keys() 方法会返回一个数组，包含对象自身的所有可枚举属性名。结合 for...of 循环，我们可以遍历属性名数组，然后通过这些属性名访问对象的值。

const person = {
  name: "alice",
  age: 25,
  occupation: "engineer"
};

const keys = object.keys(person);
for (const key of keys) {
  console.log(key, person[key]);
}

object.keys()和for...of循环的组合优势

3.3 使用object.values()和for...of循环遍历对象

与 object.keys() 类似， object.values() 方法返回一个数组，包含对象自身的所有可枚举属性的值。使用 for...of 循环可以遍历这个数组，获取对象的值。

const person = {
  name: "alice",
  age: 25,
  occupation: "engineer"
};

const values = object.values(person);
for (const value of values) {
  console.log(value);
}

object.values()和for...of循环的组合优势

在以上三种遍历对象的方法中，各有其适用场景。选择合适的方法可以使代码更清晰、更高效。通过本章的介绍，我们应该能够根据不同的需求选择合适的遍历方式，进而有效地操作对象数据。接下来的章节将继续探讨对象操作的其他重要技巧，包括对象的浅拷贝技术。

4. 对象的浅拷贝技术

4.1 使用展开运算符进行浅拷贝

展开运算符（spread syntax），表示为 ... ，是一种非常便捷的复制数组或者对象字面量的方法。在javascript中，展开运算符可以用来创建对象的浅拷贝。

4.1.1 基本使用

要通过展开运算符来拷贝一个对象，只需在一个新的对象字面量中包含原有的对象即可。如下：

const original = { a: 1, b: 2, c: 3 };
const shallowcopy = { ...original };

在上面的示例中， shallowcopy 就是 original 的一个浅拷贝。这意味着 shallowcopy 拥有 original 的所有属性，但它们是存储在不同的内存地址上。

4.1.2 属性的覆盖

如果在展开操作的时候，同名属性被定义多次，后定义的属性值会覆盖前面的值。例如：

const original = { a: 1, b: 2 };
const shallowcopy = { ...original, b: 3 };
console.log(shallowcopy); // 输出 { a: 1, b: 3 }

4.1.3 嵌套对象的拷贝

展开运算符在拷贝嵌套对象时，仍然只是进行浅拷贝。如果对象的属性值是其他对象的引用，那么拷贝的仅仅是引用而非对象本身。

const original = { a: 1, b: { c: 2 } };
const shallowcopy = { ...original };
console.log(original.b === shallowcopy.b); // 输出 true，表明两个对象仍然引用同一地址

4.1.4 参数和扩展性说明

展开运算符可以很方便地与其他属性一起使用，形成复杂对象的创建和拷贝。但它只适用于对象或数组的顶层，不适用于深层次的嵌套结构。

4.1.5 扩展性讨论

对于嵌套较深的对象，我们需要实现更深层次的拷贝机制，这将需要借助递归函数或者专门的库函数来完成。

4.2 使用object.assign()进行浅拷贝

object.assign() 是javascript中一个用于复制对象属性的工具方法。虽然它的名字中包含"assign"，但此方法常被用于实现对象的浅拷贝。

4.2.1 基本语法

object.assign() 方法接受两个或多个参数，第一个参数是目标对象，后面一个或多个参数是源对象。方法会将源对象的所有可枚举属性复制到目标对象，并返回目标对象。

const original = { a: 1, b: 2 };
const shallowcopy = object.assign({}, original);

4.2.2 对象合并

object.assign() 可以用于将多个源对象合并到一个目标对象中。源对象中相同的属性会被后面的源对象覆盖。

const object1 = { a: 1 };
const object2 = { b: 2 };
const object3 = { c: 3 };
const mergedobject = object.assign({}, object1, object2, object3);
console.log(mergedobject); // 输出 { a: 1, b: 2, c: 3 }

4.2.3 修改原始对象的注意事项

使用 object.assign() 创建对象的浅拷贝时，如果源对象的属性是对象类型，拷贝的仅仅是对象的引用。因此，修改拷贝后的对象也可能会影响到源对象。

const original = { a: { b: 1 } };
const shallowcopy = object.assign({}, original);
shallowcopy.a.b = 2;
console.log(original.a.b); // 输出 2，证明源对象的属性也被改变了

4.2.4 代码逻辑逐行解读

4.2.5 总结

object.assign() 提供了一种快捷方便的方法来实现对象的浅拷贝，它非常适合于顶层属性的拷贝和对象合并的场景。然而，由于浅拷贝的特性，使用时需要注意对象引用的管理和修改。

在下一章节中，我们将深入探讨对象的深拷贝技术，它能有效解决浅拷贝带来的问题，并探讨在复杂场景下如何正确使用拷贝技术。

5. 对象属性的比较方法

在开发中，经常会遇到需要比较两个对象属性的场景，比如验证数据结构是否一致、同步更新状态或者在数据处理中确认属性是否相等。本章节将深入探讨javascript中对象属性比较的各种方法，从键值对的浅比较到使用工具函数进行更复杂的深度比较。

5.1 比较对象的键

在某些情况下，我们可能只关心对象中键的存在性而不关心值的比较。比较两个对象的键，一个简单的方法是使用 object.keys() 方法获取两个对象的键数组，然后使用数组的方法进行比较。

function comparekeys(obj1, obj2) {
  const keys1 = object.keys(obj1);
  const keys2 = object.keys(obj2);

  if (keys1.length !== keys2.length) {
    return false;
  }

  return keys1.every(key => keys2.includes(key));
}

// 示例
const obja = { a: 1, b: 2, c: 3 };
const objb = { a: 1, b: 2, c: 3 };
const objc = { a: 1, b: 2, d: 4 };

console.log(comparekeys(obja, objb)); // true
console.log(comparekeys(obja, objc)); // false

上述代码段展示了如何比较两个对象的键。首先获取两个对象的键数组，然后比较这两个数组的长度。如果长度相同，使用 array.prototype.every() 方法检查 obj1 的每个键是否都存在于 obj2 中。

5.2 比较对象的值

比较对象的值，可以通过编写递归函数遍历对象的所有属性，并对每一层的值进行比较。这种方法可以处理简单数据类型的比较，也能处理对象和数组等复杂数据类型的嵌套比较。

5.2.1 简单数据类型的比较

对于基本数据类型，如 string , number , boolean 等，可以直接使用 === 进行比较。

function comparevalues(obj1, obj2) {
  const keys1 = object.keys(obj1);
  const keys2 = object.keys(obj2);

  if (keys1.length !== keys2.length) {
    return false;
  }

  return keys1.every(key => obj1[key] === obj2[key]);
}

// 示例
const objx = { a: 1, b: 'hello' };
const objy = { a: 1, b: 'hello' };
const objz = { a: 1, b: 'world' };

console.log(comparevalues(objx, objy)); // true
console.log(comparevalues(objx, objz)); // false

5.2.2 复杂数据类型的比较

对于包含复杂数据类型（如对象和数组）的对象，需要逐个深入比较每个属性的值。

function deepequal(obj1, obj2) {
  const keys1 = object.keys(obj1);
  const keys2 = object.keys(obj2);

  if (keys1.length !== keys2.length) {
    return false;
  }

  return keys1.every(key => {
    const val1 = obj1[key];
    const val2 = obj2[key];
    const isobjects = isobject(val1) && isobject(val2);

    return isobjects ? deepequal(val1, val2) : val1 === val2;
  });
}

function isobject(obj) {
  return obj === object(obj);
}

// 示例
const complexobj1 = { a: 1, b: { c: 2 } };
const complexobj2 = { a: 1, b: { c: 2 } };
const complexobj3 = { a: 1, b: { c: 3 } };

console.log(deepequal(complexobj1, complexobj2)); // true
console.log(deepequal(complexobj1, complexobj3)); // false

在 deepequal 函数中，使用 isobject 辅助函数来判断属性值是否为对象，并且在值为对象时递归调用 deepequal 进行深度比较。

5.2.3 对比结果分析

通过键的比较可以快速判断两个对象结构是否相同，而通过值的比较可以深入到数据内部进行详细的比对。简单数据类型值的比较可以快速完成，但当对象结构嵌套较深或结构复杂时，深度比较函数需要递归处理，性能开销相对较大。

在实际应用中，选择合适的比较方法取决于具体需求。例如，如果应用场景中对象结构相对简单，且数据变化不频繁，可以优先考虑使用简单的 === 比较。如果对象结构复杂或需要精确同步数据状态，则应当使用深度比较方法。

在下一章节中，我们将探讨如何基于对象属性值进行计算，比如求和、求极值等，这些都是在数据处理中非常实用的技巧。

6. 基于属性值进行的计算

在处理javascript对象时，我们经常需要对对象中的属性值进行各种计算。这包括计算所有值的总和、找出最大值和最小值等。掌握这些计算方法将使我们能够有效地利用对象数据进行更复杂的操作。

6.1 计算对象的所有值的和

要计算一个对象中所有值的总和，我们可以使用 object.values() 方法获取对象值的数组，然后使用数组的 reduce 方法来进行累加。

function sumobjectvalues(obj) {
  return object.values(obj).reduce((a, b) => a + b, 0);
}

const myobject = { a: 1, b: 2, c: 3 };
const sum = sumobjectvalues(myobject); // 输出: 6
console.log(sum);

在这个函数中， object.values(myobject) 将获取 {a: 1, b: 2, c: 3} 中的所有值，即 [1, 2, 3] 。然后 reduce 方法被用来将这个数组中的所有元素相加。

6.2 计算对象的最大值和最小值

为了找出对象中所有值的最大值和最小值，我们可以对获取到的值数组使用 math.max.apply() 和 math.min.apply() 方法。

function findmaxvalue(obj) {
  return math.max.apply(null, object.values(obj));
}

function findminvalue(obj) {
  return math.min.apply(null, object.values(obj));
}

const myobject = { a: 10, b: 2, c: 8 };
const maxvalue = findmaxvalue(myobject); // 输出: 10
const minvalue = findminvalue(myobject); // 输出: 2
console.log(maxvalue, minvalue);

这里的 math.max.apply() 和 math.min.apply() 方法分别用于计算给定数字数组的最大值和最小值。注意，由于 apply 方法的第一个参数是需要调用 math.max 和 math.min 的对象上下文（在这里我们不需要，所以我们传入 null ），我们传递了 object.values(obj) 作为第二个参数，它包含了对象的所有值。

通过这些基本的计算方法，我们可以轻松地对对象进行各种数值统计分析，从而为更复杂的数据操作和分析打下基础。下一章，我们将探讨不可枚举属性和symbol属性对对象操作的影响。

总结

到此这篇关于javascript中object.keys()与object.values()实用技巧的文章就介绍到这了,更多相关js中object.keys()与object.values()的技巧内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！

赞 (0)
打赏 微信扫一扫 微信扫一扫

您想发表意见！！点此发布评论

推荐阅读

前端实现文件下载常见的几种方法总结

02-14

JavaScript页面滚动事件举例详解

02-14

基于JavaScript+IntersectionObserver实现高性能图片懒加载

02-14
前端canvas实现电子签约完成线上签署功能

前端canvas实现电子签约完成线上签署功能

02-14

前端防抖(Debounce)和节流(Throttle)的概念、区别、应用场景及实现方法

02-14

JavaScript中日期格式化的实现方法

02-14

猜你喜欢

版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。

发表评论