Updated April 11, 2023
Introduction to JavaScript Array from()
JavaScript Array from() method is an extended method being derived from Array References. Array from the () method is specifically used to return an Array object from any other object of reference which has a property with some defined length and an object to be used for iteration. Array from() method is therefore almost similar to creating an array with a set of elements with a mere addition that it can also have a reference to the set of elements of other array elements with some defined length and iteration properties.
Syntax
Below is the syntax:
Array_with_set_of_elements.from(object_reference, map_function, thisValue)Significance of the above-mentioned arguments or the parameter passed with Array_with_set_of_elements.from function is as follows:
- Object_reference: This argument is used to convert the referenced object into an array.
- map_function: It is a kind of optional parameter that is used when a map function is used to call any specific item from the defined array.
- thisValue: It is also a kind of optional parameter that is used when a map function is executed with this as value to be used.
The return value, in this case, is that it returns a new Array instance of elements that are almost the same as the considered set of arrays.
Array.function(alphabet_of_string)For example:
Array.function(B)Here, B refer to the element or the alphabet as a part of string.
How Array From() Method Works in JavaScript?
The array from() method is part of Array references which is considered as an extension for creating a new set of array instance from a given array. In case it is a need to create an array with a set of elements as an alphabet within a string then a new array with set of alphabets to be referred into a new array is used to get an entire new array.
The Array from() method makes use of array in JavaScript whose characteristics clearly define the fact that length of the list of arrays nor even the types of its elements are fixed. Since it tells that arrays are dynamic, and its definition is not fixed therefore it tells another key fact that the elements and their associated array is not as dense as required.
Also arrays inside the JavaScript cannot support exclusively for the strings with element indexes as in an associative array but can be used as an integer. On the other hand, to support it properly and to get a proper accessibility via non-integer values using bracket notation will not retrieve that specific value but it will retrieve the elements if a bracket notation or dot notation will be used with that object’s property or collection set. Also, the array’s traversal properties cannot be applied with the properties so named.
As mentioned, Object can be accessed using object property similarly to String() method inside array list of object properties is used to access the alphabet relevant to the element of the string.
There is a strong relationship between the length and object reference for accessing the elements respectively from their defined array set in JavaScript Array.
There are both static properties and static methods supporting for JavaScript Array which includes Array.from() method whose working again depends on the type of arguments passed from the function which helps in creating a new instance of an array with a variable number of arguments despite being array type and iterable object.
Examples of JavaScript Array from()
Below are the examples of JavaScript array from():
Example #1
This example is used to define the string of array and retrieval of elements from that array with the help of getElementById() method used to get the sequence or the list of elements as described in the output.
Code:
<!DOCTYPE html>
<html>
<body>
<h1>To Display Array.from() method </h1>
<p>Creating an Array from a String:</p>
<p id="demo"></p>
<p><strong>Note:</strong> This Array.from() method is not supported in IDE 11 (and earlier versions).</p>
<script>
var myArr = Array.from("M,N,O,P,Q,R,S,T");
document.getElementById("demo").innerHTML = myArr;
</script>
</body>
</html>Output:
Example #2
This example represents an array of 32- bit unsigned integer of string like structure and then returns a new array unsigned integer array as described in the output.
Code:
<!DOCTYPE html>
<html>
<body>
<h1>To Display Array.from() method using unsigned integer 35 </h1>
<p>Creating an Array from a String:</p>
<p id="demo"></p>
<script>
var array = Uint32Array.from('981896509983573456');
document.write(array);
</script>
</body>
</html>Output:
Example #3
This example represents an array of 32-bit unsigned integer of string array by dividing with 32 to each number with using the function.
Code:
<!DOCTYPE html>
<html>
<body>
<h1>To Display Array.from() method using unsigned integer 35 in an grouped manner </h1>
<p>Creating an Array from a String:</p>
<p id="demo3"></p>
<script>
var array = Uint32Array.from([256897, 125648, 326589, 258748,
23432, 52345, 4345, 2432
], z => z / 32);
document.write(array);
</script>
</body>
</html>Output:
Example #4
This example is used to represent the string in the considered array getting converted into a set of new converted array.
Code:
<html>
<head><h5> JavaScript Array Methods possible examples </h5></head>
<body>
<script>
var arr=Array.from("illustration of an example of string representing educba");
document.write("The output is: <br>" +arr);
</script>
</body>
</html>Output:
Example #5
This example is used to illustrate the array from () method to represent with the set of length of elements which in this case is the set of names passed as an argument.
Code:
<html>
<head><h5> JavaScript Array Methods to represent from method with the help of length property </h5></head>
<body>
<script>
var func = function() {
document.write(Array.from(arguments));
}
func('anu','bob','Jeff','jasmnine');
</script>
</body>
</html>Output:
Conclusion
Array from() method is a very useful method compared to other methods of Java References as it helps in accessing the elements using length and object reference property within the array elements.
Recommended Articles
This is a guide to JavaScript Array from(). Here we discuss an introduction to JavaScript Array from() along with how does it work and programming examples. You may also have a look at the following articles to learn more –
