This content originally appeared on Level Up Coding - Medium and was authored by Maxwell
Summarize the Common Loop Traversal Methods in JavaScript — How Many Have You Used?
As the most basic data structure, arrays and objects play a crucial role in various programming languages. It is hard to imagine what a programming language would look like without arrays and objects, especially JS, a weakly typed language, very flexible. This article takes you to understand the use and comparison of common array traversal, object traversal, and precautions.
Array Traversal
With the continuous development of JS, there are more than ten traversal methods as of the ES7 specification. The following is a group of methods with similar functions to introduce the common traversal methods of arrays.
for、forEach、for …of
Summary
- It’s all basic traversing the array from left to right
- forEach cannot break out of a loop; for and for ..of can be skipped or interrupted using break or continue.
- for …of directly accesses the actual element. for traverses the array index, the forEach callback function has more parameters, and the element, index, and original array can be obtained.
- for …of and for are also executed if there are empty elements in the array.
some、every
Summary
- Both are used for array conditional judgment, and both return a boolean value.
- Both can be interrupted
- some If an element satisfies the condition, returns true, and the loop is interrupted; if all elements do not satisfy the condition, returns false.
- every Contrary to some, if the beneficial element does not satisfy the condition, it returns false, and the loop is interrupted; if all elements satisfy the condition, it returns true.
filter、map
Summary
- Both generate a new array, and neither will change the original array.
- Both will skip empty elements. Interested students can print it by themselves.
- map will form a new array with the return value of the callback function, and the length of the array is the same as the original array.
- filter will form a new array of elements that meet the conditions of the callback function, and the length of the array is different from the original array.
- The new array elements generated by map are customizable.
- The new array elements generated by filter cannot be customized and are consistent with the corresponding original array elements.
find、findIndex
Summary
- Both are used to find array elements.
- find returns the value of the first element in the array that satisfies the callback function. Returns undefined if it does not exist.
- findIndex returns the index of the element found in the array, not its value, or -1 if it doesn’t exist.
reduce、reduceRight
reduce : accepts two parameters, the first parameter is the callback function, and the second parameter is the initial value.
reduceRight : returns the index of the element found in the array, not its value, or -1 if it doesn’t exist.
The callback function receives four parameters:
- accumulator: Up to the current element, all previous array elements are processed by the callback function and accumulated.
- current: The current array element being executed.
- currentIndex: The index of the array element currently being executed.
- sourceArray: The original array, that is, the array that calls the reduce method.
If no initial value is passed in, the reduce method will execute the callback function starting from index 1. If an initial value is passed in, it will start from index 0 and execute the callback accumulatively based on the initial value.
Calculates the sum of a property of an array of objects
Deduplication of object array and count the number of repetitions of each item
Get the maximum/minimum value of an object array
Performance comparison
Having said so much, what is the difference in performance between these traversal methods? We try it in Chrome browser. I use each loop to execute 10 times, remove the maximum and minimum values, and take the average to reduce the error.
As can be seen from the printed results, the for loop is the fastest and the for of loop is the slowest.
Summarize the Common Loop Traversal Methods in JavaScript — How Many Have You Used? was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Maxwell
Maxwell | Sciencx (2022-10-19T11:43:59+00:00) Summarize the Common Loop Traversal Methods in JavaScript — How Many Have You Used?. Retrieved from https://www.scien.cx/2022/10/19/summarize-the-common-loop-traversal-methods-in-javascript-how-many-have-you-used/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.