“This is the fifth day of my participation in the First Challenge 2022. For details: First Challenge 2022.”
ES series of articles
- ES6 variable constant (let const)
- Deconstruction assignment
- ES5 Array traversal mode
- ES6 Array traversal mode
- Extension of arrays
ES5 array traversal
-
The for loop
-
forEach()
-
map()
-
filter()
-
some()
-
every()
-
reduce()
-
for in
The for loop
let list= [1, 2, 3];
for (let i = 0; i < list.lenght; i++){
console.log(list[i])
}
Copy the code
ForEach () : returns no value, just calls func forEach element
array.forEach(function(elem,index,array)){ }
- Elem required, representing the current element
- Index Indicates the current element index. This parameter is optional
- Array Indicates the array object that the current element belongs to. This parameter is optional
- Break and Cuntinue are not supported
- Empty arrays are not checked
let arr= [1, 2, 3]; Array. forEach(function(elem,index,array)){if (arr [I] == 2){break} console.log(elem,index)} ForEach (): can't get out of the loopCopy the code
Map () : Returns a new Array, each element as the result of calling func
array.map(function(value)){ }
- The map return value forms a new array
- Do not change the original array value
- Empty arrays are not checked
let arr= [1, 2, 3];
let result=arr.map(function(value){
value+=1
return value
})
console.log(arr,result)
// [1 2 3] [2 3 4]
Copy the code
Filter () : Returns an array of elements that meet func criteria
array.filter(function(value)){ }
- Returns an array containing the existing elements that match the criteria. An empty array is returned if there are no elements, and a new array is formed if there are
- Do not change the original array
- Empty arrays are not checked
let arr= [1, 2, 3];
let result=arr.map(function(value){
return value == 2
})
console.log(arr,result)
// [1 2 3] [2]
Copy the code
Some () : Returns Boolean to determine if any elements are eligible for func
array.some(function()){ }
- Boolean if one element in the array meets the criteria, return true, and the rest of the elements will not be checked. If no element satisfies the condition, return false
- It doesn’t change the original array
- Empty arrays are not checked
let arr= [1, 2, 3];
let result=arr.some(function(value){
return value==2
})
console.log(arr,result)
//[1 2 3] true
Copy the code
Every () : Returns Boolean to determine whether each element meets the func criteria
array.every(function()){ }
- Returns Boolean that checks whether all elements meet the condition, true if they do, false otherwise
- It doesn’t change the original array
- Empty arrays are not checked
let arr= [1, 2, 3];
let result=arr.every(function(value){
return value==2
})
console.log(arr,result)
//[1 2 3] false
Copy the code
Reduce () : Receives a function as an accumulator
array.reduce(function(prev,cur,index,array)){}
- Prev. The initial value, or the return value at the end of the calculation
- Cur. The current element
- The index. The index of the current element
- Array. The array object to which the current element belongs
- The reduce() method takes a function as an accumulator, and each value in the array (from left to right) starts to shrink and eventually evaluates to a value
- Reduce () does not perform callbacks on empty arrays.
Scenario 1: Sum over Reduce
let arr= [1, 2, 3];
let sum=arr.reduce(function(prev,cur,index,array){
return prev + cur
},0)
console.log(sum)
// 6
Copy the code
Scenario 2: Obtain the maximum value of reduce
let arr= [1, 2, 3];
let max=arr.reduce(function(prev,cur){
return Math.max(prev,cur)
})
console.log(max)
// 4
Copy the code
Scenario 3: Reduce deduplication
let arr= [1, 2, 3, 2, 4]; let res=arr.reduce(function(prev,cur){ prev.indexOf(cur)==-1 && prev.push(cur) return prev },[]) console.log(res) // [1 2, 3]Copy the code
for in
- Iterate over the index of a number group
- The property methods of the stereotype are also iterated over when iterating through arrays
Array.prototype.foo=function(){
console.log('foo')
}
for(let index in arr){
console.log(index,arr[index])
}
Copy the code
A front end small white, if the article has the wrong content, welcome big guy to give directions to discuss!