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

dance 發布于2019-08-21 17:08 / 3903人閱讀

摘要：返回值給定對象自身可枚舉屬性的鍵值對數組。描述返回一個數組，其元素是與直接在上找到的可枚舉屬性鍵值對相對應的數組。屬性的順序與通過手動循環對象的屬性值所給出的順序相同。借助方法你可以很容易的將轉換為你可以使用下面列出的簡易。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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