This is the seventh day of my participation in the August More text Challenge. For details, see:August is more challenging

preface

In this article, we will read the contents of JS array in detail. This article is about “array traversal (1)”, and the previous article is about portal

background

In development, we often need to get and manipulate each element in an array to get the desired result back. So that’s going to require us to do a walk through the array.

Methods of traversing a group of numbers include: for, for… In, for… Of, some(), every(), filter(), forEach(), map(), reduce(), etc.

Arrays/Boolean/no =. / filter/forEach/map/some (function(item, index, arr){... })Copy the code

The for loop

Raw for loop
const arr = ['a'.'b'.'c'];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]); // This is needless to say
}
​
Copy the code
for… in

The values traversed are the keys of the data structure

let obj = {a: '1'.b: '2'.c: '3'.d: '4'}
for (let o in obj) {
    console.log(o)    // The attribute names of the object a,b,c,d are actually traversed
    console.log(obj[o])  // this is the attribute value 1,2,3,4
}
Copy the code

Note: for… In can traverse groups but is not recommended. for… In was originally created for traversing objects.

for… of

It is a new syntax added in ES6 to loop through a pair of key-value pairs

Through the array

let arr = ['China'.'America'.'Korea']
for (let o of arr) {
    console.log(o) //China, America, Korea
}
Copy the code

Note: objects cannot be traversed. A data structure has an iterator interface that can use a for of loop only if the Symbol. Iterator property is deployed. The object has no Symbol. Iterator property. Which data structures deploy the Symbol. Iteratoer attribute? The following

  • An Array of Array
  • Map
  • Set
  • String
  • The arguments object
  • The Nodelist object is the collection of DOM lists that you get

The sample

let iterable = new Map([["a".1], ["b".2], ["c".3]]);
for (let [key, value] of iterable) {
  console.log(value);
}
for (let item of iterable) {
  console.log(item);
}
// [a, 1]
// [b, 2]
// [c, 3]
/ / string
  var str = "hello";
  for (let s of str) {
    console.log(s); // h e l l o
  }  
// The DOM NodeList object
  let paras = document.querySelectorAll("p");
  for (let p of paras) {
   p.classList.add("test");
  }  
/ / the arguments object
  function printArgs() {
    for (let x of arguments) {
      console.log(x);
    }
  }
printArgs('a'.'b');// 'a' 'b'
Copy the code

summary

So that’s the end of the for loop, but the main thing to notice is for… In and for… The difference in the use of of.

The for… in
  • The key name of the array is a number, but for… In loops are strings with key names “0”, “1”, “2”, and so on.
  • The for… The in loop iterates not only over numeric key names, but also over other keys added manually, even keys on the prototype chain.
  • In some cases, for… The in loop iterates over the key names in any order.
  • The for… In loops are designed primarily to iterate over objects, not groups of numbers.
The for… of
  • Has the same for… The same concise syntax as in, but without for… In those shortcomings.
  • Unlike the forEach method, it can be used with break, continue, and return.
  • Provides a unified operation interface for traversing all data structures