• Translation

Most applications developed these days require interaction with some kind of data set. Handling elements in collections is a common operation that you've probably encountered. When working, for example, with arrays, you can, without thinking, use a regular for loop, which looks something like this: for (var i=0; i< value.length; i++){} . Однако, лучше, всё-таки, смотреть на вещи шире.

Suppose we need to display a list of products, and, if necessary, divide it into categories, filter it, perform a search on it, modify this list or its elements. Perhaps you need to quickly perform some calculations that involve the elements of a list. Let's say you need to add something with something, multiply something by something. Is it possible to find tools in JavaScript that allow you to solve such problems faster and more conveniently than using a regular for loop?

In fact, there are such facilities in JavaScript. Some of them are discussed in the material, the translation of which we present to your attention today. In particular, we are talking about the spread operator, the for...of loop, and the includes(), some(), every(), filter(), map() and reduce() methods. We'll mostly be talking about arrays here, but the techniques discussed here are generally suitable for working with other types of objects.

It should be noted that reviews of modern approaches to JS development usually include examples prepared using arrow functions. Perhaps you don't use them very often - maybe because you don't like them, maybe because you don't want to spend too much time learning something new, or maybe they're just not right for you. Therefore, here, in most situations, two options for performing the same actions will be shown: using regular functions (ES5) and using arrow functions (ES6). For those new to working with arrow functions, arrow functions are not the equivalent of function declarations and function expressions. You should not replace one with the other. In particular, this is due to the fact that in ordinary and arrow functions keyword this behaves differently.

1. Expansion operator

The spread operator allows you to “expand” arrays by substituting their elements instead of arrays in the place where this operator is used. A similar approach has been proposed for object literals.

▍Strengths of the expansion operator

• It's simple and quick way“pull out” its individual elements from an array.
• This operator is suitable for working with array and object literals.
• This is a fast and intuitive method of working with function arguments.
• The extension operator does not take up much space in the code - it looks like three dots (...).

▍Example

Let's say you're tasked with listing your favorite treats without using a loop. Using the extension operator this is done like this:

2. Loop for…of

The for…of statement is designed to traverse iterable objects. It gives access to individual elements such objects (in particular, to array elements), which, for example, allows them to be modified. It can be considered a replacement for the usual for loop.

▍Strengths of the for…of loop

• This is an easy way to add or update collection items.
• The for…of loop allows you to perform various calculations using elements (summation, multiplication, and so on).
• It is convenient to use when you need to check any conditions.
• Its use leads to writing cleaner and more readable code.

▍Example

Let's say you have a data structure that describes the contents of a toolbox and you want to display those tools. Here's how to do it using a for...of loop:

3. The includes() method

The includes() method is used to check if a certain element is present in the collection, in particular, for example, specific line in an array containing strings. This method returns true or false depending on the results of the test. When using it, it is worth considering that it is case sensitive. If, for example, the collection contains the string element SCHOOL , and includes() checks for its presence using the string school , the method will return false .

▍Strengths of the includes() method

• The includes() method is useful in creating simple data retrieval mechanisms.
• It gives the developer an intuitive clear way determining the presence of certain data in the array.
• It is convenient to use in conditional expressions to modify, filter elements, and perform other operations.
• Its use leads to improved code readability.

▍Example

Suppose you have a garage, represented by an array with a list of cars, and you do not know whether a certain car is in this garage or not. In order to solve this problem, you need to write code that allows you to check whether a car is in the garage. Let's use the includes() method:

4. some() method

The some() method allows you to check whether some of the elements you are looking for exist in the array. Based on the results of the check, it returns true or false . It is similar to the includes() method above, except that its argument is a function rather than, for example, a regular string.

▍Strengths of the some() method

• The some() method allows us to check whether the array contains at least one of the elements we are interested in.
• It performs a condition test using the function passed to it.
• This method is convenient to use.

▍Example

Suppose you are the owner of a club, and in general, you are not interested in who exactly comes to your club. However, some visitors are not allowed to enter the club, as they are prone to excessive consumption of alcoholic beverages, according to at least, in the event that they find themselves in your establishment on their own, and there is no one with them who can look after them. IN in this case a group of visitors can enter the club only if at least one of them is at least 18 years old. In order to automate this kind of check, we will use the some() method. Below its application is demonstrated in two versions.

ES5

ES6

5. Every() method

The every() method iterates through an array and tests each element against a certain condition, returning true if all elements of the array match the condition, and false otherwise. You can see that it is similar to the some() method.

▍Strengths of the every() method

• The every() method allows you to check whether all elements of an array meet a condition.
• Conditions can be set using functions.
• It promotes a declarative approach to programming.

▍Example

Let's return to the previous example. There you allowed visitors under 18 into the club, but someone wrote a statement to the police, after which you found yourself in an unpleasant situation. After everything was sorted out, you decided that you didn’t need all this and tightened the rules for visiting the club. Now a group of visitors can enter the club only if each member of the group is at least 18 years old. As last time, we will consider solving the problem in two versions, but this time we will use the every() method.

ES5

ES6

6. filter() method

The filter() method allows you to create, based on an array, new array, containing only those elements source array, which satisfy the given condition.

▍Strengths of the filter() method

• The filter() method avoids modification of the original array.
• It allows you to get rid of unnecessary elements.
• It improves code readability.

▍Example

Suppose you need to select from a list of prices only those that are greater than or equal to 30. Let's use the filter() method to solve this problem.

ES5

ES6

7. Map() method

The map() method is similar to the filter() method in that it also returns a new array. However, it is used to modify the elements of the original array.

▍Strengths of the map() method

• The map() method avoids the need to change the elements of the original array.
• It can be used to conveniently modify array elements.
• It improves code readability.

▍Example

Let's say you have a list of products with prices. Your manager needs new list goods whose prices are reduced by 25%. Let's use the map() method to solve this problem.

ES5

ES6

8. reduce() method

The reduce() method, in its simplest form, allows you to sum the elements of numeric arrays. In other words, it reduces the array to a single value. This allows you to use it to perform various calculations.

▍Strengths of the reduce() method

• Using the reduce() method, you can calculate the sum or average of the elements of an array.
• This method speeds up and simplifies calculations.

▍Example

Let's say you need to calculate your expenses for the week, which are stored in an array. Let's solve this problem using the reduce() method.

ES5

ES6

Add tags

Arrays are one of the most commonly used types of variables that allow you to store many sequential values ​​in “one place.” However, when it comes to JavaScript, there is room for improvement.

In this article, we'll look at three little-known techniques that can be used when working with arrays.

1. Addition custom properties to arrays

If you use a search to find the JavaScript definition of an array, most sources will state that this type The value of a variable is represented as an object.

Generally speaking, a lot of the things we encounter in JavaScript are objects. It would be fair to note that the language also contains “primitive” data types, but their values ​​are somehow used in properties inside objects.

2. Accessing array elements within a loop

Since array indices can only take positive values, the counting starts from zero. We can later use this index to access the array element at a given loop iteration.

ECMAScript6 introduced a way to scroll through an array without using indexes, but through new cycle for...of.

The for...of loop is designed to iterate through the elements of an array without affecting the index of the element.

Var ary = ["orange","apple","lychee"]; for (let item of ary)( console.log(item); ) // "orange", "apple", "lychee" For comparison: outputting item indices in a for loop. var ary = ["orange","apple","lychee"]; for (var item = 0; item< ary.length; item++){ console.log(item); } // 0, 1, 2

3. The number of elements is not the dimension of the array

When we talk about the size of an array, we usually think of it as the number of elements stored in it. In fact, this is not entirely true - the length property is calculated depending on the maximum index of the element.

The length property is very ambiguous. To verify this, just look at the following manipulations:

Var ary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6

In the last example, it was enough to put the element in the fifth position, as a result of which the length of the array became 6. If you think that indexes from 0 to 4 will be created automatically, you will be wrong. This can be checked using the in operator.

Var ary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 console.log(0 in ary); // false

In this case, it would be fair to call the ary array "sparse".

We can also manipulate the length property to trim arrays. The example below demonstrates the “loss” of the element at index 5 by decreasing the value of the property array length ary.

Var ary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 ary.length = 2; console.log(ary.length); // 2 console.log(ary); // undefined

• Translation

• I. Iterating over real arrays
  1. forEach method and related methods
  2. for loop
  3. Proper Use for...in loop
  4. for...of loop (implicit use of iterator)
  5. Explicit use of iterator
• 1. Using methods to iterate over real arrays
  2. Convert to a real array
  3. A note on runtime objects

I. Iterating over real arrays

On this moment There are three ways to iterate over the elements of a real array:

1. method Array.prototype.forEach ;
2. classic for loop
3. a “correctly” constructed for...in loop.

In addition, soon, with the advent of the new ECMAScript 6 (ES 6) standard, two more methods are expected:

1. for...of loop (implicit use of iterator);
2. explicit use of iterator.

1. The forEach method and related methods

If your project is designed to support the features of the ECMAScript 5 (ES5) standard, you can use one of its innovations - the forEach method.

Usage example:
var a = ["a", "b", "c"]; a.forEach(function(entry) ( console.log(entry); ));
In general using forEach requires connecting the es5-shim emulation library for browsers that do not have native support this method. These include IE 8 and above early versions, which are still in use here and there.

The advantage of forEach is that there is no need to declare local variables to store the index and value of the current array element, since they are automatically passed to the callback function as arguments.

If you're worried about the possible cost of calling a callback on each element, don't worry and read this.

ForEach is designed to iterate over all elements of an array, but in addition to it, ES5 offers several more useful methods for iterating through all or some elements plus performing some actions on them:

• every - returns true if for each element of the array the callback returns a value that can be converted to true .
• some - returns true if for at least one element of the array the callback returns a value that can be converted to true.
• filter - creates a new array that includes those elements of the original array for which the callback returns true .
• map - creates a new array consisting of the values ​​returned by the callback.
• reduce - reduces an array to a single value, applying a callback to each array element in turn, starting with the first (can be useful for calculating the sum of array elements and other summary functions).
• reduceRight - works similar to reduce, but iterates through elements in reverse order.

2. For loop

Good old for rules:

Var a = ["a", "b", "c"]; var index; for (index = 0; index< a.length; ++index) { console.log(a); }
If the length of the array is constant throughout the loop, and the loop itself belongs to a performance-critical section of code (which is unlikely), then you can use a “more optimal” version of for that stores the length of the array:

Var a = ["a", "b", "c"]; var index, len; for (index = 0, len = a.length; index< len; ++index) { console.log(a); }
In theory, this code should run a little faster than the previous one.

If the order of the elements is not important, then you can go even further in terms of optimization and get rid of the variable for storing the length of the array, changing the order of the search to the reverse:

Var a = ["a", "b", "c"]; var index; for (index = a.length - 1; index >= 0; --index) ( console.log(a); )
However, in modern JavaScript engines such optimization games usually mean nothing.

3. Correct use of the for...in loop

If you are advised to use a for...in loop, remember that iterating over arrays is not what it is intended for. Contrary to a common misconception, the for...in loop does not iterate over array indices, but rather through enumerable properties of an object.

However, in some cases, such as iterating over sparse arrays, for...in can be useful, as long as you take precautions, as shown in the example below:

// a - sparse array var a = ; a = "a"; a = "b"; a = "c"; for (var key in a) ( if (a.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key<= 4294967294) { console.log(a); } }
In this example, two checks are performed at each iteration of the loop:

1. that the array has its own property called key (not inherited from its prototype).
2. that key is a string containing the decimal representation of an integer whose value is less than 4294967294 . Where does the last number come from? From the definition of an array index in ES5, which shows that the highest index an element in an array can have is: (2^32 - 2) = 4294967294 .

Of course, such checks will take up unnecessary time when executing the loop. But in the case of a sparse array, this method is more efficient than a for loop, since in this case only those elements that are explicitly defined in the array are iterated. So, in the example above, only 3 iterations will be performed (for indexes 0, 10 and 10000) - versus 10001 in the for loop.

In order not to write such a cumbersome check code every time you need to iterate through an array, you can write it as a separate function:

Function arrayHasOwnIndex(array, key) ( return array.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key<= 4294967294; }
Then the body of the loop from the example will be significantly reduced:

For (key in a) ( if (arrayHasOwnIndex(a, key)) ( console.log(a); ) )
The check code discussed above is universal, suitable for all cases. But instead, you can use a shorter version, although formally not entirely correct, but nevertheless suitable for most cases:

For (key in a) ( if (a.hasOwnProperty(key) && String(parseInt(key, 10)) === key) ( console.log(a); ) )

4. For...of loop (implicit use of iterator)

ES6, still in draft status, should introduce iterators to JavaScript.

Iterator is a protocol implemented by an object that defines a standard way to obtain a sequence of values ​​(finite or infinite).
An iterator is an object that defines a next() method - a no-argument function that returns an object with two properties:

1. done (boolean) - true if the iterator has reached the end of the iterable sequence. Otherwise the value is false .
2. value - defines the value returned by the iterator. May be undefined (missing) if the done property is true .

Many built-in objects, incl. real arrays have iterators by default. The simplest way to use an iterator on real arrays is to use the new for...of construct.

Example of using for...of:

Varval; var a = ["a", "b", "c"]; for (val of a) ( console.log(val); )
In the example above, the for...of loop implicitly calls the Array object's iterator to obtain each value of the array.

5. Explicit use of iterator

Iterators can also be used explicitly, however, in this case the code becomes much more complicated compared to the for...of loop. It looks something like this:

Var a = ["a", "b", "c"]; var it = a.entries(); var entry; while (!(entry = it.next()).done) ( console.log(entry.value); )
In this example, the Array.prototype.entries method returns an iterator that is used to display the values ​​of the array. At each iteration, entry.value contains an array of the form [key, value] .

II. Iterating over array-like objects

In addition to real arrays, in JavaScript there are also array-like objects . What they have in common with real arrays is that they have a length property and properties named as numbers corresponding to the elements of the array. Examples include the DOM of the NodeList collection and the arguments pseudo-array, available inside any function/method.

1. Using methods to iterate over real arrays

At a minimum, most, if not all, methods of iterating over real arrays can be used to iterate over array-like objects.

The for and for...in constructs can be applied to array-like objects in exactly the same way as they are applied to real arrays.

ForEach and other Array.prototype methods also apply to array-like objects. To do this you need to use Function.call or Function.apply .

For example, if you want to apply forEach to the childNodes property of a Node object, you would do it like this:

Array.prototype.forEach.call(node.childNodes, function(child) ( // do something with the child object));
To make this trick easier to reuse, you can declare a reference to the Array.prototype.forEach method in a separate variable and use it as a shortcut:

// (Assuming all code below is in the same scope) var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes, function(child) ( // do something with the child object));
If an array-like object has an iterator, it can be used explicitly or implicitly to iterate over the object in the same way as for real arrays.

2. Convert to a real array

There is also another, very simple way to iterate over an array-like object: convert it into a real array and use any of the methods discussed above for iterating over real arrays. For conversion, you can use the generic Array.prototype.slice method, which can be applied to any array-like object. This is done very simply, as shown in the example below:

Var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);
For example, if you wanted to convert a NodeList collection into an actual array, you'd need code something like this:

Var divs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);
Update: As noted in the comments

In JavaScript, as well as in other programming languages, different methods are used to work with arrays.

Methods simplify the construction of logic and its implementation in a script.

Below are the basic methods for working with arrays in JS.

push

The push() method adds a value to the end of the array.

Let arr = ; arr.push(312); console.log(arr); // →

pop

The pop() method removes the last element from the array or returns its value.

Let arr = ; arr.pop(); console.log(arr); // →

Using the ability to get the value of the last element of an array as an example, we can get the image format:

Let img = "https://example.com/img/name.png"; let format = img.split(".").pop(); console.log(format); // → png console.log(img.split(".")); // → ["https://example", "com/img/name", "png"]

unshift

The unshift() method adds an element to the beginning of the array.

Let arr = ; arr.unshift(312); console.log(arr); // →

shift

The shift() method removes the first element from the array.

Let arr = ; arr.shift(); console.log(arr); // → ;

You need to understand that when using the shift and unshift methods, each element of the array changes its index. This can slow down program execution if the array is large.

split

The split() method is used to transform a string into an array. Split splits a string according to the specified parameter.

Let str = "Anya, Masha, Sasha, Dasha"; // this is a string let arr = str.split(", "); console.log(arr); // → ["Anya", "Masha", "Sasha", "Dasha"] is an array

join

The join() method combines array elements into a string using the delimiter specified in the parameter.

Let arr = ["Notpad++", "Sublime", "VSCode"]; // this is an array let str = arr.join(", "); console.log("Editors for code: " + str); // → "Editors for code: Notpad++, Sublime, VSCode"

slice

The slice() method creates a new array into which it copies elements from the source, starting from the element with the index of the first parameter passed to the method, to the element with the index of the second parameter.

For example: slice(3, 7) will return elements with indexes 3, 4, 5, 6. The element with index 7 will not be included in the array.

If a parameter with a negative value is passed to slice(), then it returns a new array with the number of elements specified in the parameter, but already taken from the end of the original array.

The slice method does not change the original array.

Here are some examples of the slice() method in action:

Let arr = ["A", "B", "C", "D", "E", "F", "G"]; // Returns an array containing elements with indexes from 2 to 5 console.log(arr.slice(2, 5)); // → ["C", "D", "E"] // Returns a new array containing elements with indices from 3 to arr.length console.log(arr.slice(3)); // → ["D", "E", "F", "G"] // Returns a copy of the original array console.log(arr.slice()); // → ["A", "B", "C", "D", "E", "F", "G"] // Returns a new array consisting of the last three elements of the original console.log(arr.slice (-3)); // → ["E", "F", "G"]

splice

The splice() method modifies the contents of an array by removing existing elements and/or adding new ones.

Syntax:

Array.splice(start, deleteCount[, item1[, item2[, ...]]])

Options:

• start- The index at which to start changing the array. If greater than the length of the array, the real index will be set to the length of the array. If negative, specifies the index of the element from the end.
• deleteCount- An integer indicating the number of old elements to be removed from the array. If deleteCount is 0, no elements are deleted. In this case, you must specify at least one new element. If deleteCount is greater than the number of elements remaining in the array starting at index start, then all elements up to the end of the array will be deleted.
• itemN- Optional parameters. Elements to be added to the array. If you don't specify any element, splice() will simply remove elements from the array.

Return value

Description

If the number of elements specified to be inserted is different from the number of elements to be removed, the array will change length after the call.

Let arr = ["Barca", "Shakhtar", "Manchester United", "Milan", "Real", "Ajax", "Juventus"]; let nax = arr.splice(2, 3); arr.splice(2, 3); console.log(nax); // → ["Manchester United", "Milan", "Real"] console.log(arr); // → ["Barca", "Shakhtar"] arr.splice(1, 0, "Zenit", "CSKA", "Spartak"); console.log(arr); // → [Barça, Zenit, CSKA, Spartak, Shakhtar]

reverse

The reverse() method reverses the order of the array elements. As a result, the first element of the array becomes the last, and the last element becomes the first.

Let arr = ; console.log(arr.reverse()); // → console.log(["Alice", "BG", "GO", "DDT"].reverce()); // → ["DDT", "GO", "BG", "Alice"]

map

The map() method goes through the elements of the array, performing specified actions on them, and returns a copy of the array with the changed elements.

In the example below, to each array element we add the index value of this element (7 + 0, 2 + 1, 15 + 2, 4 + 3, 31 + 4):

Let arr = ; let testMap = arr.map((element, index) => element + index); console.log(testMap); //

or multiply each value of the array, for example, by 12

Let arr = ; let testMap = arr.map(a => a * 12); console.log(testMap); // →

filter

The filter() method is used to filter arrays. It iterates through the array, returning only those elements that pass a given condition.

For example, let's filter the values ​​of an array of numbers, leaving only those that are greater than 21

Let arr = ; let testFilter = arr.filter(element => element > 21); console.log(testFilter); // →

Please note that 21 was not included in the array result, since the condition was to return something that is greater than 21. In order for 21 to be included in the array, we set the condition as greater than or equal to: element >= 21

reduce

The reduce() method sequentially goes through the elements of the array, accumulating the intermediate result according to the function specified in the condition of the function. IN end result it returns just one value.

This method is often used to find the sum of all numbers in an array. Example:

Let arr = ; let summa = arr.reduce((acc, element) => acc + element); console.log(sum); // → 370

sort

The sort() method is used to sort array elements according to specified parameters.

Example - let's take an array of numbers and sort them in ascending order:

Let arr = ; let testSortArr = arr.sort((a, b) => a - b); console.log(testSortArr); // →

includes

The includes() method determines whether the array contains a particular element, returning true or false depending on it.

Example of using includes() .

Here's a logical expression:

Let animal = "dog"; if (animal == "cat" || animal == "dog" || animal == "lion" || animal == "horse") ( // ........ )

Using the includes method you can write it like this:

Let animal = "dog"; const animals = ["cat", "dog", "lion", "horse"]; if (animals.includes(animal)) ( // ........... )