JavaScript 作为一门弱类型语言，在实际开发中经常需要将对象转换为数组，以便于进行其它操作。在 ECMAScript 2017 的新特性中，又新增了一个 Object.values() 方法可以方便地将对象数据转换为数组类型，本文将介绍利用 Object.values() 进行对象数据转换的方法及常见问题的解决方案。
Object.values() 的使用
在 ECMAScript 2017 中新增的 Object.values() 方法可以方便地将一个对象的所有属性值转换为数组类型。下面是一个简单的使用示例：
const obj = { a: 1, b: 2, c: 3 };
const arr = Object.values(obj);
console.log(arr); // [1, 2, 3]在上面的示例中，我们定义了一个名为 obj 的对象，该对象包含了三个属性，然后我们使用 Object.values() 方法将其所有属性值转换为一个名为 arr 的数组类型。最后，我们输出 arr 的值，可以看到其输出了 [1, 2, 3]。
常见问题及解决方案
在实际使用 Object.values() 方法进行对象数据转换时，可能会遇到一些常见问题，下面我们将对这些问题进行解答。
问题：Object.values() 返回的结果顺序不确定
当 Object.values() 方法用于对象数据转换时，其返回结果的顺序可能不确定。例如，在下面的代码中：
const obj = { a: 1, b: 2, c: 3 };
const arr = Object.values(obj);
console.log(arr); // [1, 2, 3]我们使用 Object.values() 方法将 obj 转换为了一个数组 arr，但是我们并不能确保最后 arr 中的元素顺序与 obj 中的属性顺序一致。当 obj 的属性顺序为 a, b, c 时，arr 中的元素顺序可能为 [1, 2, 3]，也可能为 [2, 1, 3] 或者 [3, 2, 1] 等不同的排列组合。
解决方案：在需要确保顺序一致性的情况下，我们可以使用 Object.entries() 方法来将 obj 转换为一个包含属性名和属性值的二维数组类型（即键值对数组），然后对该数组进行排序（根据属性名进行排序），最后提取属性值即可。示例如下：
const obj = { a: 1, b: 2, c: 3 };
const arr = Object.entries(obj).sort((a, b) => a[0] - b[0]).map(item => item[1]);
console.log(arr); // [1, 2, 3]在上面的示例中，我们先使用 Object.entries() 方法将 obj 转换为一个二维数组类型，然后使用 sort() 方法对其进行排序（根据属性名进行排序），最后使用 map() 方法提取属性值，最终得到了一个名为 arr 的数组类型，并且确保了其元素顺序与 obj 的属性顺序一致。
问题：Object.values() 方法无法转换 Symbol 类型的属性值
当 obj 中包含了 Symbol 类型的属性值时，Object.values() 方法将无法将其转换为数组类型。
解决方案：在需要转换 Symbol 类型的属性值时，我们可以使用 Reflect.ownKeys() 方法来获取 obj 的属性名列表，然后再通过遍历这些属性名来提取属性值即可。示例如下：
const sym = Symbol();
const obj = { a: 1, [sym]: 2, c: 3 };
const arr = Reflect.ownKeys(obj).map(key => obj[key]);
console.log(arr); // [1, 2, 3]在上面的示例中，我们定义了一个名为 sym 的 Symbol 类型的属性值，并使用 obj 对象进行演示。我们使用 Reflect.ownKeys() 方法获取了 obj 的属性名列表，并通过 map() 方法遍历这些属性名来提取属性值。最终得到了一个名为 arr 的数组类型，其中包含了 obj 的所有属性值。
总结
在本文中，我们介绍了 ECMAScript 2017 的 Object.values() 方法，讲解了该方法的使用方法并解答了一些常见问题及解决方案。当我们需要进行 JavaScript 对象数据转换时，可以考虑使用 Object.values() 方法来快速地将属性值转换为数组类型，同时需要注意的是，其返回结果的顺序可能不确定，需要进行处理。当 obj 中包含 Symbol 类型的属性值时，也需要使用其它方法来提取属性值。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652d81667d4982a6ebecd416