Object.entries()

Fourierr 发布于2019-08-23 18:29 / 1664人阅读

摘要：是对象，它的原型上有一个方法，可用用于遍历迭代器取得原数组的。返回一个对象，对于有元素的数组，是用于指示迭代器是否完成在每次迭代时进行更新而且都是，直到迭代器结束才是。是一个的数组，是返回的迭代器中的元素值。

1.什么是entry

entries() 方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。

2.示例

Object.entries()
传入对象

</>复制代码 
const obj = { foo: "bar", baz: 42 };
Object.entries(obj)
//输出 [ ["foo", "bar"], ["baz", 42] ]

Array.entries()
传入数组

</>复制代码 
const arr = ["a", "b", "c"]; 
console.log(Object.entries(arr));  
// [[ "0", "a" ], [ "1", "b" ], [ "2", "c" ] ]
const arr1 = [{ a: 1 }, 2, 3]; 
console.log(Object.entries(arr1));  
// [["0", { a: 1 }], ["1", "2"], ["2", "3"]]
const arr2 = [{ a: 1 }, { b: 2 }, { c: 3 }]; 
console.log(Object.entries(arr2));  
// [["0", { a: 1 }], ["1", { b: 2 }], ["2", { c: 3 }]]

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

</>复制代码 
const obj2 = { foo: "bar", baz: "abc" }; 
console.log(Object.entries(obj2));  // [["foo", "bar"], ["baz", "abc"]]
const map = new Map(Object.entries(obj2)); 
console.log(map); // Map {"foo" => "bar", "baz" => "abc"}

3. arr.entries()

返回一个新的 Array 迭代器对象。Array Iterator是对象，它的原型（__proto__:Array Iterator）上有一个next方法，可用用于遍历迭代器取得原数组的[key,value]。

</>复制代码 
var array1 = ["a", "b", "c"];
var iterator1 = array1.entries();
console.log(iterator1.next().value);
// expected output: Array [0, "a"]
console.log(iterator1.next().value);
// expected output: Array [1, "b"]

Array Iterator

</>复制代码 
var arr = ["a", "b", "c"];
var iterator = arr.entries();
console.log(iterator);
/*Array Iterator {}
         __proto__:Array Iterator
         next:ƒ next()
         Symbol(Symbol.toStringTag):"Array Iterator"
         __proto__:Object
*/

iterator.next()

</>复制代码 
var arr = ["a", "b", "c"];
var iterator = arr.entries();
console.log(iterator.next());
// { value: [ 0, "a" ], done: false }
// iterator.next()返回一个对象，对于有元素的数组，
// 是next{ value: Array(2), done: false }；
// next.done 用于指示迭代器是否完成：在每次迭代时进行更新而且都是false，
// 直到迭代器结束done才是true。
// next.value是一个["key","value"]的数组，是返回的迭代器中的元素值。

iterator.next方法运行

</>复制代码 
var arr = ["a", "b", "c"];
var iter = arr.entries();
var a = [];
// for(var i=0; i< arr.length; i++){   // 实际使用的是这个 
for(var i=0; i< arr.length+1; i++){    // 注意，是length+1，比数组的长度大
    var tem = iter.next();             // 每次迭代时更新next
    console.log(tem.done);             // 这里可以看到更新后的done都是false
    if(tem.done !== true){             // 遍历迭代器结束done才是true
        console.log(tem.value);
        a[i]=tem.value;
    }
}
    
console.log(a);
// false
// [ 0, "a" ]
// false
// [ 1, "b" ]
// false
// [ 2, "c" ]
// true
// [ [ 0, "a" ], [ 1, "b" ], [ 2, "c" ] ]

二维数组按行排序

</>复制代码 
function sortArr(arr) {
    var goNext = true;
    var entries = arr.entries();
    while (goNext) {
        var result = entries.next();
        if (result.done !== true) {
            result.value[1].sort((a, b) => a - b);
            goNext = true;
        } else {
            goNext = false;
        }
    }
    return arr;
}
var arr = [[1,34],[456,2,3,44,234],[4567,1,4,5,6],[34,78,23,1]];
sortArr(arr);

使用for…of 循环

</>复制代码 
 var arr = ["a", "b", "c"];
 var iterator = arr.entries();
 // undefined
 
 for (let e of iterator) {
     console.log(e);
 }
 
 // [0, "a"] 
 // [1, "b"] 
 // [2, "c"]

云服务器 GPU云服务器

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

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

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

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

dance 2019-08-21 17:08 评论0 收藏0
JS中轻松遍历对象属性的几种方式

摘要：当普通对象要转换成时就很有用，因为返回的格式与构造函数接受的格式完全相同。使用常规的构造函数可以将一个二维键值对数组转换成一个对象。在和早期标准中，根本没有指定属性的顺序。此函数还可以轻松地将纯对象属性映射到对象中。为了保证的可读性，本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！自身可枚举属性 Object.keys() 方法会返回一个...

isLishude 2019-08-26 10:35 评论0 收藏0
迅速了解一下 ES10 中 Object.fromEntries 的用法

摘要：方法就是的逆操作，作用是将一个键值对数组转化为一个对象同样的该方法也已经成为中提案在介绍之前，回顾一下的用法。 Object.fromEntries 方法就是 entries 的逆操作，作用是将一个键值对数组转化为一个对象同样的该方法也已经成为 ES10 中 stage4 提案： showImg(https://segmentfault.com/img/remote/14600000...

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

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

Kerr1Gan 2019-08-26 12:01 评论0 收藏0
ES6入门之对象的新增方法

showImg(https://segmentfault.com/img/remote/1460000019258913?w=2933&h=1955); 1. Object.is() 用来解决在ES5中两种相等运算符的缺点。用来比较两个值是否严格相等，行为和（===）基本一致。在ES5中判断两个值是否相等，只能用（==）相等运算符和（===）严格相等运算符，但是这两货都有缺点，前者两边的值都...

Keven 2019-08-26 13:52 评论0 收藏0