Reference resources: https://segmentfault.com/a/11...

Arrays are the most common way to iterate through data

In some cases, you want to return all the individual values in the array so that you can print them on the screen, manipulate them, or perform certain operations on them.

What to do?The simple method is to use the for, while, for-of method.

const myFavouriteAuthors = [
         'Neal Stephenson',
         'Arthur Clarke',
         'Isaac Asimov', 
         'Robert Heinlein'
       ]
       for(let i =0;i<myFavouriteAuthors.length; i++){
         console.log(myFavouriteAuthors[i])
       }
        let  index = 0;
        while(index<myFavouriteAuthors.length){
          console.log(myFavouriteAuthors[index])
          index++
        }
        for(let value of myFavouriteAuthors){
          console.log(value)
        }
        
        
        
       
       created(){
     this.func()
    
    },
    methods:{
      func(){
        const myFavouriteAuthors = {
          allAuthors:{
            function: [
         'Neal Stephenson',
         'Arthur Clarke',
         'Isaac Asimov', 
         'Robert Heinlein'
          ],
          scienceFiction:[
         'Neal Stephenson',
         'Arthur Clarke',
         'Isaac Asimov', 
         'Robert Heinlein'
       ],
       fantasy:[
         'Neal Stephenson',
         'Arthur Clarke',
         'Isaac Asimov', 
         'Robert Heinlein'
       ]
          },
          getAllAuthors(){
            const othors = []
            for(const othor of this.allAuthors.function){
              othors.push(othor)
            }
            for(const othor of this.allAuthors.scienceFiction){
              othors.push(othor)
            }
            for(const othor of this.allAuthors.fantasy){
              othors.push(othor)
            }
            return othors
          }
          
        }
        console.log(myFavouriteAuthors.getAllAuthors())
      }
    }
        

Iterable

Iterability is a data structure that wants its elements to be accessible externally by implementing a method where the keyword is Symbol.iterator, which is the factory of the iterator, that is, it creates the iterator.
An iterator is a pointer that traverses elements of a data structure. We will use computed property syntax to set this key, as follows:

created(){
     this.func()
    
    },
    methods:{
      func(){
         const iterable = {
           [Symbol.iterator](){ //We create iterators.It is an object that defines the next method.
             let step = 0
             const iterator = {
               next(){ // The next method returns a value based on the step variable.
                 step++;
                 if(step==1){
                   return {value:'This',done: false};
                 }else if(step ==2){
                   return { value:'is',done: false}
                 }else if(step ==3){
                   return {value:'iteable',done: false}
                 }
                 return { value: Undefined,done: true}
               }
             }
             return iterator
           }
         }
         var iterator = iterable[Symbol.iterator]()
         console.log(iterator.next())
         console.log(iterator.next())
         console.log(iterator.next())
         console.log(iterator.next())
        //  {value: "This", done: false}
        //  {value: "is", done: false}
        //  {value: "iteable", done: false}
        //  {value: Undefined, done: true}
        //We retrieve the iterator and call the next method until done has a value of true.
      }
    }
  }

This is exactly what happens in the for-of loop, where for-of accepts an iterator and creates its iterator, which will call next() until done is true.

Array Deconstruction - Destruction occurs due to iteration.

const array = ['a','b','c','d','e']
         const [first,third,last] = array
         console.log(first)//a
         
         
         //Equivalent to:

         const array = ['a','b','c','d','e']
         const iterator = array[Symbol.iterator]()
         const first = iterator.next().value
         console.log(first)//a
         const third = iterator.next().value
         console.log(third)//b
         const last = iterator.next().value
         console.log(last)//c
         

Extension Operator (...)

const array = ['a','b','c','d','e']
         const newArray = [1,...array,2,3]
         console.log(newArray)//[1, "a", "b", "c", "d", "e", 2, 3]
         
    
    //Equivalent to
       const array = ['a','b','c','d','e']
         const iterator = array[Symbol.iterator]()
         const newArray = [1]
         
         for(let nextValue = iterator.next();nextValue.done !== true;nextValue = iterator.next()){
           newArray.push(nextValue.value)
         }
         newArray.push(2)
         newArray.push(3)
         console.log(newArray) //[1, "a", "b", "c", "d", "e", 2, 3] 

Many objects in JS are iterative.They may not be well perceived, but if you examine them carefully, you will find the characteristics of the iteration:

Arrays and TypedArrays
Strings - Traverse through each character or Unicode code code point
Maps - Traverse its key-value pairs
Sets - Traverse Elements
arguments- Special variables in functions that resemble arrays
DOM elements (Work in Progress)
Other structures that use iteration in JS are:

The for-of -- for-of loop requires an iterative object, otherwise it throws a type error.
So we can use iterator s to process objects that cannot be iterated over

mounted() {
    const myFavouriteAuthors = {
     allAuthors: {
     fiction: [
      'Agatha Christie', 
      'J. K. Rowling',
      'Dr. Seuss'
    ],
    scienceFiction: [
      'Neal Stephenson',
      'Arthur Clarke',
      'Isaac Asimov', 
      'Robert Heinlein'
    ],
    fantasy: [
      'J. R. R. Tolkien',
      'J. K. Rowling',
      'Terry Pratchett'
    ],
  },
  [Symbol.iterator]() {
    // Get all authors in the array
    const genres = Object.values(this.allAuthors);
    //The Object.values() method returns an array of all enumerable attribute values for a given object itself.
    // Store current type and index
    let currentAuthorIndex = 0;
    let currentGenreIndex = 0;
    
    return {
      // Implementation of next()
      next() {
        // Get corresponding author information based on the current index
        const authors = genres[currentGenreIndex];
        
        // When the array authors are traversed, doNotHaveMoreAuthors is true
        const doNothaveMoreAuthors = !(currentAuthorIndex < authors.length);
        console.log(currentAuthorIndex, authors.length, doNothaveMoreAuthors);
        if (doNothaveMoreAuthors) {
         // Add one to continue visiting the next
          currentGenreIndex++;
          // Reset
          currentAuthorIndex = 0;
        }
        
        // If all genres are done, we need to tell the iterator that no more value can be provided.
        const doNotHaveMoreGenres = !(currentGenreIndex < genres.length);
        if (doNotHaveMoreGenres) {
          return {
            value: Undefined,
            done: true
          };
        }
        
        // If everything works, return the author and current author index from when genre so that next time the next author can return.
        return {
          value: genres[currentGenreIndex][currentAuthorIndex++],
          done: false
        }
      }
    };
  }
};

for (const author of myFavouriteAuthors) {
  console.log(author);
}

console.log(...myFavouriteAuthors)


  }