This article describes the usage of for loops, Map and Set in ES6 tutorials. Share it for your reference, as follows:
Now let’s think about it first. If you were asked to iterate through elements of an array, how would you choose to do it? Usually I think of for loops:
for (var index = 0; index < ; index++) {
(myArray[index]);
}
Unfortunately, I have to tell you that this method is a method that talents for twenty years should use. A simpler forEach method has been proposed in ES5, and the code is as follows:
(function (value) {
(value);
});
Although the forEach method is a bit short, it also has its disadvantages, that is, it cannot break to exit the loop in the middle, nor can it exit the loop through return.
So isn't there a for-in method:
for (var index in myArray) {
(myArray[index]);
}
However, the for-in method is actually prepared for key-value pairs that store keys, not for arrays. Its subscript is the strings "1", "2"... I believe everyone knows what will happen to "1" + "2"?
for-of loop
In order not to affect the previous code and to satisfy the habits that many people have developed, ES6 can only introduce a new loop syntax for-of:
for (var value of myArray) {
(value);
}
Compare for-in and for-of:
var a = ["a","b","c","d","e"];
for (var idx in a) {
( idx );
}// 0 1 2 3 4
for (var val of a) {
( val );
}// "a" "b" "c" "d" "e"
for-of can not only be used in arrays, but also on dom objects, and also on Map and Set objects。
The following is a description of Map and Set objects
Map,Set
The default object representation of JavaScript is {}, but there is a small problem with JavaScript objects, that is, the key must be a string. But in fact, Number or other data types are also very reasonable as keys.
To solve this problem, the latest ES6 specification introduces a new data type Map.
Map is a key-value pair structure with extremely fast search speed.
Let's take a look at the use of Map:
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
('Michael'); // 95
var m = new Map(); // Empty Map('Adam', 67); // Add a new key-value('Bob', 59);
('Adam'); // Is there a key 'Adam': true('Adam'); // 67
('Adam'); // Delete key 'Adam'('Adam'); // undefined
The has method above is faster than indexOf.
Set is similar to Map, and there are also lists of keys, except that the elements in the Set cannot be repeated.
var s1 = new Set(); // Empty Setvar s2 = new Set([1, 2, 3]); // Includes 1, 2, 3var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}
As you can see, the duplicate data added again will be filtered out.
So what are the application scenarios of these two objects?
Map can be used to store key-value pairs, such as name and age, while Set can be used to store targets that cannot be repeated, such as student number lists.
for-of for use with objects
OK, after introducing two types of new objects, let's see how for-of works on the Set object:
var uniqueWords = new Set(words);
for (var word of uniqueWords) {
(word);
}
It is different to traverse Map objects, because Map is stored in key-value pairs, so we need to traverse two separate variables:
for (var [key, value] of phoneBookMap) {
(key + "'s phone number is: " + value);
}
But one thing to note. for-of is not used to traverse the properties of ordinary objects. If we have to do this, we can use for-in or the following method:
for (var key of (someObject)) {
(key + ": " + someObject[key]);
}
I hope this article will be helpful to everyone's ECMAScript programming.