A .ES5 array traversal methods and ES6 summary
1.for circulation.
for(var i=0;i<arr.length;i++){ console.log(arr[i]); }
This method is the simplest and nothing to pay attention to, but the writing is somewhat complicated, so we followed in terms of the following methods.
2.forEach
const arr = [1,2,3,4,5]; arr.forEach((item)=>{ console.log(item); })
This approach seems a lot of easy, but it can not break through and continue to stop or continue, if coupled continue, break error. So in this way and can not stop in the middle skipped, only traverse one by one from start to finish.
3.every
const arr = [1,2,3,4,5]; arr.every((item)=>{ console.log(item); })
There is every good solution to the problem can not be interrupted and skipped forEach, the above code will output a 1, 1,2,3,4,5 not output. If every function return true then then traverse down, if the return false is equivalent to break, it will be interrupted. If nothing is returned, the effect is equivalent to a return false, directly interrupted.
const arr = [1,2,3,4,5];
arr.every((item)=>{
if(item==2)return true;
console.log(item);
return true;
})
This effect corresponds to the code will be output at 2 1,3,4,5, use continue;
4.for...in..
const arr = [1,2,3,4,5]; for(var index in arr){ console.log(index,arr[index]);
}
In fact, this method is used to traverse the object, wherein the index is a string type, the output of this code is:
0 1
1 2
2 3
3 4
4 5
In front of the string type, followed by a number, although the above output looks similar, but slightly modified if the code:
const arr = [1,2,3,4,5]; arr.p =100; for(var index in arr){ console.log(index,arr[index]); }
The output is:
0 1
1 2
2 3
3 4
4 5
p 100
You can see the difference, right? So for ... in a specially prepared for traversing the object, the general array traversal or do not use as well!
5.for...of
for of ES6 is newly added.
const arr = [1,2,3,4,5]; for(let item of arr){ console.log(item); }
Using the method described above, and for in the like.
II ES5 and ES6 dummy array will be converted into an array of respective methods:
Why artificial array is called pseudo-arrays, it is because he has an array of characteristics: there are length, etc. can be traversed, but he does not have some other operation array, such as slice and so on.
Pointing to the dummy array definition: a length attribute data and stored by indexing the object is the dummy array.
1. achieved by call
let arr = [].slice.call(arguments);
It is assumed that a dummy arguments array.
2. achieved by ES6 from the new
from (arrayLike, mapFn, this.Arg) parameter indicates a pseudo first array to be transformed, the second parameter represents the operation to be performed for each item, the this third parameter function representing the second point.
let arr = Array.from(arguments)
By the above-described manner may be converted into an array of array data.
In fact, from there another use, you can initialize an array of content from.
let arr = Array.from({length:5},()=>{ return 1; });
The above initialization operations on behalf of an array of length 5, 1 and initializes all the contents.
Three .ES5 and ES6 create a new array of methods
let arr = Array(5);
let arr = [];
let arr = Array.from ({length: 5}, () => {return 1;}); // create an array of length 5, and the array of all the value of 1.
let arr = Array.of (1); // create an array, the array values [. 1]
the let ARR = the Array (5) .fill (. 1); // create an array of length 5, and the array of all the assignment 1.
Above two is the most common method of ES5, you can specify the length of the first, but the second can not be specified. The following three methods are the ES6.
Array.fill (value, start, end). The first value is to be filled, the second third of the starting and ending positions.
Four .ES5 methods and ES6 looking elements.
let array = [1,2,3,4,5]; let find = array.filter((item)=>{ return item%2===0 }) console.log(find);
The code return value is [2,4], which is ES5 find elements of the approach, it would have been to find the end of an array and returns an array. If we want to find the first element to meet the conditions, this method would be a bit time-consuming.
let array = [1,2,3,4,5]; let find = array.find((item)=>{ return item%2===0 }) console.log(find);
This approach is new ES6 above, the final result is 2, if we only want to find the first element, this approach is reasonable.
Summary: The above article we summarize the ES5 and ES6 traverse the array, conversion, generate, the search operation, and compared. Only understand the characteristics of each method in order to select the appropriate method at the appropriate time.