JavaScript array method, often used about 10 or so, in the article “JavaScript array operation must be skilled use of 10 methods” using text and code to introduce the use of each method, this article will not do too much introduction, this article will be through the graph analysis of the common array method function, Add a few more methods to the array.

Array.fill()

The.fill() method fills the elements of an array with a fixed value from the start index to the end index, from the start index (0 by default) to the end index (array.length by default), and returns the modified array.

Grammar: Array. The fill (value, start, end)

  • Value: indicates the array to be processed

  • Start: start index (default: 0)

  • End: The end index (default: array.length). If the end index is specified, it is the element that does not include the index itself

Const articles = [" How to pass parameters in Vue's compute properties ", "Angular Data State Management Framework: NgRx/Store "," Introduction to Angular Pipes ",]; Const replaceArticle = "10 methods of Array Manipulation in JavaScript "; console.log([...articles].fill(replaceArticle, 1)); /* [' How to pass parameters in Vue's computed attributes ', '10 Methods for JavaScript Array Manipulation must be used ', by: */ console.log([...articles].fill(replaceArticle, 1, 2)); // Replace elements from index 1 to index 2, excluding index 2 /* [' How to pass parameters in Vue computed attributes ', '10 Methods for JavaScript Array Manipulation must be used ', by: ', 'Introduction to Angular Pipes by'] */Copy the code

Array.from()

The.from() method creates a new, shallow copy of an array instance from a similar array or iterable.

Grammar: Array. The from (arrayLike mapFn)

  • ArrayLike: A pseudo-array object or iterable that you want to convert into an array

  • MapFn: Optional. If specified, this callback is performed for each element in the new array


console.log(Array.from([1, 2, 3], (item) => item + item)); // [ 2, 4, 6 ]

console.log(Array.from("china")); // [ 'c', 'h', 'i', 'n', 'a' ]

Copy the code

Method of use

The use of array.fill () and array.from () is outlined here, but is not limited to this article.

Create an array and assign a value

There are several ways to create and assign values to arrays. First, you can use the array. fill method to create an Array filled with values, but usually with the same values.

const numbers = new Array(5).fill(1); console.log(numbers); // [1, 1, 1, 1, 1]Copy the code

New Array(5) creates an Array with five dimensions and applies.fill() to replace each dimension with one.

You can generate an ascending array by calling the keys method on an empty array, as follows:

const numbers = [...new Array(5).keys()]; console.log(numbers); // [0, 1, 2, 3, 4]Copy the code

You can also populate an Array with array.from () and some computations, like this:

const numbers = Array.from(new Array(5), (_, i) => i ** 2); console.log(numbers); // [0, 1, 4, 9, 16]Copy the code

We created an array of numbers from 0 to 4 squared. If we wanted to create an array of undefined, we would do the following:


const undefineds = [...new Array(3)];

console.log(undefineds); // [ undefined, undefined, undefined ]

Copy the code

Creating duplicate values

There are four common ways to create duplicate values in JavaScript:

  • Using a loop

  • Use the Array. The fill ()

  • Use the repeat ()

  • The use of Array. The from ()

Repeat () constructs and returns a new string containing a specified number of copies of the string concatenated together.

Grammar: STR. Repeat (count)

  • count: integer indicating how many times the original string is repeated in the newly constructed string.
Const China = "🇨🇳 "; const createStrByRepeat = (str, count) => str.repeat(count); const createStrByFill = (str, count) => Array(count).fill(str).join(""); const createStrByFrom = (str, count) => Array.from({ length: count }, () => str).join(""); console.log(createStrByRepeat(china, 3)); / / 🇨 🇳 🇨 🇳 🇨 🇳 console. The log (createStrByFill (China, 3)); / / 🇨 🇳 🇨 🇳 🇨 🇳 console. The log (createStrByFrom (China, 3)); / / 🇨 🇳 🇨 🇳 🇨 🇳Copy the code

conclusion

In this article, through the graphical way to show the functions of the common JavaScript array method, combined with the previous “JavaScript array operation must be skilled in the use of 10 methods” content, I think for JavaScript array understanding and use should be no problem, if there is still insufficient place, Please don’t forget to mention it in the comments and we’ll update it later.