revision:
The entries() method returns a new array iterator object that contains the key/value pairs for each index in the array. The entries() method does not change the original array.
array.entries()
Parameters: none
const array1 = ['a', 'b', 'c'];
const iterator1 = array1.entries();
console.log(iterator1.next().value);
// Expected output: Array [0, "a"]
console.log(iterator1.next().value);
// Expected output: Array [1, "b"]
The Object.entries() static method returns an array of a given object's own enumerable string-keyed property key-value pairs.
object.entries(obj)
Parameters: none
obj : an object
const object1 = {
a: 'somestring',
b: 42
};
for (const [key, value] of Object.entries(object1)) {
console.log(`${key}: ${value}`);
}
// Expected output:
// "a: somestring"
// "b: 42"
example: iterating with index and element.
<div>
<p id="entry-1"></p>
<p id="entry-2"></p>
<p id="entry-3"></p>
<p id="entry-4"></p>
</div>
<script>
const a = [" a", " b", " c"];
document.getElementById("entry-1").innerHTML = "original array: " + a;
for (const [index, element] of a.entries()) {
console.log(index, element);
document.getElementById("entry-2").innerHTML = "element: index 0:" + a[0];
document.getElementById("entry-3").innerHTML = "element: index 1:" + a[1];
document.getElementById("entry-4").innerHTML = "element: index 2:" + a[2];
}
// 0 'a'
// 1 'b'
// 2 'c'
</script>
example: using a for... loop.
<div>
<p id="entry-5"></p>
<p id="entry-6"></p>
<p id="entry-7"></p>
<p id="entry-8"></p>
</div>
<script>
const array = ["a ", "b ", "c ", "d "];
const arrayEntries = array.entries();
document.getElementById("entry-5").innerHTML = "array: " + array;
for (const element of arrayEntries) {
console.log(element);
document.getElementById("entry-6").innerHTML += "element : " + element + "<br>";
}
// [0, 'a']
// [1, 'b']
// [2, 'c']
</script>
example: using Object.entries()
<div>
<p id="entry-9"></p>
<p id="entry-10"></p>
<p id="entry-11"></p>
<p id="entry-12"></p>
</div>
<script>
const obj1 = { foo: "bar", baz: 42 };
console.log(Object.entries(obj1)); // [ ['foo', 'bar'], ['baz', 42] ]
document.getElementById("entry-9").innerHTML = "obj1 array : " + Object.entries(obj1)
// Array-like object
const obj2 = { 0: "a", 1: "b", 2: "c" };
console.log(Object.entries(obj2)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
document.getElementById("entry-10").innerHTML = "obj2 array-likec: " + Object.entries(obj2)
// 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'] ]
document.getElementById("entry-11").innerHTML = "anObj : " + Object.entries(anObj)
// getFoo is a non-enumerable property
const myObj = Object.create(
{},
{
getFoo: {
value() {
return this.foo;
},
},
},
);
myObj.foo = "bar";
console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]
document.getElementById("entry-12").innerHTML = "myObj : " + Object.entries(myObj)
</script>
example: iterating through an object.
use for . . . loop
use array methods
<div>
<p>use for . . . loop</p>
<p id="entry-13"></p>
<p> use array methods</p>
<p id="entry-14"></p>
</div>
<script>
// Using for...of loop
const obj4 = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj4)) {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
document.getElementById("entry-13").innerHTML += "obj4 : " + `${key} ${value}`+ " , ";
}
// Using array methods
Object.entries(obj4).forEach(([key, value]) => {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
document.getElementById("entry-14").innerHTML += "obj4 : " + `${key} ${value}`+ " , ";
});
</script>
example: converting Object to Map.
<div>
<p id="entry-15"></p>
</div>
<script>
var obj5 = { foo: 'bar', baz: 42 };
var map = new Map(Object.entries(obj5));
console.log(map); // Map { foo: "bar", baz: 42 }
document.getElementById("entry-15").innerHTML += "obj5 : " + map;
</script>