Several common loop traversal usage and differences in JavaScript

Preface

In JavaScript language, we often need to use loop syntax to get some values in the data. For example, we need to output the items in the list one by one, or run the same code to output the numbers 1 to 10 one by one. There are many methods, this article will explain the use and differences of common loop traversals.

1. "for" loop: It is the most commonly used form of loop

Explain the above code

begin	let i = 0	Execute once when entering the loop.
condition	`i <= 3`	Check before each loop iteration, if false, stop the loop.
body (circulation body)	`alert(i)`	When the condition is true, run repeatedly.
step	`i++`	Execute after each loop body iteration.

2. "for..in" loop: in order to traverse all keys (keys) of an object

for (key in object) {
  // Code executed for each key in this object property}

// Case: Get the key in the objectlet user = {
  name: "Qianfeng Education",
  age: 11,
  isAdmin: true
};
for (let key in user) {
  // keys
  alert( key );  // name, age, isAdmin
  // Value of attribute key  alert( user[key] ); // Qianfeng Education, 11, true}

..of: Cannot get the index of the current element, just get the element value

let arr = ["Qianfeng Education", "HTML5 discipline", "The front-end leader"];
for (let key of arr) {
  alert( arr[key] ); // Qianfeng Education, HTML5 discipline, front-end leader}

For the above common three cycles:

for loop:Common basic loops can be broken in advance

for..in loop:Used to traverse object properties, get keys (strings) in the object, do not perform mathematical operations directly, and can break in advance

for..of loop:Used to traverse arrays and iterable objects, get the values in array objects, and break them in advance

: Allows to run a function for each element of the array

(function(item, index, array) {
  // ... Execute code});

// Case:let arr = [1, 2, 3, 4, 5];
(function (item) {
     (item) // 1,2,3,4,5
});// undefined
// No return value，Essentially equivalent to for cycle，Perform each item function function，Will not change the original array

and Set (map and set)

MapIt is a key-value pair structure，Extremely fast search speed
let arr = ['HTML5', 'Java', 'python'];
let age = [100, 80, 90];
let res = new Map([['HTML5', 100], ['Java', 80], ['python', 90]]);
('HTML5'); // 100

// Common methods of Maplet res = new Map(); // Empty Map('Brother Yong', 18); // Add a new key value('Brother Yong'); // Is there a key('Brother Yong'); // 18
('Brother Yong'); // Delete key('Brother Xiang'); // undefined

// Set is similar to Map, and is also a collection of keys, but does not store value.  Since the key cannot be repeated, there is no duplicate key in Setlet set = new Set(["Qianfeng Education", "HTML5", "11"]);
for (let value of set) alert(value);

// Same as forEach:((value, valueAgain, set) =&gt; {
  alert(value);
});

Summary of Map and Set:

Map is a collection of data items with keys, any key or object can be used as keys.

Set is a set of unique values. It cannot reorder elements, nor can it be obtained directly by its number.

above:As a relatively high-frequency interview question, students can practice memory!

This is the end of this article about the use and differences of several common loop traversals in JavaScript. For more related JS loop traversal content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!