Object.entries()

Fourierr 發(fā)布于2019-08-23 18:29 / 1521人閱讀

摘要：是對(duì)象，它的原型上有一個(gè)方法，可用用于遍歷迭代器取得原數(shù)組的。返回一個(gè)對(duì)象，對(duì)于有元素的數(shù)組，是用于指示迭代器是否完成在每次迭代時(shí)進(jìn)行更新而且都是，直到迭代器結(jié)束才是。是一個(gè)的數(shù)組，是返回的迭代器中的元素值。

1.什么是entry

entries() 方法返回一個(gè)新的Array Iterator對(duì)象，該對(duì)象包含數(shù)組中每個(gè)索引的鍵/值對(duì)。

2.示例

Object.entries()
傳入對(duì)象

const obj = { foo: "bar", baz: 42 };
Object.entries(obj)
//輸出 [ ["foo", "bar"], ["baz", 42] ]

Array.entries()
傳入數(shù)組

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 轉(zhuǎn)化為 Map
new Map() 構(gòu)造函數(shù)接受一個(gè)可迭代的 entries 。借助 Object.entries 方法你可以很容易的將 Object 轉(zhuǎn)換為 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()

返回一個(gè)新的 Array 迭代器對(duì)象。Array Iterator是對(duì)象，它的原型（__proto__:Array Iterator）上有一個(gè)next方法，可用用于遍歷迭代器取得原數(shù)組的[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()返回一個(gè)對(duì)象，對(duì)于有元素的數(shù)組，
// 是next{ value: Array(2), done: false }；
// next.done 用于指示迭代器是否完成：在每次迭代時(shí)進(jìn)行更新而且都是false，
// 直到迭代器結(jié)束done才是true。
// next.value是一個(gè)["key","value"]的數(shù)組，是返回的迭代器中的元素值。

iterator.next方法運(yùn)行

var arr = ["a", "b", "c"];
var iter = arr.entries();
var a = [];

// for(var i=0; i< arr.length; i++){   // 實(shí)際使用的是這個(gè) 
for(var i=0; i< arr.length+1; i++){    // 注意，是length+1，比數(shù)組的長(zhǎng)度大
    var tem = iter.next();             // 每次迭代時(shí)更新next
    console.log(tem.done);             // 這里可以看到更新后的done都是false
    if(tem.done !== true){             // 遍歷迭代器結(jié)束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" ] ]

二維數(shù)組按行排序

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 循環(huán)

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