JavaScript - values() method

revision:

Category : array

The values() method returns a new array iterator object that iterates the value of each item in the array.

Syntax : 

        values()

Parameters: none

Examples: 

            const array1 = ['a', 'b', 'c'];
            const iterator = array1.values();
            for (const value of iterator) {
            console.log(value);
            }
            // Expected output: "a"
            // Expected output: "b"
            // Expected output: "c"

Category : object

The Object.values() static method returns an array of a given object's own enumerable string-keyed property values.

Syntax : 

        Object.values(obj)

Parameters:

obj : required. An object.

Examples: 

            const object1 = {
                a: 'somestring',
                b: 42,
                c: false
            };
            console.log(Object.values(object1));
              // Expected output: Array ["somestring", 42, false]

Practical examples

example: iteration using a for...of loop.

code: 
                    <div>
                        <p id="values-1"></p>
                        <p id="values-2"></p>
                    
                    </div>
                    <script>
                        const arr = ["a", "b", "c", "d", "e"];
                        document.getElementById("values-1").innerHTML = "array = " + arr;
                        const iterator = arr.values();
                        for (const letter of iterator) {
                        console.log(letter);
                        document.getElementById("values-2").innerHTML += "letter = " + letter +"<br>";
                        } // "a" "b" "c" "d" "e"
                    </script>

example: iteration using "next".

code: 
                    <div>
                        <p id="values-3"></p>
                        <p id="values-4"></p>
                        <p id="values-5"></p>
                    
                    </div>
                    <script>
                        const arr1 = ["a", "b", "c", "d", "e"];
                        document.getElementById("values-3").innerHTML = "array = " + arr1;
                        const iterator1 = arr1.values();
                        iterator1.next(); // { value: "a", done: false }
                        iterator1.next(); // { value: "b", done: false }
                        iterator1.next(); // { value: "c", done: false }
                        iterator1.next(); // { value: "d", done: false }
                        iterator1.next(); // { value: "e", done: false }
                        iterator1.next(); // { value: undefined, done: true }
                        console.log(iterator1.next().value); // undefined
                        document.getElementById("values-4").innerHTML += "value = " + iterator1.next();
            
                    </script>

example: using Object.values() method.

code: 
                    <div>
                        <p id="values-6"></p>
                        <p id="values-7"></p>
                        <p id="values-8"></p>
                        <p id="values-9"></p>
                    </div>
                    <script>
                        const obj = { foo: "bar", baz: 42 };
                        console.log(Object.values(obj)); // ['bar', 42]
                        document.getElementById("values-6").innerHTML += " object values = " + Object.values(obj);
                        // Array-like object
                        const arrayLikeObj1 = { 0: "a", 1: "b", 2: "c" };
                        console.log(Object.values(arrayLikeObj1)); // ['a', 'b', 'c']
                        document.getElementById("values-7").innerHTML += " object values = " + Object.values(arrayLikeObj1);
                        // Array-like object with random key ordering
                        // When using numeric keys, the values are returned in the keys' numerical order
                        const arrayLikeObj2 = { 100: "a", 2: "b", 7: "c" };
                        console.log(Object.values(arrayLikeObj2)); // ['b', 'c', 'a']
                        document.getElementById("values-8").innerHTML += " object values = " + Object.values(arrayLikeObj2);
                        // getFoo is a non-enumerable property
                        const myObj = Object.create(
                            {},
                            {
                                getFoo: {
                                    value() {
                                        return this.foo;
                                    },
                                },
                            },
                        );
                        myObj.foo = "bar";
                        console.log(Object.values(myObj)); // ['bar']
                        document.getElementById("values-9").innerHTML += " object values = " + Object.values(myObj);
                    </script>