FOREACH, MAP, FILTER, SOME, every five array methods

Array functions

(both index and ARR in the callback function here can be omitted, the callback function has parameters that are set to adjust this point, which is not used here for the time being)

• ForEach ()
• Map ()--Update array
• Filter (), includes (), find (), FindIndex ()--Filters (deletes) an array
• Some (), every ()--judgment array
• Reduce ()--overlay Array

Arr.foreach ()

Iterate through all elements of the array, manipulate the array using the callback function, and automatically iterate through the arrays. Number of length, and cannot break out of the loop halfway

Therefore not controllable

Return operation output is not supported, return is only used to control whether the loop jumps out of the current loop

Therefore, it is difficult to operate into new arrays, new values, so no more analysis

Example: [JavaScript]View PlainCopy

1. var arr = [1,2,3,4,5,];
2. Arr.foreach (function (item,index) {
3. Console.log (item);
4. });

Arr.map ()--Update array

1. Create a new array

2, do not change the original array

3, the output is return what will output what new array

4. Callback function parameter, item (array Element), index (sequence), arr (array itself)

5. Using the return operation output, each item of the array is looped and manipulated in the callback function

Example: [JavaScript]View PlainCopy

2. var arr = [1,2,3,4,5];
4. var newArr = Arr.map (function (item,index) {
6. return item*2; //Operation update array
8. })
10. Console.log (NEWARR); //Print a new array
12. Console.log (arr); //Print original array, map () does not change the original array
14. var newArr2 = Newarr.map (function (item,index) {
16. return ' <li>${item}</li> ';
18. //es6 syntax, template string, tilde key, variable using ${}
20. //["<li>NaN</li>", "<li>NaN</li>", "<li>NaN</li>", "<li>nan</li > "," <li>NaN</li> "]
22. })
24. Console.log (Newarr2.join (")); //array. Join (), concatenate each item of the array to form a string
26. Console.log (NEWARR); //print array, map () does not change the original array

Arr.filter (), includes (), find (), FindIndex ()--filter array one, Arr.filter ()

1. Create a new array

2, do not change the original array

3. The output is a new array formed by an array element that evaluates to True

4. Callback function parameter, item (array Element), index (sequence), arr (array itself)

5. Using the return operation output, each item of the array is looped and manipulated in the callback function

Example: [JavaScript]View PlainCopy

2. var arr = [1,2,3,4,5];
4. var newArr = Arr.filter (function (item,index) {
6. return item>2&&item<5; //Based on judgment true to iterate through loops added into new array
8. })
10. Console.log (NEWARR); //Print a new array
12. Console.log (arr); //Print original array, map () does not change the original array

Second, Arr.includes ()

Just determine if the array contains a value, no return, no callback function, output a true or false

Useless

Example: [JavaScript]View PlainCopy

1. Include ():
2. var arr = [1,2,3,4,5];
3. var new1 = arr.includes (5); //Do not use callback function, and is exactly the same line as the original array is 55 flase (less practical than regular)
4. Console.log (New1);
5. Console.log (arr);

Third, Arr.find ()

1. Do not create a new array

2, do not change the original array

3, the output is once judged true to jump out of the loop to output the array elements that match the criteria

4. Callback function parameter, item (array Element), index (sequence), arr (array itself)

5. Using the return operation output, each item of the array is looped and manipulated in the callback function

Example: [JavaScript]View PlainCopy

2. var arr = [1,2,3,4,5];
4. var new1 = Arr.find (function (item,index) {
6. return item>2&&item<5; //When traversing loops to the judgment of a true then jumps out of the loop, outputting the current array element, no longer looping
8. })
10. var new2 = Arr.find (function (item,index) {
12. <span style="WHITE-SPACE:PRE;" > </span>return item.tostring (). IndexOf (5) >-1; <span style="WHITE-SPACE:PRE;" > </span>//Convert the current array element to a string, you can index () >-1 to determine if a character is included
14. })
16. Console.log (New1); //Results after print operation
18. Console.log (NEW2) //print contains a character (better with regular, learn to use it here)
20. Console.log (arr); //Print original array, find () does not change the original array

Iv. Arr.findindex ()--Same as Find ()

1. Do not create a new array

2, do not change the original array

3. The output is the sequence of array elements that jump out of the loop to match the condition once it is judged true

4. Callback function parameter, item (array Element), index (sequence), arr (array itself)

5. Using the return operation output, each item of the array is looped and manipulated in the callback function

(More useless)

Example: [JavaScript]View PlainCopy

2. var arr = [1,2,3,4,5];
4. var new1 = Arr.findindex (function (item,index) {
6. return item>2&&item<5; //When traversing loops to the judgment of a true then jumps out of the loop, outputting the current array element sequence, no longer looping
8. })
10. var new2 = Arr.findindex (function (item,index) {
12. return item.tostring (). IndexOf (5) >-1; //To convert the current array element to a string, you can index () >-1 to determine if a character is contained
14. })
16. Console.log (New1); //Results after print operation
18. Console.log (NEW2) //print contains a character (better with regular, learn to use it here)
20. Console.log (arr); //Print original array, findindex () does not change the original array

Arr.some (), every ()--judgment array

(not commonly used)

First, some ()

1. Do not create a new array

2, do not change the original array

3, the output is judged true immediately jump out of the loop and return to True

4. Callback function parameter, item (array Element), index (sequence), arr (array itself)

5. Using the return operation output, each item of the array is looped and manipulated in the callback function

Example: [JavaScript]View PlainCopy

2. Arr.some ()
4. var arr = [1,2,3,4,5];
6. var new1 = Arr.some (function (item,index) {
8. return item>2&&item<5; //Determine a match condition to jump out of the loop and output true
10. })
12. var new2 = Arr.some (function (item,index) {
14. return item>5; //Judge that all elements in the array are not eligible for output flase
16. })
18. Console.log (New1);
20. Console.log (NEW2);
22. Console.log (arr);

First, every ()--contrary to some

1. Do not create a new array

2, do not change the original array

3, the output is judged false then immediately jump out of the loop and return to False

4. Callback function parameter, item (array Element), index (sequence), arr (array itself)

5. Using the return operation output, each item of the array is looped and manipulated in the callback function

Example: [JavaScript]View PlainCopy

2. Arr.every ()
4. var arr = [1,2,3,4,5];
6. var new1 = Arr.every (function (item,index) {
8. return item>2&&item<5; //Determine a non-conforming condition to jump out of the loop and output flase
10. })
12. var new2 = Arr.every (function (item,index) {
14. return item<10; //Determine that all elements of the array match the conditions and output true
16. })
18. Console.log (New1);
20. Console.log (NEW2);
22. Console.log (arr);

Reduce ()--overlay Array

Not necessarily in the mathematical sense of superposition calculation, here superposition refers to: You can use the results of the previous traversal operation to the next traversal use, repeat overlay use down

1. Create a new array

2, do not change the original array

3, output is the return stack what will output what new array

4. Callback function parameters

• Pre (the first array first, followed by the result of the previous action)
• Next (the next item in the array)
• Index (sequence of next items)
• Arr (array itself)
• Change the first parameter after the callback function. (Does not affect the original array)

5. Using the return operation output, each item of the array is looped and manipulated in the callback function

Example: [JavaScript]View PlainCopy

2. Reduce ():
4. Sum calculation
6. var arr1 = [1,2,3,4,5];
8. var new1 = Arr1.reduce (function (sum,next,index) {
10. return sum+next;
12. /* 
14. * First time: pre-->1 next-->2 index-->1
16. * Traverse calculation return result is pre+next=1+2=3
18. * Second time: pre-->3 next-->3 index-->2
20. * Traverse calculation return result is pre+next=3+3=6
22. * Third time: pre-->6 next-->4 index-->3
24. * Traverse calculation return result is pre+next=6+4=10
26. * Fourth time: pre-->10 next-->5 index-->4
28. * Traverse calculation return result is pre+next=10+5=15
30. */
32. })
36. Flattened array
38. var arr2 = [[1,2,3],[4,5],[6,7]];
40. var new2 = Arr2.reduce (function (pre,next,index) {
42. return Pre.concat (next); ///Pre-array after concatenation of arrays. Concat ()
44. })
48. Object Array Overlay Calculation
50. var arr3 = [{price:10,count:1},{price:15,count:2},{price:10,count:3}];
52. var new3 = Arr3.reduce (function (pre,next,index) {
54. return pre+next.price*next.count;
56. //When the first item needs to be manipulated, the back pre uses the result of the previous operation and no more action is required
58. //So when you need to operate the first item, use Reduce (Callbreak () {} to add an entry before the first item in the array, such as: 0)
60. },0) //In the original array the first item is added as 0, do not change the original array, do not operate the first item
64. Console.log (New1);
66. Console.log (NEW2);
68. Console.log (NEW3);
72. Console.log (ARR1); //Normal array
74. Console.log (ARR2); //Multiple arrays
76. Console.log (ARR3); //Object array

FOREACH, MAP, FILTER, SOME, every five array methods