As a rookie programmer, when writing JS code, you will often encounter situations in which you need to iterate over groups of numbers: the elements of the array are objects, and the objects have many attributes, like the following small example:

    books: [
        {
            id: 1.name: 'Introduction to Algorithms'.date: '2006-9'.price: 85.00.count: 1
        },
        {
            id: 2.name: 'UNIX Programming Art'.date: '2006-2'.price: 59.00.count: 2
        },
        {
            id: 3.name: 'Programming Abas'.date: 'the 2008-10'.price: 39.00.count: 3
        },
        {
            id: 4.name: 'Complete Code'.date: '2006-3'.price: 128.00.count: 1},].Copy the code

The books array above holds the data for purchasing books, including the title of each book, the price, etc. Count is the number of books purchased

Now you need to iterate through the array and figure out the total amount of books purchased

If you’re like me, the first thing that comes to mind is a for loop, like this

Note the “this” in the code below because this js code is written in an instance of Vue. If you don’t understand Vue, you can think of this.books as a whole for now

      let total = 0
      for (let i = 0; i < this.books.length; i++) {
        total += this.books[i].count * this.books[i].price
      } 
      return total
Copy the code

Of course it’s correct to write it like this, but wouldn’t it bother you?

What? You don’t think it’s a bother? I’m sure you’re just as used to the for loop as I am. Then you might as well look at the following for in traversal method is not more concise!

      let total = 0
      for (i in this.books) {
        total += this.books[i].count * this.books[i].price
      } 
      return total
Copy the code

Note that for in iterates through the index of the array, which is I in for (I in this.books). In the body of the loop, we can use index I directly to perform operations on the array

Now let’s look at another way to write for of, which is even more concise

      let total = 0
      for (n of this.books) {
        total += n.count * n.price
      } 
      return total
Copy the code

Different from for in, for of traverses the elements of the array, namely n in for (n of this.books), which represents each element of the books array in this case, that is, the object containing the book information, so you can use n.Price to obtain the book price information, etc.

For in and for of, in addition to the most basic usage mentioned above, there are some drawbacks to using for in that need to be warned here.

About the for the in

  1. The index value traversed is a string number and cannot be used for geometric operations
  2. The traversal order may not be the actual order of the internal elements
  3. For in iterates through all the enumerable properties of a group (enumerable properties are those that are internalEnumerable flagSet totrue, including archetypes. For example, the prototype method method and name attributes

So “for in” is good for traversing objects, and “for of” is good for traversing groups of numbers

This article is only personal learning comprehension and notes, the level is limited, if there are mistakes, but also hope to correct in time!