What are the new traversal methods in es6?

The new traversal methods are: 1. findIndex(), which can traverse the array and find the matching element; 2. find(), which can traverse the array and find the first matching element; 3. entries( ), traverse key-value pairs; 4. keys(), traverse key names; 5. values(), traverse key-values.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

10 commonly used traversal methods in ES5:

1. Original for loop statement

2. Built-in Array.prototype.forEach array object Method

3, Array.prototype.map array object built-in method

4, Array.prototype.filter array object built-in method

5, Array.prototype.reduce array object Built-in method

6, Array.prototype.some array object built-in method

7, Array.prototype.every array object built-in method

8, Array.prototype.indexOf array Object built-in method

9, Array.prototype.lastIndexOf Array object built-in method

10, for...inLoop statement

es6 new The traversal method

findIndex(callback [, thisArg]) finds matching elements in the array

找到一个就返回匹配的元素的下标，没找到就返回-1。
let arr = [1, 2, 3, 4, 5, 6]// 此时我们找大于2的数
let newArr = arr.findIndex(val => {return val > 2})
console.log(newArr) // 2

find(fn(callback [, thisArg])

Search for matching elements in the array. If one is found, the matching element will be returned. If no matching element is found, undefined will be returned.

Note: The following example is a wrong demonstration relative to the requirements, because We want to find a number greater than 2. When a match of 3 is found, the condition is met and the function will stop.

Example:

let arr = [1, 2, 3, 4, 5, 6]
// 此时我们找大于2的数
let newArr = arr.find(val => {
    return val > 2
})
console.log(newArr) // 3

entries(), keys() and values()

ES6 provides three new methods - entries(), keys() and values() - for traversing arrays and objects. They all return a iterator object, which can Use the for...of loop to traverse. The only difference is that keys() traverses key names, values() traverses key values, and entries() traverses key-value pairs. .

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

If you do not use a for...of loop, you can manually call the next method of the traverser object to traverse.

let letter = ['a', 'b', 'c'];  
let entries = letter.entries();  
console.log(entries.next().value); // [0, 'a']  
console.log(entries.next().value); // [1, 'b']  
console.log(entries.next().value); // [2, 'c']

[Related recommendations: javascript video tutorial、webfrontend】

The above is the detailed content of What are the new traversal methods in es6?. For more information, please follow other related articles on the PHP Chinese website!