SoFunction
Updated on 2025-04-03

A article explains all the usages of for loops in JS

Talk about it for…of

for...ofis a loop syntax of JavaScript, used forIterate through iterable objects(such as arrays, strings, Sets, Map, etc.)Elements in. It provides a concise way to iterate over elements in a collection without using traditional index iterations.

The following isfor...ofBasic syntax of loops:

for (variable of iterable) {
  // Code executed in each iteration  // Learn the word statement sentence  // outline outline; table of contents}
  • variable: Variable, used to store the value of the current iteration. During each loop iteration, the value will be automatically assigned to the current element in the iterable object.
  • iterable: Iterable objects, that is, the collection to be traversed. It can be an array, string, Set, Map, etc. that implements the iterator interface.

At each iteration,for...ofThe statement williterableThe next element in thevariable, until all elements are traversed.

The following is usedfor...ofExample of looping through an array:

var colors = ['red', 'green', 'blue'];

for (var color of colors) {
  (color);
}

In the above example,for...ofThe loop will traverse the array in turncolorsEach element in it and assign the current element to the variablecolor. Then, in the circulation body, it is possible tocolorDo it, such as printing its value.

for...ofAdvantages of loop include:

  • Brief: No need to process indexes or use additional counter variables.
  • Automatic iteration: According to the characteristics of the iterated object, it will automatically iterate over elements and assign values ​​to variables.
  • Suitable for iterable objects: can be used to traverse various iterable objects, not limited to arrays.

It should be noted thatfor...ofLoops do not work with plain objects because normal objects are not iterable objects.If you need to traverse the properties of ordinary objects, you can usefor...incycle.

Summarize:for...ofIt is a loop syntax in JavaScript for traversing iterable objects. It provides a concise and intuitive way to iterate over elements in a collection without using indexes. It is suitable for arrays, strings, Sets, Map and other objects that implement iterator interfaces.

What does iterable mean

Iterable object (iterable) refers to an object that implements the iterator protocol, that is, it implements theThe object of the method. The iterator protocol defines a standard way to enable objects to be iterated, that is, they can be used.for...ofLoop traversal.

Some built-in objects, e.g.Array、String、MapandSetAll are iterable objects because they are implementedmethod. At the same time, we can also implement an iterable object ourselves, just define one on the objectmethod,This method returns an iterator object, which must implement anext()method so that the iterator can access all elements of the object in order.

Talk about it for...in

for...inis a loop syntax of JavaScript, used to traverse objectsEnumerable properties(Enumerable===true). It provides a concise way to traverse object properties,Used to traverse normal objects and arrayswait.

The following isfor...inBasic syntax of loops:

for (variable in object) {
  // Code executed in each iteration}
  • variable: variable, used to store the current iterationAttribute name. During each loop iteration, it will be automatically assigned to an enumerable attribute name of the object.
  • object: Object, that is, the object to traverse.

The following is usedfor...inExample of looping through objects:

var person = {
  name: 'Alice',
  age: 30,
  profession: 'Engineer'
};

for (var key in person) {
  (key + ': ' + person[key]);
}

In the above example,for...inLoops will traverse objectspersonEach enumerable attribute in the variable and assign the current attribute name to the variablekey. Then, in the circulation body, it can be passedperson[key]to access the value of this property.

It should be noted thatfor...inThe loop traversal is the enumerable attributes of the object.Includes the object's own attributes and attributes inherited from the prototype chain. If you only need to traverse the object's own properties without including inherited properties, you can usehasOwnProperty()Method to proceedfilter：

var person = new Object({
    name: "Alice",
    age: 30,
    profession: "Engineer",
});

 = 185; // Defined on the prototype chain
for (var key in person) {
    if ((key)) { // If there is no hasOwnProperty judgment here, the height key value will be printed        (key + ": " + person[key]);
    }
}

also,for...inLoops can also be used to traverse the index of an array or dynamic access to object properties.

Summarize:for...inIt is a loop syntax in JavaScript for traversing object enumerable properties. It provides a concise way to traverse objects' properties, which can be used to traverse normal objects and arrays, etc. It should be noted that it will iterate over the object's own properties and the properties inherited from the prototype chain.

Difference between for...of and for...in

  • for...ofcycle:

    • What is traversed isIterable object(iterable), such as arrays, strings, Sets, Map, etc.

    • Iterated is the objectvalueNot the key.

    • The traversal order is based on the objectIteration orderProcedures such as the index order of the array or the character order of the string.

    • It does not support traversing normal objects(plain objects), because normal objects are not iterable objects.

var arr = [1, 2, 3];

for (var value of arr) {
  (value);
}

//Output result:1
2
3

for...inLoop:

  • It's the object'sEnumerable properties。

  • Iterated is the objectkeyNot the value.

  • The traversal order isuncertain, may not traverse in the order of object properties.

  • Enumerable properties that can traverse ordinary objects, you can also traverse non-index properties of objects such as arrays.

var obj = { a: 1, b: 2, c: 3 };

for (var key in obj) {
  (key + ': ' + obj[key]);
}

//Output result:a: 1
b: 2
c: 3

Talk about forEach

forEach()Yes JavaScriptArrayOne of the objectBuilt-in method, used to iterate through each element in the array and execute a callback function on each element. (Operate on the original array without return value)

Under normal circumstances, you should avoidforEach()The element of the original array is modified in the method, because its main purpose isIterate over the array instead of modifying the array. If you need to convert or operate on each element and generate a new array, you can usemap()method.

forEach()The method accepts a callback function as a parameter, which is called on each element of the array. The callback function will receive three parameters: the value of the current element, the index of the current element, and the array being traversed.

The following isforEach()Basic syntax of the method:

(callback(currentValue, index, array), thisArg)
  • callback: A callback function that operates on each element of an array. It can accept three parameters:
    • currentValue: The value of the element currently traversed.
    • index: The index of the element currently traversed.
    • array(Optional): Original array.
  • thisArg(Optional):thisvalue.

Here is an example showing how to use itforEach()Methods print each element in the array:

var numbers = [1, 2, 3, 4, 5];

(function(element, index) {
  (`The current element is ${element}，The index is ${index}`);
});
// Although the callback function defines three parameters in the code, only the first two parameters are used.  The third parameter arr is optional, and it can be optionally ignored in the implementation of the callback function.

In the above example, the callback function will be in the arraynumbersis called on each element. It prints out the value and index of the current element. The loop will sequentially traverse each element in the array and execute a callback function on each element.

forEach()When a method traverses the array, the undefined spaces in the sparse array will be automatically skipped. It executes the callback function in order of array elements until it is traversed with all elements.

It should be noted thatforEach()methodNo return value, it just executes a callback function on each element. If you need to generate a new array, you can usemap()method.

Summarize:forEach()Methods are used to iterate through each element in the array and execute a callback function on each element. It does not return a value, it just operates on the original array element. Through the callback function, you can access the value and index of the current element, as well as the original array.

Talk about map()

In JavaScript,map()yesArrayOne of the objectBuilt-in method, used to operate on each element in the array and return a new array. It will iterate over each element in the original array, apply a callback function to each element, andMake a new array of return values ​​of the callback function. (The original array content will not be modified)

map()The method accepts a callback function as a parameter, which is called on each element of the array and returns the corresponding element in the new array.

The following ismap()Basic syntax of the method:

(callback(element, index, array), thisArg)
  • callback: A callback function that operates on each element of an array. It can accept three parameters:
    • element: The element currently traversed.
    • index: The index of the element currently traversed.
    • array: Original array.
  • thisArg(Optional):thisvalue.

Here is an example showing how to use itmap()The method multiplies each element in the array by 2 and generates a new array:

var numbers = [1, 2, 3, 4, 5];

var doubledNumbers = (function(element) {
  return element * 2;
});

(doubledNumbers);  // Output: [2, 4, 6, 8, 10]

In the above example, the callback function multiplies each element by 2 and takes the result as the corresponding element in the new array. therefore,doubledNumbersThe array contains the result of multiplying each element in the original array by 2.

It should be noted thatmap()The method does not modify the original array, but returns a new array. Therefore, it is a pure function that has no side effects.

Also, if the element in the array is an object,map()Methods only operate on references to objects.No deep copying. So in the array of objectsmap()During operation, it is necessaryPay attention to the processing of references and copies of the original object。

Summarize:map()Methods are built-in methods of arrays that operate on each element in an array and return a new array. It generates a new array by applying a callback function to convert each element.

What is the difference between map() and foreach

  • map()
    • Returns a new array processed by a callback function
    • No effect on the original array
    • Purpose: Process array data
  • forEach
    • No return value will not be generated
    • May have an impact on the original array
    • Purpose: traverse the array

Tell me about every()

()method, it can be used to check theAll elementsWhether specific conditions are met.

every()The method accepts a callback function as a parameter, which will be called on each element of the array and determines whether to continue traversing the array based on the return value. If the callback function returns for each elementtrue,butevery()Method returntrue. If the callback function returns for any elementfalse,butevery()Method returns immediatelyfalse，No more traversal of the remaining elements。

The following isevery()Basic syntax of the method:

(callback(element, index, array), thisArg)
  • callback: Callback function, used to operate on each element of an array. It can accept three parameters:
    • element: The element currently traversed.
    • index: The index of the element currently traversed.
    • array: Original array.
  • thisArg(Optional):thisvalue.

Here is an example showing how to use itevery()Method checks whether all elements in the array are even:

var numbers = [2, 4, 6, 8, 10];

var allEven = (function(element) {
  return element % 2 === 0;
});

(allEven);  // Output: true

In the above example, the callback function checks whether each element is an even number. Since all elements in the array are even numbers,every()Method returntrue。

It should be noted that if the array is empty,every()The method will always returntrue, because no element does not satisfy the condition. also,every()The method will immediately stop traversing the remaining elements as long as it finds an element that does not meet the conditions.

Let's talk about reduce()

reduce()It is one of the array methods, which is used to perform cumulative calculations on the elements of an array. It accepts a callback function as an argument and can pass an initial value. This callback function will be applied to each element of the array, iterated from left to right, using the return value of the previous callback function as the input of the next callback function, and finally obtaining a cumulative result.

reduce()The syntax of the method is as follows:

(callback, initialValue)
  • callbackis a callback function that can accept four parameters:
    • accumulator: Accumulator, used to save the intermediate results of the calculation.
    • currentValue: The value of the current element.
    • currentIndex: The index of the current element (optional).
    • array: The iterated array (optional). The callback function should return a new accumulated value, which will be used as the next iterationaccumulatorvalue.
  • initialValueis optional and is used to specify the accumulated initial value.If no initial value is provided, the first element of the array will be used as the initial value and iterated from the second element.

reduce()Example of usage of the method:

const array = [1, 2, 3, 4, 5];

const sum = ((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);
// The actual parameter 0 passed here is the optional parameter initialValue, which is used to specify the accumulated initial value// If no initial value is provided, the first element of the array will be used as the initial value and iterated from the second element.// So it's OK not to write, the result is the same
(sum); // Output 15

In the above example,reduce()Methods to arraysarrayThe elements in the sequentials are summed and the initial value is set to0. The callback function accepts two parameters.accumulatorFor the accumulator,currentValueis the value of the current element. On each iteration, the callback function adds the value of the current element to the accumulator and returns the new accumulated value. The final result is the sum of the array elements, i.e.15。

Talk about set

In JavaScript,Set It is a collection data structure, used forStore unique values, i.e. each element in the set is unique and will not be repeated. It isES6(ECMAScript 2015) introduces a data structure that provides a set of methods for managing elements in a collection.

The following isSetBasic features and usage:

  • Store unique values:SetThe elements in it are unique and will not be repeated. If you try to add duplicate values ​​to the collection, they will be ignored.
  • Values ​​of any type:SetValues ​​of any type can be stored, including primitive types (such as numbers, strings, boolean values), objects, functions, etc.
  • Iterator:SetIterable and can be usedfor...ofloop orforEach()Methods traverse elements in the collection.
  • Add and delete elements:
    • Add elements: Useadd(value)Method adds new elements to the collection.
    • Delete elements: Usedelete(value)Method removes the specified element from the collection.
    • Clear the collection: Useclear()Method clears all elements in the collection.
  • Determine whether the element exists:
    • usehas(value)Methods can check whether the specified element exists in the collection. The return value is of Boolean type.

Here is a useSetExample:

var set = new Set();

(1);      // Add elements(2);
(3);
(2);      // Repeated elements will be ignored
();  // Output: 3
(2);   // Delete elements
();  // Output: 2((3)); // Output: true
(function(value) {
  (value);  // Output in sequence: 1, 3});

It should be noted thatSetThe values ​​in are based on strict equality (===) is used to compare, so for values ​​of reference types such as objects, it is necessary to refer to the same object.

Summarize:Setis a collection data structure used to store unique values. It provides ways to add, delete, and determine whether an element exists, as well as iterate over elements in a collection.SetVery useful when you need to store unique values ​​without caring about order, can help us process collection data.

Will set in js sort elements by size

In JavaScriptSetIn this case, the order of elements is determined according to the insertion order, rather than sorted by size. When youSetWhen adding elements, they are arranged in the order they are added.

SetThe iteration order is the same as the insertion order of elements. This means when you usefor...ofloop orforEach()Method iterationSetWhen the elements are added, the order of the elements will be consistent with the order in which they are added.

Here is an example:

var set = new Set();

(3);
(1);
(2);

(function(value) {
  (value);
});

The order of output will be3, 1, 2，Consistent with the order in which elements are added.

If you need to sort the elements in a certain order, you canSetConvert to an array, and then sort the elements using the sort method of the array. For example:

var set = new Set();

(3);
(1);
(2);

var sortedArray = (set).sort();

(sortedArray);  // Output: [1, 2, 3]

In the above example, first use()Method willSetConvert to an array and then use the array'ssort()Method sorts elements. This way, you can get an array sorted by element size.

Summarize:SetIt is not sorted by the size of the element, but by the insertion order. If you need to sort the elements, you canSetConvert to an array and then use the sorting method of the array.

#include <iostream>
#include <set>
using namespace std;

int main(){
	set<int> s;
	(3);
	(1);
	(2);
	for(set<int>::iterator i=();i!=();i++){
		cout<<*i<<" "; // Results: 1 2 3	}
	// Summary: The set container of c++ will sort the size of the inserted element values	// JS sorts in the order of insertion	return 0;
}

The above is a detailed article explaining all the usages of for loops in JS. For more information about the usage of for loops in JS, please pay attention to my other related articles!