Six Loop Methods in JavaScript

  • 2021-10-16 00:58:09
  • OfStack

Traversal Loop in Javascript

1. for cycle

For numerically indexed arrays, you can use the standard for loop to traverse the values


const arr=[1,2,3,4];
for(let i=0;i<arr.length;i++){
  console.log(i);
}

2. for... in loop

for... in loops can be used to traverse the list of enumerable properties of objects (including properties on the prototype chain)


const myObject={};

Object.defineProperty(myobject,"a",{
  // Enumerable 
	enumerable:true,
  value:2,
})
Object.defineProperty(myobject,"b",{
  // Innumerable 
	enumerable:false,
  value:2,
})

for(let k in myObject){
  console.log(k,myObject[k])
	// a 2
}
// Use for...in Loop can't get property values directly, because it actually traverses all enumerable properties in the object, 
// So you need to get the attribute value manually .

Applying the for... in loop to an array contains not only all numeric indexes, but also all enumerable properties.

Therefore, it is best to apply the for... in loop on the object. If you want to traverse the array, it is best to use the traditional for loop.

3. for... of loop

1. ES6 New for... of Loop


const arr=[1,2,3];
for(let value of arr){
  console.log(value)
  //1
  //2
  //3
}

for... The of loop first requests an iterator object from all accessed objects and then iterates through all the return values by calling the next () method of the iterator object

There is a built-in @ @ iterator in the array, so for... of can be applied directly to the array.

Traversing an array using the built-in @ @ iterator


const arr=[1,2,3];
// Object in the array iterator Object : Use ES6 Symbols in Symbol.iterator To get the object's @@iteraotr Internal attribute .
//@@iterator Not in itself 1 Iterators, but 1 A function that returns an iterator object. 
const it=arr[Symbol.iterator]();

it.next(); //{value:1,done:false}
it.next(); //{value:2,done:false}
it.next(); //{value:3,done:false}
it.next(); //{done:true}

// Object that calls the iterator next() Method returns the form {value:..,done:..} The value of; 
//value Is the current value, done Yes 1 Boolean values indicating whether there are still values that can be traversed 

2. Define @ @ iterator for an object


const myObject={
  a:2,
  b:3
}
Object.defineProperty(myObject,Symbol.iterator,{
	enumerable:false,
  writeable:false,
  configurable:true,
  value:function(){
    let o=this;
    let idx=0;
    // Attribute array in object 
    let ks=Object.keys(o);
    return{
      value:o[ks[idx++]],
      done:(idx>ks.length);
    }
  }
})

const it=myObject[Symbol.iterator]();
it.next(); //{value:2,done:false}
it.next(); //{value:3,done:false}
it.next(); //{done:true}


for(let value of myObject){
	console.log(value);
}
// 2
// 3

4.foreach(...)

**forEach()** Method executes the given function once on each element of the array.


const arr = ['a', 'b', 'c'];
arr.forEach(element => console.log(element));
// a
// b
// c


arr.forEach(callback(currentValue [,index [,array]])[,thisArg])

5.some(...)

some () runs the given function for every 1 item in the array, and returns true if the function returns true for any 1 item.


var arr = [ 1, 2, 3, 4, 5, 6 ]; 
 
console.log( arr.some( function( item, index, array ){ 
  console.log( 'item=' + item + ',index='+index+',array='+array ); 
  return item > 3; 
})); 
// item=1,index=0,array=1,2,3,4,5,6
// item=2,index=1,array=1,2,3,4,5,6
// item=3,index=2,array=1,2,3,4,5,6
// item=4,index=3,array=1,2,3,4,5,6
// true

6.every(...)

every () runs the given function for every 1 item in the array, and returns true if the function returns true for every 1 item.


var arr = [ 1, 2, 3, 4, 5, 6 ]; 

console.log( arr.every( function( item, index, array ){ 
  console.log( 'item=' + item + ',index='+index+',array='+array ); 
  return item > 3; 
}));
// item=1,index=0,array=1,2,3,4,5,6
// false

The above is the JavaScript 6 loop method details, more information about JavaScript loop please pay attention to other related articles on this site!


Related articles: