revision:
The Array.from() static method creates a new, shallow-copied Array instance from an iterable or array-like object.
This method returns an array from any object with a length property, and from any iterable object.
Array.from() is a static property of the JavaScript Array object. You can only use it as Array.from(). Using x.from(), where x is an array will return undefined.
Array.from(arrayLike)
Array.from(arrayLike, mapFn)
Array.from(arrayLike, mapFn, thisArg)
Array.from(object, mapFunction, thisValue)
Parameters:
arrayLike, object : required; an iterable or array-like object to convert to an array.
mapFn, mapFunction : optional. A map function to call on every element of the array. If provided, every value to be added to the array is first passed through this function, and "mapFn"'s return value is added to the array instead. The function is called with the following arguments:
element : the current element being processed in the array.
index : the index of the current element being processed in the array.
thisArg, thisValue : optional. Value to use as "this" when executing "mapFn"/"mapFunction".
console.log(Array.from('foo'));
// Expected output: Array ["f", "o", "o"]
console.log(Array.from([1, 2, 3], x => x + x));
// Expected output: Array [2, 4, 6]
<div>
<p id="from-1"></p>
</div>
<script>
const set = new Set(["foo", "bar", "baz", "foo"]);
console.log(Array.from(set));
// [ "foo", "bar", "baz" ]
result = Array.from(set);
document.getElementById('from-1').innerHTML = JSON.stringify(result);
</script>
<div>
<p id="from-2"></p>
<p id="from-3"></p>
<p id="from-4"></p>
<p id="from-5"></p>
</div>
<script>
const map = new Map([
[1, 2],
[2, 4],
[4, 8],
]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]
result_A = Array.from(map);
document.getElementById('from-2').innerHTML = JSON.stringify(result_A);
const mapper = new Map([
["1", "a"],
["2", "b"],
]);
Array.from(mapper.values());
// ['a', 'b'];
result_B = Array.from(mapper.values());
document.getElementById('from-3').innerHTML = JSON.stringify(result_B);
Array.from(mapper.keys());
// ['1', '2'];
result_C = Array.from(mapper.keys());
document.getElementById('from-4').innerHTML = JSON.stringify(result_C);
document.getElementById('from-5').innerHTML = JSON.stringify(Array.from(mapper.keys()));
</script>
<div>
<p id="from-6"></p>
</div>
<script>
// Create an array based on a property of DOM Elements
const images = document.querySelectorAll("img");
const sources = Array.from(images, (image) => image.src);
const insecureSources = sources.filter((link) => link.startsWith("http://"));
</script>
<div>
<p id="from-7"></p>
<p id="from-8"></p>
</div>
<script>
let text = "ABCDEFG"
document.getElementById("from-7").innerHTML = "string : " + text;
const myArr = Array.from(text);
document.getElementById("from-8").innerHTML = "array : " + myArr;
</script>