• JavaScript Video Tutorials

JavaScript - Array values() Method

An array is a data structure in JavaScript that is used to store multiple values in a single variable. Each value in an array is called an element, and each element has a unique index.

In JavaScript, the Array.values() method doesn't accept any parameters and returns a new array iterator object that contains the values of the array, in insertion order. This iterator object can be used to iterate over the values of the array using a for...of loop or the next() method.

The values() method is compatible in almost every browser such as Chrome, Edge, FireFox, Opera, and Safari.

Syntax

Following is the syntax of JavaScript Array.values() method −

values()

Parameters

This method does not accept any parameters.

Return value

This method returns a new iterable iterator object that contains the values of the array.

Examples

Example 1

In the following example, we are creating an iterator object using the values() method. Then, we are manually retrieving each element using the next() method on the iterator.

<html>
<body>
   <script>
      let array = ['apple', 'banana', 'cherry'];
      let iterator = array.values();
      document.write(iterator.next().value, "<br>");
      document.write(iterator.next().value, "<br>");
      document.write(iterator.next().value);
   </script>
</body>
</html>

After executing the above program, it prints all the elements of the array in insertion order.

Output

apple
banana
cherry

Example 2

In this example, we are iterating through the elements of array using values() method and printing them in insertion order using for...of loop from the result of the values() method.

<html>
<body>
   <script>
      let array = ['apple', 'banana', 'cherry'];
      let iterator = array.values();
      for (let value of iterator) {
         document.write(value, "<br>");
      }
   </script>
</body>
</html>

If we execute the above program, it prints all the elements of the array in insertion order.

Output

apple
banana
cherry

Example 3

Here, we are using the Array.from() method to create a new array containing the values returned by the values() method. The Array.from() method creates a shallow copy of the array, so the original array remains unchanged.

<html>
<body>
   <script>
      let array = ['apple', 'banana', 'cherry'];
      let valuesArray = Array.from(array.values());
      document.write(valuesArray);
   </script>
</body>
</html>

After executing the above program, it prints all the elements of the array in insertion order.

Output

apple,banana,cherry

Example 4

In this example, we are creating a sparse array with three elements at indices 1, 3, and 5. When we create an iterator object using the values() method, the iterator object returns undefined for the indices that do not have a value in the array.

<html>
<body>
   <script>
      let array = [];
      array[1] = 'apple';
      array[3] = 'banana';
      array[5] = 'cherry';
      let iterator = array.values();
      document.write(iterator.next().value, <br>); //undefined
      document.write(iterator.next().value, <br>); //'apple'
      document.write(iterator.next().value, <br>); //undefined
      document.write(iterator.next().value, <br>); //'banana'
      document.write(iterator.next().value, <br>); //undefined
      document.write(iterator.next().value); //'cherry'
   </script>
</body>
</html>

As we can see in the output, it returned 'undefined' for indices (0, 2, 4) and associated values for (1, 3, 5).

Advertisements