Js array traversal

Js array traversal

1. The Map () method

A Map is a mapping function. A Map is a mapping function. A radish a pit, a corresponding relationship;

Grammar:

const arr=Array(a);arr.map((item,index,arr) = >{
       / / the function body
    return   ;
});
// Parameter 1: each item in the array (mandatory) // Parameter 2: index (optional) // Parameter 3: The array itself being traversed (optional) // Note that map() cannot operate on an empty array Copy the code

case

const arr=[1.2.3.4];
const arr2=arr.map((item) = >{
    item+1;
});
console.log(arr2);
Copy the code

2. ForEach () method

Grammar:

const arr = [11.22.33.44.55.66.77.88];
arr.forEach((item,index,arr) = >{
     
});
// Parameter 1: each item in the array (mandatory)
// Parameter 2: index (optional) // Parameter 3: The array itself being traversed (optional) Copy the code

Example: Iterate over a number of objects

const arr = [
      {id:1.title:'Heading 1 heading 1 Heading 1'},
      {id:2.title:'Heading 2 Heading 2 Heading 2'},
      {id:3.title:'Heading 3 heading 3 heading 3'}
    ];
arr.forEach((item) = >{  console.log(item.id+ The '-' +item.title) }) Copy the code

Example: Iterating through an ordinary array

const arr = [11.22.33.44.55.66.77.88];
arr.forEach((item,index) = >{
      console.log(`${item}-----${index+1}`);
})
Copy the code

ForEach () and map() :

1. ForEach () : used to iterate over each item in an array. This method returns no value and does not affect the array

2, map() : clone a copy of the original array, to operate on the cloned data, need to return, return a new array, does not affect the original array

3.for… In method

for… In traverses both groups of numbers and objects

Case study:

// go through the number group
const arr = [1111.2222.3333];
for (let i in arr) {
  console.log(` index:${i}-- -- -- -- -- -- -- value:${arr[i]}`);
}
console.log("-------- beautiful dividing line -------"); // Iterate over the object let obj = {  userName: 'symbol.. age: 18. sex:"Male" }; for (let i in obj) {  console.log(`key:${i} ----- value: ${obj[i]}`) } Copy the code

for… When the array is iterated, the variable I refers to the index of the array

for… In when traversing an object, the variable I refers to the key of the object

4. The for… Method of

for… Of iterates over an array of values.

const arr = [1111.2222.3333];
for (let i of arr) {
  console.log(i);
}
Copy the code

for… In and for.. The difference between:

1, the for… In can iterate over both arrays and objects. In iterate over arrays, I represents the index of the array, and in iterate over objects, the key of the object

2, for… Of can only iterate over arrays, not objects, and when you iterate over arrays, I represents the value of an array

5. For loop (the most common loop)

const arr = [1111.2222.3333];
for(let i=0; i<arr.length; i++){   console.log(arr[i]);
}
// The optimization uses temporary variables to cache the length of the array, so as not to get the array length repeatedly. The optimization effect is more obvious when the array is large
var arr = [1111.2222.3333]; var len = arr.length; for(var i = 0; i < len; i++) {  console.log(arr[i]); } Copy the code

6. Filter The filter function

Iterates through the array, filtering out the elements that match the criteria and returning a new array

const arr = [
  { id: 1.name: 'computer'.active: true },
  { id: 2.name: 'mobile phone'.active: true },
  { id: 3.name: 'Digital Camera'.active: false },
  { id: 4.name: 'usb'.active: true },
 { id: 5.name: 'Mechanical keyboard'.active: false } ]; const newArr = arr.filter((item, index,arr) = >{  return item.active; }); console.log(newArr); // Parameter 1: each item in the array (mandatory) // Parameter 2: index (optional) // Parameter 3: The array itself being traversed (optional) Copy the code

7. Some () method

****** iterates the array, returning true and terminating as long as there is one element in the array that meets the condition, false otherwise;

const arr = [
  { id: 1.name: 'computer'.active: false },
  { id: 2.name: 'mobile phone'.active: true },
  { id: 3.name: 'Digital Camera'.active: false },
  { id: 4.name: 'usb'.active: true },
 { id: 5.name: 'Mechanical keyboard'.active: false } ]; const res = arr.some((item, index,arr) = >{  return item.active; }); console.log(res); // Parameter 1: each item in the array (mandatory) // Parameter 2: index (optional) // Parameter 3: The array itself being traversed (optional) Copy the code

8. Every () method

****** iterates through the array, returning true if every element in the array meets the condition, false otherwise

const arr = [
  { id: 1.name: 'computer'.active: true },
  { id: 2.name: 'mobile phone'.active: true },
  { id: 3.name: 'Digital Camera'.active: false },
  { id: 4.name: 'usb'.active: true },
 { id: 5.name: 'Mechanical keyboard'.active: false } ]; const res = arr.every((item, index,arr) = >{  console.log(item);  console.log(index);  console.log(arr);  return item.active; }); console.log(res); // Parameter 1: each item in the array (mandatory) // Parameter 2: index (optional) // Parameter 3: The array itself being traversed (optional) Copy the code

During traversal, the element satisfies the condition, and the loop is terminated if the condition is not met

9. The find () method

****** iterates through the number group, terminates the loop after returning the first element that meets the condition, and returns undefined if there is no element that meets the condition

const arr = [
  { id: 1.name: 'computer'.active: false },
  { id: 2.name: 'mobile phone'.active: true },
  { id: 3.name: 'Digital Camera'.active: true },
  { id: 4.name: 'usb'.active: true },
 { id: 5.name: 'Mechanical keyboard'.active: false } ]; const res = arr.find((item,index,arr) = >{  return item.active; }); console.log(res); // Parameter 1: each item in the array (mandatory) // Parameter 2: index (optional) // Parameter 3: The array itself being traversed (optional) Copy the code

10. FindIndex () method

Terminates the loop by iterating through the array and returning the ** index ** of the first element that meets the condition, or -1 if there is no element that meets the condition

const arr = [
  { id: 1.name: 'computer'.active: false },
  { id: 2.name: 'mobile phone'.active: true },
  { id: 3.name: 'Digital Camera'.active: true },
  { id: 4.name: 'usb'.active: true },
 { id: 5.name: 'Mechanical keyboard'.active: false } ]; const res = arr.findIndex((item,index,arr) = >{  return item.active; }); console.log(res);/ / 1 // Parameter 1: each item in the array (mandatory) // Parameter 2: index (optional) // Parameter 3: The array itself being traversed (optional) Copy the code