Preface
I have known this method for a long time and have used it, but I have been confused. Today I will tell you how to get to know it from scratch.
Official explanation: The () static method creates a new, shallow-copied Array instance from an iterable or array-like object.
Note: an iterable/array-like object
grammar
(arrayLike) (arrayLike, mapFn) (arrayLike, mapFn, thisArg)
parameter
- arrayLike: an array of classes or iterable objects that you want to convert to an array. Class array object (object with length attribute and index element).
- mapFn Optional: Call the function of each element of the array. If provided, each value to be added to the array is first passed to the function, and then the return value of mapFn is increased to the array. Call the function with the following parameters:
- element: The element currently being processed by the array.
- index: The index of the element currently being processed by the array.
- thisArg optional: Used as the value of this when executing mapFn.
Return value
A new array instance.
use
String
("foo");
// [ "f", "o", "o" ]Set
const set = new Set(["foo", "bar", "baz", "foo"]); (set); // [ "foo", "bar", "baz" ]
Map
const map = new Map([ [1, 2], [2, 4], [4, 8], ]); (map); // [[1, 2], [2, 4], [4, 8]] const mapper = new Map([ ["1", "a"], ["2", "b"], ]); (()); // ['a', 'b']; (()); // ['1', '2'];
Note the difference between new Map() and {}
const map = {
0: 1,
1: 2,
3: 4,
}
let result = (map)
(result) // []Add a length to the map object
const map = {
0: 1,
1: 2,
3: 4,
length: 3
}
let result = (map)
(result) // [ 1, 2, undefined ]Change length to 4
(result) // [ 1, 2, undefined, 4 ]
Adding length is the class array object. () is found from subscript 0 by default and added to the new array. The above () omits mapFn, which is actually the same as the below.
let result = (map, (v, i) => v)
This is more eye-catching. It is traversed through the length attribute and then added the value to the new array.
NodeList
// Create an array based on the properties of the DOM elementconst images = ("img");
const sources = (images, (image) => );
const insecureSources = ((link) => ("http://"));Arrow function
// Use arrow function as mapping function to// Manipulate multiple elements([1, 2, 3], (x) => x + x);
// [2, 4, 6]
// Generate a sequence of numbers// Because the array is initialized with `undefined` at every location,// The following `v` value will be `undefined`({ length: 5 }, (v, i) => i);
// [0, 1, 2, 3, 4]Sparse arrays
(([,,3,4])) // [ undefined, undefined, 3, 4 ]
Sequence generator
// Sequence generator function (usually called "range", such as Clojure, PHP, etc.)const range = (start, stop, step) =>
({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);
// The generated number range 0..4range(0, 4, 1);
// [0, 1, 2, 3, 4]
// The generated number range is 1..10, with a step size of 2range(1, 10, 2);
// [1, 3, 5, 7, 9]
// Use to generate an alphabet and sort its sequencerange("A".charCodeAt(0), "Z".charCodeAt(0), 1).map((x) =>
(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"]Call from() on non-array constructor
The from() method can be called on any constructor as long as the constructor accepts a single parameter representing the length of the new array.
function NotArray(len) {
("NotArray called with length", len);
}
// Iterable object((NotArray, new Set(["foo", "bar", "baz"])));
// NotArray called with length undefined
// NotArray { '0': 'foo', '1': 'bar', '2': 'baz', length: 3 }
// Class array object((NotArray, { length: 1, 0: "foo" }));
// NotArray called with length 1
// NotArray { '0': 'foo', length: 1 }When this value is not a constructor, return a normal array object.
(({}, { length: 1, 0: "foo" })); // [ 'foo' ]Difference from ()
(obj, mapFn, thisArg) and (obj).map(mapFn, thisArg) have the same result, except that it does not create intermediate arrays, and mapFn only accepts two parameters (element, index) and does not accept arrays because the array is still under construction.
(mapFn, thisArg) parameter mapFn accepts three parameters (element, index, array), and array is the array itself that calls map().
() can basically replace () method.
Summarize
(arrayLike, mapFn, thisArg) accepts three parameters, the last two parameters are optional parameters, and returns an array instance. And this array instance is not a sparse array.
() can return a new array directly from the iterable object. Such as: String, Map, Set.
const map = {
0: 1,
1: 2,
3: 4,
length: 3
}
( in map) // false
( in new String('1123')) // true
( in new Map()) // true
( in new Set()) // true() You can also return a new array from the class array object.
({ length: 5 }, (v, i) => i); // [0, 1, 2, 3, 4]() can basically replace () method.
refer to
() - JavaScript | MDN ()
This is the end of this article about the use of () in JavaScript. For more related JavaScript () content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!