JavaScript深入理解对象方法——Object.entries()

dance 发布于2019-08-21 17:08 / 3902人阅读

摘要：返回值给定对象自身可枚举属性的键值对数组。描述返回一个数组，其元素是与直接在上找到的可枚举属性键值对相对应的数组。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。借助方法你可以很容易的将转换为你可以使用下面列出的简易。

Object.entries()

Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。

语法

Object.entries(obj)

参数

obj
可以返回其可枚举属性的键值对的对象。

返回值

给定对象自身可枚举属性的键值对数组。

描述

Object.entries()返回一个数组，其元素是与直接在object上找到的可枚举属性键值对相对应的数组。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。

示例

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"
});

将Object转换为Map

new Map() 构造函数接受一个可迭代的entries。借助Object.entries方法你可以很容易的将Object转换为Map:

var obj = { foo: "bar", baz: 42 }; 
var map = new Map(Object.entries(obj));
console.log(map); // Map { foo: "bar", baz: 42 }

Polyfill

你可以使用下面列出的简易 polyfill。

if (!Object.entries)
  Object.entries = function( obj ){
    var ownProps = Object.keys( obj ),
        i = ownProps.length,
        resArray = new Array(i); // preallocate the Array
    while (i--)
      resArray[i] = [ownProps[i], obj[ownProps[i]]];
    
    return resArray;
  };

云服务器 GPU云服务器深入理解javascript javascript对象方法深入理解系列深入理解linux

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89163.html

细解JavaScript ES7 ES8 ES9 新特性

摘要：定期召开会议，会议由会员公司的代表与特邀专家出席。新版本将会包含每年截止时间之前完成的所有特性。它引入了一个新的构造函数和具有辅助函数的命名空间对象。导言：ECMAScript的演化不会停止，但是我们完全没必要害怕。除了ES6这个史无前例的版本带来了海量的信息和知识点以外，之后每年一发的版本都仅仅带有少量的增量更新，一年更新的东西花半个小时就能搞懂了，完全没必要畏惧。本文将带您花大约...

Youngs 2019-08-23 13:45 评论0 收藏0
【译】如何在 JavaScript 中使用对象的方法

摘要：中的所有对象都来自父的构造函数。不同于数组的原型方法例如和只能被数组实例使用，对象方法直接来自构造函数，并使用对象实例作为参数。这称为静态方法。创建对象的键值对的嵌套数组。可用于确定对象是否已冻结，并返回布尔值。原文：How To Use Object Methods in JavaScript作者：Tania Rascia译者：博轩介绍 JavaScript 中，对象是键/值 ...

longmon 2019-08-23 17:03 评论0 收藏0
[前端漫谈_1] 从 for of 聊到 Generator

摘要：数据的层级意味着迭代数据结构并提取它的数据。对于技术人而言技是单兵作战能力，术则是运用能力的方法。在前端娱乐圈，我想成为一名出色的人民艺术家。聊聊 for of 说起 for of 相信每个写过 JavaScript 的人都用过 for of ，平时我们用它做什么呢？大多数情况应该就是遍历数组了，当然，更多时候，我们也会用 map() 或者 filer() 来遍历一个数组。但是就...

miqt 2019-08-23 17:54 评论0 收藏0
js常见基础对象属性方法(一)

摘要：中双感叹号的作用一般用于将后面的表达式强制转化为布尔类型。通过实现类式继承继承对象已经原型对象属性父类父类的方法子类调用父类的构造函数。 js基础对象属性方法 Object.keys() Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历改对象时返回的顺序一致(两者的主要区别是一个for-in 循环...

Kerr1Gan 2019-08-26 12:01 评论0 收藏0
ES6 Javascript 实用开发技巧

摘要：定义变量常量中新增加了和两个命令，用于定义变量，用于定义常量。定义变量/常量 ES6 中新增加了 let 和 const 两个命令，let 用于定义变量，const 用于定义常量。两个命令与原有的 var 命令所不同的地方在于，let, const 都是块级作用域，其有效范围仅在代码块中，实例如下： //es5 if(1 == 1){ var b = foo; } conso...

iamyoung001 2019-08-22 16:48 评论0 收藏0