Summary and comparison of JavaScript traversal methods

The introduction

First of all, we need to know that for array and iterable traversal methods, we need to compare from different dimensions, method functionality, method application scenarios, method compatibility, method efficiency, method return value and whether to change the original array. Further, we can think about how to implement these methods and consider compatibility with older browsers. Group = group = group = group ForEach () and map(), every() and some(), filter() and find()findIndex(),keys(), values() and entries(),reduce() and reduceRight(). Of course, for conventional traversal methods, such as for, while and do-while,$. Each,$(selector). Each will not be described here, the native method is of course the protagonist, but also depends on the application scenario, using the new traversal method in the project can actually improve code efficiency. Jquery’s approach certainly has its lessons, but it’s rarely used in current front-end projects.

forEach ()

ThisArg; thisArg; thisArg; thisArg; thisArg; thisArg; thisArg; ForEach cannot be used in Earlier Versions of Internet Explorer (6 to 8). For details, see Polyfill. While forEach cannot iterate over objects directly, it can iterate over array-like objects via call, thanks to duck discrimination

var o = {0:1.1:3.2:5.length:3};
Array.prototype.forEach.call(o,function(value, index, obj){
  console.log(value,index,obj);
  obj[index] = value * value;
},o);
// 1 0 Object {0: 1, 1: 3, 2: 5, length: 3}
// 3 1 Object {0: 1, 1: 3, 2: 5, length: 3}
// 5 2 Object {0: 1, 1: 9, 2: 5, length: 3}
console.log(o); // Object {0: 1, 1: 9, 2: 25, length: 3}
Copy the code

ForEach () has the most to watch out for:

This is an array that points to the calling method;

var array = [1.3.5];
var obj = {name:'cc'};
var sReturn = array.forEach(function(value, index, array){
  array[index] = value * value;
  console.log(this.name); // cc is printed three times
},obj);
console.log(array); // [1, 9, 25
console.log(sReturn); // undefined, undefined
Copy the code

There is no return value, it always returns undefined, even if you return a value

var solt = arr1.forEach((v,i,t) = > {
  console.log(v)
})

console.log(solt)	// undefined
Copy the code

Do not exit the loop in the middle of the loop, do not use break, because an error will be reported, only return to exit this callback, the next callback

var arr1 = [1.2.3.4.5]

// An error is reported using break
arr1.forEach((v,i,arr) = > {
  console.log(v)
  if(v === 3) {
    break}})//SyntaxError: Illegal break statement



// return false is also invalid
arr1.forEach((v,i,arr) = > {
  console.log(v)
  if(v === 3) {
    return false
    console.log('-- -- -- -- --)// Will not be executed}})/* 1, 2, 3, 4, 5 */
Copy the code

With the arrow function, thisArg arguments are ignored

var arr1 = [1.2.3]
var arr2 = [7.8.9]

arr1.forEach((v, i, arr) = > {
  console.log(this)})// window
// window
// window

arr1.forEach((v, i, arr) = > {
  console.log(this)
}, arr2)
// window
// window
// window
Copy the code

map()

The map() method iterates through the array, processing each element with a function passed in, and returning a new array of the function’s return values. Please refer to Polyfill for compatible writing in earlier versions of IE (6~8).

Every () and some ()

The every() method tests all elements with the function passed in, and returns false as long as one of the functions returns false; The result of this method is true only if all return true; Every cannot be used in earlier versions of Internet Explorer (6-8). Please refer to Polyfill for compatibility.

The following is the writing method of duck distinguishing type:

var o = {0:10.1:8.2:25.length:3};
var bool = Array.prototype.every.call(o,function(value, index, obj){
  return value >= 8;
},o);
console.log(bool); // true
Copy the code

The some() method returns true if any function returns true, or false if all of them return false. The canard type of some can be written by referring to every, which also cannot be used in lower versions of IE (6~8). Please refer to Polyfill for compatibility.

filter()

The filter() method uses the passed function to test all elements and returns a new array of all elements that pass the test. It acts as a filter, sifting out elements that don’t fit the criteria. Filter also supports duck type discrimination. For details, please refer to the duck type discrimination writing method of every method. Please refer to Polyfill for compatible writing in earlier versions of IE (6~8).

var array = [18.9.10.35.80];
var array2 = array.filter(function(value, index, array){
  return value > 20;
});
console.log(array2); / / [35, 80]
Copy the code

The for in statement

A for-In loop usually iterates through an object’s properties, but an attribute needs enumerable to be read. A for-in loop only iterates through an enumerable property. It is commonly used to iterate over objects, including names of non-integer types and properties above the inherited stereotype chain. Objects created using built-in constructors like Array and Object inherit the non-enumerable properties of Object.prototype and String.prototype and cannot be iterated

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

The for – statement

The for-of statement creates an iteration loop over iterable objects (including Array, Map, Set, String, TypedArray, Arguments, and so on), calls custom iteration hooks, and executes statements for the values of each different property. As long as it is an iterable object, it can iterate through for-of.

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

The find () and findIndex ()

The find() method, based on the ECMAScript 2015 (ES6) specification, returns the first element in the array that meets the criteria (if any), or undefined if none.

The findIndex() method, which is also based on the ECMAScript 2015 (ES6) specification, returns the index (if any) of the first element in the array that satisfies the condition or -1.

var array = [1.3.5.7.8.9.10];
function f(value, index, array){
  return value%2= =0; // Return an even number
}
function f2(value, index, array){
  return value > 20; // Return the number greater than 20
}
console.log(array.find(f)); / / 8
console.log(array.find(f2)); // undefined
console.log(array.findIndex(f)); / / 4
console.log(array.findIndex(f2)); // -1
Copy the code

includes()

Checks whether an array contains a specified value, returning true if it does, false otherwise.

var array1 = [1.2.3];

console.log(array1.includes(2));
// expected output: true

var pets = ['cat'.'dog'.'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false
Copy the code

Reduce () and reduceRight ()

The reduce() method receives a method as an accumulator, and each value in the array is merged (from left to right) to a single value; InitialValue Specifies the first parameter of the first call to fn. ; When fn is first executed:

If initialValue is provided when reducing is called, the first previousValue will be equal to initialValue, in which case item equals the first value in the array;
If initialValue is not provided, previousVaule is equal to the first value in the array, and item is equal to the second value in the array. If the array is empty at this point, TypeError is raised.
If the array has only one element and initialValue is not provided, or initialValue is provided but the array is empty, fn will not be executed and the unique value of the array will be returned.

var array = [1.2.3.4];
var s = array.reduce(function(previousValue, value, index, array){
  return previousValue * value;
},1);
console.log(s); / / 24
// ES6 is more concise
array.reduce((p, v) = > p * v); / / 24
Copy the code

The reduceRight() method takes a method as an accumulator, and each value in the array (from right to left) starts merging and ends up as a single value. Except that the execution direction is opposite to that of Reduce, it is completely consistent with that of reduce.

entries()

The Entries () method is based on the ECMAScript 2015 (ES6) specification and returns an array iterator object containing the key-value pairs for each index in the array.

var array = ["a"."b"."c"]; var iterator = array.entries(); console.log(iterator.next().value); / / [0,"a"] console.log(iterator.next().value); / / [1,"b"] console.log(iterator.next().value); / / / 2."c"] console.log(iterator.next().value); // undefined. If the iterator is at the end of the array, undefined is returnedCopy the code

Entries also benefit from duck styling, as follows:

var o = {0:"a".1:"b".2:"c".length:3};
var iterator = Array.prototype.entries.call(o);
console.log(iterator.next().value); // [0, "a"]
console.log(iterator.next().value); // [1, "b"]
console.log(iterator.next().value); // [2, "c"]
Copy the code

keys()

The keys() method is based on the ECMAScript 2015 (ES6) specification and returns an iterator of an array index. (Actual browser implementation may be adjusted)

var array = ["abc"."xyz"];
var iterator = array.keys();
console.log(iterator.next()); // Object {value: 0, done: false}
console.log(iterator.next()); // Object {value: 1, done: false}
console.log(iterator.next()); // Object {value: undefined, done: false}
Copy the code

Note that index iterators contain indexes that have no corresponding element

var array = ["abc"."xyz"];
var sparseKeys = Object.keys(array);
var denseKeys = [...array.keys()];
console.log(sparseKeys); / / / "0", "2"
console.log(denseKeys);  / / [0, 1, 2]
Copy the code

values()

The values() method is based on the ECMAScript 2015 (ES6) specification and returns an array iterator object containing the value of each index in the array. Its usage is basically the same as the entries method above. In terms of compatibility, no browser currently implements this approach

var array = ["abc"."xyz"];
var iterator = array.values();
console.log(iterator.next().value);//abc
console.log(iterator.next().value);//xyz
Copy the code

Symbol.iterator()

This method is based on the ECMAScript 2015 (ES6) specification and has the same function as the VALUES method.

var array = ["abc"."xyz"];
var iterator = array[Symbol.iterator]();
console.log(iterator.next().value); // abc
console.log(iterator.next().value); // xyz      
Copy the code

conclusion

Array traversal method

The return value is either an array, a value, a Boolean, or an array iterator object;
Every, some is used for judgment, returns a Boolean; Filter, find, and findIndex are used to filter and return an array of elements or elements that meet the criteria. The difference is that filter returns an array of all elements that meet the criteria. Find and findIndex return the first element or element index that meets the criteria.
All of array. prototype’s methods have the magical property of duck sorting. They can handle not only Array objects but also array-like objects.
The new methods in ES6 apply to a wider range of objects. They can be used for all iterable objects that have an Iterator interface, such as arrays, array-like objects, maps, and sets.
For the efficiency of various traversal methods, this article (detailed explanation of JS traversal) tests and compares traversal methods in JS, and comes to the conclusion that the efficiency of JavaScript native methods is higher than that of various encapsulated methods;

Differences between forEach() and map() :

Map () creates a new array without changing the original one; ForEach () can change the array.
Map () skips gaps but keeps them; ForEach () traverses over vacancies without retaining them.
Map () processes the elements in the original array element order; ForEach () iterates through each element of the array, passing the element to the callback function.

withforEach()Add attributes for each element in the array

var arr = [
    {name : 'kiwi'.age : 12},
    {name : 'sasa'.age : 22},
    {name : 'alice'.age : 32},
    {name : 'joe'.age : 42}
]
arr.forEach(function(ele, index){
    if(index > 2){
        ele.sex = 'boy';
    }else{
        ele.sex = 'girl';
    }
    return arr1
})
console.log(arr)// The group of elements changes
//[{name: "kiwi", age: 12, sex: "girl"},{name: "sasa", age: 22, sex: "girl"},{name: "alice", age: 32, sex: "gi
Copy the code

** Meets the vacancy comparison **

['a'.'b'].forEach(function(ele,index){
    console.log(ele + '. ' + index);
})
//0.a
//2.b
['a'.'b'].map(function(ele,index){
    console.log(ele + '. ' + index);
})
//['0.a', , '2.b']
Copy the code

Differences between for-of and for-in
- for... ofThe loop doesn’t loop over the key of the object, it just loops over the value of the array, sofor... ofCannot loop overOrdinary objectsIs recommended for traversal of common objectsfor... in. If you really want to use itfor... ofTo iterate over the properties of a normal object, use andObject.keys()Get an array of all the keys of the object and iterate through it:
```
var student={
    name:'wujunchuan'.age:22.locate: {country:'china'.city:'xiamen'.school:'XMUT'}}for(var key of Object.keys(student)){
    // Use the object.keys () method to get an array of Object keys
    console.log(key+":"+student[key]);
}
/* / "TypeError: Student is not iterable "for(var key of student){// Use object.keys () to get the array of Object keys console.log(key+": "+student[key]); } * /
Copy the code
```
- for... inI’m looping over key,for... ofThe loop is value; This is recommended when looping object propertiesfor... in“Is used when iterating through groups of numbersfor... of. Pay attention to,for... ofIs a new feature introduced in ES6. Fixes introduced in ES5for... inThe shortage of the

Reference:

JavaScript array full decryption of all apis
Js array detailed operation methods and parsing collection
JS traversal in detail