JavaScript中你不知道的Object.entries用法

目录
  • 前言
  • 1. 使用 for...of 遍历普通对象
  • 2. 普通对象与 Map 对象相互转换
  • 总结
  • 参考

前言

平时我们经常会用到 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 object
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

// array like object with random key ordering
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

// getFoo is property which isn't enumerable
const 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 object
console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]

// iterate through key-value gracefully
const 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 extras
Object.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用法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

参考

时间: 2021-10-09

javascript中Object使用详解

复制代码 代码如下: function forEach(o){ var html =""; for(var i in o){ html += i+"="+o[i]+" "; } console.log(html); console.log(o); } //1 //Object.create(proto) //Object.create(proto,descriptors) //使用指定的原型和属性来创建一个对象 //参数: //proto:新创建

详解Javascript中的Object对象

Object是在javascript中一个被我们经常使用的类型,而且JS中的所有对象都是继承自Object对象的.虽说我们平时只是简单地使用了Object对象来存储数据,并没有使用到太多其他功能,但是Object对象其实包含了很多很有用的属性和方法,尤其是ES5增加的方法,因此,本文将从最基本的介绍开始,详细说明了Object的常用方法和应用. 基础介绍 创建对象 首先我们都知道,对象就是一组相似数据和功能的集合,我们就是用它来模拟我们现实世界中的对象的.那在Javascript中,创建对象的方

详解JavaScript中的Object.is()与"==="运算符总结

三重相等运算符 === 严格检查2个值是否相同: 1 === 1; // => true 1 === '1'; // => false 1 === true; // => false 但是,ES2015规范引入了 Object.is(),其行为与严格的相等运算符几乎相同: Object.is(1, 1); // => true Object.is(1, '1'); // => false Object.is(1, true); // => false 主要问题是:什么时

详解javascript中的Error对象

概念 error是指程序中的非正常运行状态,在其他编程语言中称为"异常"或"错误",解释器会为每个错误情形创建并抛出一个Error对象,其中包含错误的描述信息: ECMAScript定义了六种类型的错误,除此之外,还可以使用Error构造方法创建自定义的Error对象,并使用throw语句抛出该对象: 六种错误: 1)ReferenceError:引用错误,要用的东西没找到:       2)TypeError:类型错误,错误的调用了对象的方法:       3)R

详解JavaScript中的4种类型识别方法

具体内容如下: 1.typeof [输出]首字母小写的字符串形式 [功能] [a]可以识别标准类型(将Null识别为object) [b]不能识别具体的对象类型(Function除外) [实例] console.log(typeof "jerry");//"string" console.log(typeof 12);//"number" console.log(typeof true);//"boolean" console

详解Javascript中prototype属性(推荐)

在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不是基于'类的',而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能

详解Javascript 中的 class、构造函数、工厂函数

到了ES6时代,我们创建对象的手段又增加了,在不同的场景下我们可以选择不同的方法来建立.现在就主要有三种方法来构建对象,class关键字,构造函数,工厂函数.他们都是创建对象的手段,但是却又有不同的地方,平时开发时,也需要针对这不同来选择. 首先我们来看一下,这三种方法是怎样的 // class 关键字,ES6新特性 class ClassCar { drive () { console.log('Vroom!'); } } const car1 = new ClassCar(); consol

详解JavaScript 中getElementsByName在IE中的注意事项

详解JavaScript 中getElementsByName在IE中的注意事项 前言: 在IE5-9中是没有实现js的 getElementsByClassName()方法,但是实现了getElementsByName()方法,但是需要注意的是这个方法在IE5-9中也返回id属性匹配的指定元素,为了兼容,应该小心谨慎使用,不要将同样的字符串同时用作了名字和ID. 测试程序如下: <div id="log"> <div id="innerLog"&

详解SpringBoot中Controller接收对象列表实现

如果Spring Boot中对应的Controller要接收一个对象,该对象中又存放了一个List列表,那么页面该如何传递相关应的参数信息呢. 本篇文章给大家一个简单的示例,提供一种实现方式. 实体类 首先看实体类的结构(注意使用了Lombok): @Data public class Rules { private List<Rule> rules; } 对应Rule实体类代码如下: @Data public class Rule { /** * 类名 */ private String c

详解Javascript中new()到底做了些什么?

前言 和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 new 来产生对象? 本文将带你一起来探索 javascript 中 new 的奥秘... 要创建 Person 的新实例,必须使用 new 操作符. 以这种方式调用构造函数实际上会经历以下 4个步骤: (1) 创建一个新对象: (2) 将构造函数的作用域赋给新对象(因此 this 就指向了

详解JavaScript中的函数、对象

JS中的函数声明方式 方式一 function 函数名(){ 函数体 } 方式二 var 函数名=function(){ 函数体 } 方式三 var 函数名=new Function("函数体"): 执行方式 函数名(); JS中的对象 类似Java中的一些系统预设好的类 日期对象 function testDate(){ var date=new Date(); //本月中的第几天 document.write(date.getDate()+"<br />&qu