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用法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

参考

赞 (0)

相关推荐

  • 详解Javascript中的Object对象

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

  • 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.entries用法

    目录 前言 1. 使用 for...of 遍历普通对象 2. 普通对象与 Map 对象相互转换 总结 参考 前言 平时我们经常会用到 Object 类上的静态方法,例如 Object.keys .Object.values .Object.assign 等等,但可能很少用到 Object.entries 这个方法,这篇文章就来讲解 Object.entries 方法的两个小技巧. 作用 Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for-in

  • javascript中eval和with用法实例总结

    本文实例讲述了javascript中eval和with用法.分享给大家供大家参考,具体如下: 我们都知道javascript的作用域机制,但是with和eval有时会"破坏"我们对于作用域的常规理解.下面参考网上资源和自己理解总结一下eval和with的用法. 一.eval 1.eval函数:把一个字符串当作一个js表达式一样去执行它. 2.语法:eval(strScript) 注:参数strScript是必填项 3.使用说明 (1)它是有返回值的,如果参数字符串是一个表达式,就会返回

  • ES6 javascript中Class类继承用法实例详解

    本文实例讲述了ES6 javascript中Class类继承用法.分享给大家供大家参考,具体如下: 1. 基本用法 Class 之间可以通过extends关键字实现继承, 这比 ES5 的通过修改原型链实现继承, 要清晰和方便很多. class ColorPoint extends Point {} 上面代码定义了一个ColorPoint类, 该类通过extends关键字, 继承了Point类的所有属性和方法. 但是由于没有部署任何代码, 所以这两个类完全一样, 等于复制了一个Point类. 下

  • 详解JavaScript中typeof与instanceof用法

    今天写JS代码,遇到动态生成多个名称相同的input复选按钮 需要判断其是否是数组,用到了if (typeof(document.MapCheckMgr.checkid)!="undefined") 以前用得少,就顺便查了一下关于typeof的那些事 typeof用以获取一个变量或者表达式的类型,typeof一般只能返回如下几个结果: number,boolean,string,function(函数),object(NULL,数组,对象),undefined. 如: alert(ty

  • 详解如何在Javascript中使用Object.freeze()

    Object.freeze() Object.freeze() 方法可以冻结一个对象.一个被冻结的对象再也不能被修改:冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性.可配置性.可写性,以及不能修改已有属性的值.此外,冻结一个对象后该对象的原型也不能被修改.freeze() 返回和传入的参数相同的对象 用法 const objectExample = { prop1: 20, prop2: "羊先生" }; // 默认情况下,我们可以根据需

  • JavaScript中window和document用法详解

    JavaScript中window和document用法详解

    一.验证表单 封装一个函数用于验证手机号 /** * @param {String}eleId * @param {Object}reg */ function checkInput(eleId,reg) { var ele = document.getElementById(eleId); ele.onblur = function (ev) { if(!reg.test(this.value)){ //不匹配 this.style.borderColor = "#ff0000" /

  • Object.keys()、Object.values()、Object.entries()用法总结

    目录 Object.keys() 一.官方解释 二.语法 三.处理对象,返回可枚举的属性数组 四.处理数组,返回索引值数组 五.处理字符串,返回索引值数组 六.实用技巧 Object.values() 一.返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历属性的键值 二.返回数组的成员顺序,与属性的遍历部分介绍的排列规则一致 三.Object.values()只会遍历对象自身的可遍历属性 四.Object.values会过滤属性名为 Symbol 值的属性 五.如果参数不是对象,Obje

  • javascript中闭包概念与用法深入理解

    本文实例分析了javascript中闭包概念与用法.分享给大家供大家参考,具体如下: 1.问题的引出,什么时候会遇到闭包? 首先因为JS是没有块状作用域的,但是有函数作用域即函数作为了局部变量之间的界限,不同函数内的局部变量具有独立性, 因为JS没有块状作用域,笔者初学JS时,在事件的监听时,因为不理解JS中局部变量的作用域,犯过不少错误! (1)JS中的变量作用域 for(var i=0;i<9;i++) { } alert(i) //输出9 我们发现,虽然变量i是块状区域for()内的一个局

  • JavaScript中的标签语句用法分析

    本文实例分析了JavaScript中的标签语句用法.分享给大家供大家参考.具体分析如下: 最近在看w3school,然后看到js部分, <!DOCTYPE html> <html> <body> <script> cars=["BMW","Volvo","Saab","Ford"]; list: { document.write(cars[0] + "<br>

  • JavaScript中的object转换函数toString()与valueOf()介绍

    JavaScript中,object转换为boolean的操作非常简单:所有的object转换成boolean后均为true:即使是new Boolean(false)这样的object在转换为boolean后仍然为true. 复制代码 代码如下: var x = new Boolean(false); if(x){   console.log("x is true"); } 在将object转换为string或者number时,JavaScript会调用object的两个转换函数:t

随机推荐