I. method of traversing array

1. for loop

// The simplest one is also the one with the highest frequency of use. Although the performance is not weak, there is still room for optimization
for(j = 0; j < arr.length; j++) {
   
} 

// Use temporary variables to cache the length and avoid repeatedly obtaining the array length. When the array is large, the optimization effect will be more obvious
for(j = 0,len=arr.length; j < len; j++) {
   
}

// In fact, this method is strictly a for loop, but does not use the length judgment, and uses the variable itself to judge
for(j = 0; arr[j]!=null; j++) {
   
}

2. for...in

var obj = {
    name: 'test',
    color: 'red',
    day: 'sunday',
    number: 5
}
for (var key in obj) {
    console.log(obj[key])
}

3. for...of

var arr = [{name:'bb'},5,'test']
for (item of arr) {
    console.log(item)
}

4. while [statement executes the loop as long as the specified condition is true]

while (true) {
        
    }

5. do/while [loop is executed at least once, even if the condition is false, because the code block is executed before the condition statement is judged]

var text = ""
var i = 0;
do {
    text += "<br>The number is " + i;
    i++;
}
while (i < 5) { 
    document.getElementById("demo").innerHTML = text;
}

 

2. Loop method of array

1. map() method [returns a new array, does not change the original array, and does not detect an empty array]

Example: get data from interface res:

(1)
let r = res.map(item => {
    return {
        title: item.name,
        sex: item.sex === 1? 'male':item.sex === 0?'female':'secrecy',
        age: item.age,
        avatar: item.img
    }
})

(2)

const users=res.items.map(item => ({
    url: item.html_url,      
    img: item.avatar_url,      
    name: item.login,
    })
);

Reference address

2. filter() method [create a new array, and the elements in the new array are all qualified elements in the specified array by checking]

Example:

const newArr = arr.filter(v => {
  return v.xx === xx;          
});
console.log(newArr);

3. find() method [returns the value of the first element of the array passed the test (judged within the function]

findIndex() method [returns the position of the first element of the array passed in a test condition (function) that meets the condition]

Example:

var stu =[
    {
        "name": "Zhang San",
        "gender": "male",
        "age": 20
    },
    {
        "name": "Wang Xiao Mao",
        "gender": "male",
        "age": 20
    },
    {
        "name": "Li Si",
        "gender": "male",
        "age": 20
    }
]
stu.find((element) => (element.name == 'Li Si'))  // It returns {name: "Li Si", gender: "male", age: 20}
stu.findIndex((element)=>(element.name =='Li Si'))  // Index subscript returned: 2

Reference address      The summary of s6 array methods find(), findIndex(), and filter()

4. foreach() method [used to call each element of the array and pass the element to the callback function]

Example:

people.forEach(function (dude) {
  dude.pickUpSoap();
});

5. reduce() method [let the preceding and subsequent items in the array do some calculation and accumulate the final value]

Example:

var result = arr.reduce(function(prev, next){
    return prev + next;
})

result => 15

6. every() method [check whether each item in the array meets the conditions]

Example:

var result = arr.every(function(item,index){
   return item>0;
})

result => true (It's all satisfied true)

7. some() method [check whether some items in the array meet the conditions]

Example:

var result = arr.every(function(item,index){
   return item>1;
})

result => true (As long as one is satisfied true)

Reference address

 

III. cycle / traverse efficiency comparison

for ~= do while < forEach ~= map ~= every < $.each < $(e).each < for in   

Reference resources

for > for-of > forEach > filter > map > for-in

Reference resources

How to improve for loop in program gracefully by comparing JavaScript array traversal methods

 

4. Generate a new array (array elements are objects)

   var datas = [
		{ "id":1 , "Name":"Gates","age":34 },
		{ "id":2 , "Name":"Bush","age":22 },
		{ "id":3 , "Name": "Carter","age":44 }
	];
	var newArr = [];
	function addArr() {
		for (var i = 0; i <datas.length; i++) {
		  var vote = {};
          vote.id = datas[i].id;
          vote.Name = datas[i].Name;
          newArr.push(vote);
		}
		console.log(datas);
		console.log(newArr);
	}

Reference address