Object.entries()

1.什麼是entry

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

2.示例

1. Object.entries()
   傳入對象

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

2. 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 }]]

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()

1. 返回一個新的 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"]

2. 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
   */

3. 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"]的數組，是返回的迭代器中的元素值。

4. 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' ] ]

5. 二維數組按行排序

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

6. 使用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"]