How do I implement Toastr JS?

on
4

Array.from() Method In JavaScript

on

Array.from()

Array.from() Method In JavaScript
Array.from() Method In JavaScript

Array.from() Method:

  • Javascript has an Array.map() substitute that we can use which is Array.from().
  • Array.from() has an optional parameter mapFn, which allows you to execute a map() function on each element of the array being created.
  • Array.from(obj, mapFn, thisArg) has the same result as Array.from(obj).map(mapFn, thisArg), except that it does not create an intermediate array, and mapFn only receives two arguments (element, index).
  • The from function is an intentionally generic factory method; it does not require that its this value be the Array constructor. Therefore it can be transferred to or inherited by any other constructors that may be called with a single numeric argument.
  • The Array.from() returns a new instance of Array that contains all elements of the target object.

Syntax: Array.from(target [, mapFn[, thisArg]])

  • target is an array-like or iterable object to convert to an array.
  • mapFn is the map function to call on every element of the array
  • thisArg is the this value when executing the mapFn function.

Examples:

Array from a String:

const str = Array.from('bhavesh');
console.log(str);
// [ 'b', 'h', 'a', 'v', 'e', 's', 'h' ]

Array from a Set:

const list = new Set(['bhavesh', 'arth', 'lexi', 'arth']);
console.log(Array.from(list));
// [ 'bhavesh', 'arth', 'lexi' ]

Array from a Map:

const map = new Map([
    ["a1", 1],
    ['a2', 2],
    ["a3", 3]
]);
console.log(Array.from(map));
// [ [ 'a1', 1 ], [ 'a2', 2 ], [ 'a3', 3 ] ]
console.log(Array.from(map.keys()));
// [ 'a1', 'a2', 'a3' ]
console.log(Array.from(map.values()));
// [ 1, 2, 3 ]

Using arrow functions and Array.from():

let students = [
    { name: "love", age: 20 },
    { name: "mac", age: 21 },
    { name: "kartik", age: 18 },
    { name: "shubham", age: 22 },
    { name: "jack", age: 19 },
]

let names = Array.from(students, ({ name }) => name);
console.log(names); // [ 'love', 'mac', 'kartik', 'shubham', 'jack' ]

let ages = Array.from(students, ({ age }) => age);
console.log(ages); // [ 20, 21, 18, 22, 19 ]

Array from a NodeList:

<body>
    <img src="http://localhost:1000/" alt="">
    <img src="http://localhost:2000/" alt="">
    <img src="http://localhost:3000/" alt="">
</body>

const images = document.getElementsByTagName('img');
const sources = Array.from(images, image => image.src);
console.log(sources);

/*
0: "http://localhost:1000/"
1: "http://localhost:2000/"
2: "http://localhost:3000/"
*/

Array from an Array-like object (arguments):

function demo() {
    return Array.from(arguments);
}
console.log(demo(1, 2, 3, 4, 5, 6, 7));
// [ 1, 2, 3, 4, 5, 6, 7 ]

Sequence generator:

console.log(Array.from({ length: 5 }, (v, i) => i));
// [0, 1, 2, 3, 4]


const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + (i * step));
console.log(range(0, 4, 1));
// [ 0, 1, 2, 3, 4 ]
console.log(range(1, 10, 2));
// [ 1, 3, 5, 7, 9 ]
console.log(range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x)));
// ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']

Reference from MDN Web Docs.
Thank you.

Comments

Post a Comment