|
前言平时我们经常会用到 Object 类上的静态方法，例如 Object.keys 、Object.values 、Object.assign 等等，但可能很少用到 Object.entries 这个方法，这篇文章就来讲解 Object.entries 方法的两个小技巧。 作用
Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for…in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。 示例
const obj = { foo: 'bar', baz: 42 };console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]// array like objectconst obj = { 0: 'a', 1: 'b', 2: 'c' };console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]// array like object with random key orderingconst anObj = { 100: 'a', 2: 'b', 7: 'c' };console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]// getFoo is property which isn't enumerableconst myObj = Object.create({}, { getFoo: { value() { return this.foo; } } });myObj.foo = 'bar';console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]// non-object argument will be coerced to an objectconsole.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]// iterate through key-value gracefullyconst obj = { a: 5, b: 7, c: 9 };for (const [key, value] of Object.entries(obj)) { console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"}// Or, using array extrasObject.entries(obj).forEach(([key, value]) => {console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
1. 使用 for...of 遍历普通对象
很多初学前端的小伙伴可能都写过下面这个代码： let obj = { a: 1, b: 2}for (let value of obj) { // ...}但是运行一下就发现，哦吼，报错了： Uncaught TypeError: obj is not iterable
于是乎，遍历普通对象就变成了清一色的 for...in 遍历。但由于 for...in 不光会遍历对象的自有属性，还会遍历到对象原型上，因此我们在使用的时候还需要加一个过滤，例如： for (let key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { // ... }}可以看到这样写很不优雅。之所以普通对象不能用 for...of 遍历，是因为普通对象没有实现 iterator 接口（关于 JS 的迭代器会专门写一篇文章讲解）。而 JS 数组是实现了 iterator 接口的，因此通过 Object.entries 得到的键值对数组就可以使用 for...of 遍历： for (let [key, value] of Object.entries(obj)) { // ...}Object.entries 会返回对象自身可枚举属性的键值对数组，不包含原型上的属性
2. 普通对象与 Map 对象相互转换
看到项目中将普通对象转为 Map 对象，还在使用 for...in 遍历： let obj = { a: 1, b: 2}let map = new Map();for (let key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { map.set(key, obj[key]); }}实际上 Map 构造器可以接受一个键值对数组初始化，这就意味着可以使用 Object.entries 将普通对象转为 Map 对象： let map = new Map(Object.entries(obj)); 那么 Map 对象如何转回普通对象呢？还使用遍历吗？不需要，可以使用 Object.fromEntries 静态方法来转换： let obj = Object.fromEntries(map); 说到这里，很多小伙伴可能还是没搞清楚普通对象、键值对数组、Map 对象的转换关系，我用一张图总结一下： Object.entries 和 Object.fromEntries 是两个相反的操作
总结到此这篇关于JavaScript中你不知道的Object.entries用法的文章就介绍到这了,更多相关js Object.entries用法内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
参考
下载地址:
javascript实现全屏页面滚动效果
Vue3中emits与attrs的区别分析 |
