preface

Array, object traversal method has many kinds, we in the development of how to choose the appropriate method, the following is my development experience summary, I hope to help you.

The characteristics of the various methods for traversing an array

forEach

• The characteristics of
  • 1. You can iterate over arrays but not objects
  • 2. You cannot break out of a loop
  • 3. The return value is undefined
• grammar
  • ForEach (callback(currentValue [, index [, array]])[, thisArg])

  If currentValue is ‘123’ or {id: ‘123’}, the result of the operation on the original array will be different as follows:

  Const array = [' hot ', 'BBQ ',' chicken '] array.forEach(arrayItem => arrayItem = 'eat ${arrayItem}') "Fried chicken "] console.log(array)Copy the code

  Const array = [{id: 'hotpot '}, {id:' hotpot '}, {id: 'hotpot '}, 'chicken'}] array. ForEach (arrayItem = > arrayItem. Id = ${arrayItem. Id} ` eat `) / / print results [{id: 'eat hot pot'}, {id: 'eat barbecue'}, {id: }] console.log(array)Copy the code

filter

• The characteristics of
  • 1. You can iterate over arrays but not objects
  • 2. You cannot break out of a loop
  • 3. Returns a new array of elements that have passed the test, or an empty array if none of the array elements have passed the test

  Let array = [' hotpot ', 'hotpot ', 'fried chicken '] let newArray = array.filter(arrayItem => arrayItem ===' barbecue ') // Print result [' barbecue '] console.log(newArray)Copy the code

• grammar
  • var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

map

• The characteristics of
  • 1. You can iterate over arrays but not objects
  • 2. You cannot break out of a loop
  • 3. Returns a new array with the result that each element in the array is the value returned by calling the supplied function once.

  Let array = [' hotpot ', 'BBQ ',' fried chicken '] let newArray = array.map(arrayItem => arrayItem = 'BBQ') "Eat barbecue "] console.log(newArray)Copy the code

• grammar
  • var new_array = arr.map(function callback(currentValue[, index[, array]]) {// Return element for new_array }[, thisArg])

for

• The characteristics of
  • 1. You can iterate over arrays but not objects
  • 2. The for statement is a pre-test loop that only enters the for loop if the condition expression is reached, so it is possible that the code in the body of the loop will never be executed.
  • 3. You can use break to break out of the loop
  • 4. The execution statement has no return value
• grammar
  • for ([initialization]; [condition]; [final-expression])statement

findIndex

• The characteristics of
  • 1. Returns the index of the first element in the array that satisfies the provided test function. Returns -1 if no corresponding element is found.
  • 2. You cannot break out of a loop

  let ages = [{id: 4}, {id: 2}, {id: 19}, {id: 14}]; Let index = ages.findIndex((value) => value.id === 14) // Print result 3 console.log(index)Copy the code

• grammar
  • arr.findIndex(callback[, thisArg])

find

• The characteristics of
  • 1. Returns the value of the first element in the array that satisfies the provided test function. Otherwise return undefined.
  • 2. You cannot break out of a loop

  let ages = [{id: 4}, {id: 2}, {id: 19}, {id: 14}]; Let index = ages.find((value) => value.id === 14) // Print the result {id: 14} console.log(index)Copy the code

• grammar
  • arr.find(callback[, thisArg])

some

• The characteristics of
  • 1. Iterates through the list, breaking out of the loop and returning true if one of the elements satisfies the condition, otherwise returning false.

  Let array = [' hotpot ', 'hotpot ', 'Fried chicken '] let test = array.some(arrayItem => arrayItem ===' barbecue ') let test2 = array.some(arrayItem => arrayItem === 'ice cream ') // Print the result true, false console.log(test, test2)Copy the code

• grammar
  • arr.some(callback(element[, index[, array]])[, thisArg])

includes

• The characteristics of
  • 1. The array_value () method checks whether an array contains a specified value, returning true if it does and false otherwise.

  let array = [1, 2, 3]; True console.log(array.includes(2));Copy the code

• grammar
  • arr.includes(valueToFind[, fromIndex])

every

• The characteristics of
  • 1. If each element of the array satisfies the condition, return true or false.

  Let array = [' hot pot, barbecue, 'chicken', 11] let array2 = [' hot pot, barbecue, Every (arrayItem => typeof arrayItem === 'string') let test2 = array2. Every (arrayItem => typeof ArrayItem === 'string') // Print result false, true console.log(test, test2)Copy the code

• grammar
  • arr.every(callback(element[, index[, array]])[, thisArg])

Second, can be an array | | object | | Map | | traverse the Set of characteristics of each method

for in

• The characteristics of
  • 1. Iterate through the enumerable properties of an object except Symbol in any order. (So can be used to traverse both groups of numbers and objects)
  • 2. for… In should not be used to iterate over an Array that focuses on index order (in short: not recommended with arrays)
  • 3. You can use break to break out of the loop

  Array.prototype.ArrayName = "cat"; const arr = [1, 2, 3]; arr.name = "Hello cat"; For (let index in arr) {// Print result 0 1 2 name ArrayName(for-in traverses all properties of the object, not just "index") console.log(index); }Copy the code

  • 3. Iterate through the enumerable properties in the stereotype and instance that can be accessed through the object

  Object.prototype.age = '16'; Let person = {name: 'nacy', sex: 'female'}; For (let key in person) {// Print result name sex age console.log(key); }Copy the code

• grammar
  • for (variable in object)statement

for of

• The characteristics of
  • 1. The traversal object range includes array, Set, Map structures and so on.
  • 2. You can use break to break out of the loop

  Let array = [' hotpot ', 'BBQ ',' fried chicken '] for(let item of array) {if(item === 'fried chicken ') break; Console. log(item)}Copy the code

  • 3. To obtain the subscript

  Let array = [' hotpot ', 'BBQ ',' fried chicken '] for(let item of array.keys()) {// Print out 0 1 2 console.log(item)}Copy the code

  • 4. Gets the subscript and value

  Let array = [' hot pot, barbecue, 'chicken'] for (let the item of array. Entries ()) {/ / print the result of [0, 'hot pot] [1,' barbecue] [2, 'Fried chicken '] console.log(item)}Copy the code

  • grammar
    • for (variable of iterable) {

    //statements

}

Three, the characteristics of the object traversal methods

Object.keys()

• The characteristics of
  • 1. Returns an array of the self-enumerable properties of a given object
  • 2. Only the instance’s own enumerable properties are traversed

  Object.prototype.age = '16'; Let person = {name: 'nacy', sex: 'female'}; ['name', 'sex'] object.keys (person)Copy the code

Object.values()

• The characteristics of
  • 1. Returns an array of all enumerable property values for a given object itself
  • 2. Only the instance’s own enumerable properties are traversed

  Object.prototype.age = '16'; Let person = {name: 'nacy', sex: 'female'}; ['nacy', 'female '] object.values (person)Copy the code

Object.entries()

• The characteristics of
  • 1. Returns an array of key-value pairs for the given object’s own enumerable properties
  • 2. Only the instance’s own enumerable properties are traversed

  Object.prototype.age = '16'; Let person = {name: 'nacy', sex: 'female'}; / / output [[' name ', 'nacy], [' sex', 'woman']] Object. The entries (person)Copy the code

The last

Thank you for reading, if you have any questions please correct!