ES6 中的 Object.keys() 和 Object.values() 方法可以方便地对 JavaScript 中的对象进行遍历操作，是前端开发中常用的方法之一。本篇文章将详细介绍这两个方法的使用方法以及一些注意事项。
Object.keys() 方法
Object.keys() 方法可以获取对象中所有可枚举属性的属性名，并以数组形式返回。
使用方法如下：
const obj = {a: 1, b: 2, c: 3};
const keys = Object.keys(obj);
console.log(keys); // ['a', 'b', 'c']上面的代码中，我们定义了一个对象 obj，使用 Object.keys() 方法获取了它的所有属性名并将其返回到变量 keys 中。然后通过 console.log() 方法将 keys 展示出来。执行后的输出结果为 ['a', 'b', 'c']。
需要注意的是，Object.keys() 方法只能获取对象自身的属性，无法获取原型链上的属性。例如：
function Fun() {}
Fun.prototype.a = 1;
Fun.prototype.b = 2;
const obj = new Fun();
obj.c = 3;
const keys = Object.keys(obj);
console.log(keys); // ['c']上面的代码中，我们定义了一个函数 Fun 并将它的原型对象上的属性 a 和 b 设置为 1 和 2。然后我们新建了一个对象 obj，并将它的自身属性 c 设置为 3。使用 Object.keys() 方法获取 obj 的属性名，输出结果为 ['c']，因为只有它自身有属性 c，而没有继承了原型对象上的属性 a 和 b。
Object.values() 方法
Object.values() 方法可以获取对象中所有可枚举属性的属性值，并以数组形式返回。
使用方法如下：
const obj = {a: 1, b: 2, c: 3};
const values = Object.values(obj);
console.log(values);// [1, 2, 3]上面的代码中，我们定义了一个对象 obj，使用 Object.values() 方法获取了它的所有属性值并将其返回到变量 values 中。然后通过 console.log() 方法将 values 展示出来。执行后的输出结果为 [1, 2, 3]。
需要注意的是，与 Object.keys() 方法一样，Object.values() 方法也只能获取对象自身的属性值，无法获取原型链上的属性值。
function Fun() {}
Fun.prototype.a = 1;
Fun.prototype.b = 2;
const obj = new Fun();
obj.c = 3;
const values = Object.values(obj);
console.log(values); // [3]上面的代码中，我们定义了一个函数 Fun 并将它的原型对象上的属性 a 和 b 设置为 1 和 2。然后我们新建了一个对象 obj，并将它的自身属性 c 设置为 3。使用 Object.values() 方法获取 obj 的属性值，输出结果为 [3]，因为只有它自身有属性 c，而没有继承了原型对象上的属性 a 和 b。
数组和字符串中的 Object.keys() 和 Object.values() 方法
除了能够获取对象中的属性名和属性值以外，ES6 中的 Object.keys() 和 Object.values() 方法还可以用来获取数组和字符串中的索引和值。
获取数组中的索引和值
使用 Object.keys() 方法可以获取数组中所有元素的索引，使用 Object.values() 方法可以获取数组中所有元素的值。
const arr = [1, 2, 3]; const keys = Object.keys(arr); const values = Object.values(arr); console.log(keys); // ['0', '1', '2'] console.log(values); // [1, 2, 3]
上面的代码中，我们定义了一个数组 arr，并使用 Object.keys() 和 Object.values() 方法获取了它的索引和值并将它们保存到 keys 和 values 变量中。然后通过 console.log() 方法对它们进行展示。执行后的输出结果为 ['0', '1', '2'] 和 [1, 2, 3]。
获取字符串中的索引和值
使用 Object.keys() 方法可以获取字符串中所有字符的索引，使用 Object.values() 方法可以获取字符串中所有字符的值。
const str = 'Hello world!'; const keys = Object.keys(str); const values = Object.values(str); console.log(keys); // ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'] console.log(values); // ['H', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd', '!']
上面的代码中，我们定义了一个字符串 str，并使用 Object.keys() 和 Object.values() 方法获取了它的索引和值并将它们保存到 keys 和 values 变量中。然后通过 console.log() 方法对它们进行展示。执行后的输出结果为 ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'] 和 ['H', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd', '!']。
总结
Object.keys() 和 Object.values() 方法是 ES6 中用于获取对象中属性名和属性值的方法。除此之外，它们还可以用来获取数组和字符串中的索引和值。需要注意的是，它们只能获取对象、数组和字符串自身的属性名和属性值，无法获取原型链上的属性名和属性值。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a3e5a1add4f0e0ffc14c9f