Method
Overview of JavaScript Array.from() Method
The Array.from() method of JavaScript is a static method that creates a new, shallow-copied Array instance from an array-like or iterable object. It is often used to convert an array-like object into a true array, as the Array.from() method allows you to convert any iterable object into a true array.
The Array.from() method is also great for converting an array-like object into a true array, as it can convert any iterable object into a true array. For example, you can use it to convert a NodeList returned by the document.querySelectorAll() method into an array. This can be useful if you want to use the forEach() method on the obtained array.
Syntax of Array.from() Method
The syntax for the Array.from() method is as follows:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
Array.from(arrayLike[, mapFn[, thisArg]])
[/dm_code_snippet]
The arrayLike argument is the array-like or iterable object to convert to an array. It can be any object that has a length property and whose elements can be accessed via their index (0, 1, 2, etc.).
The mapFn argument (optional) is a map function that will be called on each element of the array. This argument is optional and can be used if you want to transform each element of the array.
The thisArg argument (optional) is the object which will be used as this value for the mapFn argument.
Example of Array.from() Method
Let’s look at a simple example of the Array.from() method. In this example, we will convert a NodeList object returned from the document.querySelectorAll() method into an array.
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
const nodeList = document.querySelectorAll('div');
const divsArray = Array.from(nodeList);
[/dm_code_snippet]
In the above code, we are using the document.querySelectorAll() method to select all the div elements on the page and store them in a variable called nodeList.
Next, we are using the Array.from() method to convert the nodeList object into an array and store it in a variable called divsArray.
Now that the divsArray is an array, we can use the forEach() method to loop through all the div elements on the page.
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
divsArray.forEach(div => {
console.log(div.innerHTML);
});
[/dm_code_snippet]
In the above code, we are using the forEach() method to loop through all the div elements on the page and log their inner HTML to the console.
Conclusion
In this tutorial, we have discussed the Array.from() method of JavaScript and how it can be used to convert an array-like or iterable object into a true array. We have also looked at a simple example of the Array.from() method and how it can be used to convert a NodeList returned by the document.querySelectorAll() method into an array.
