This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

Daily data processing is back-end to do, but the front-end of some basic data processing or to master. Arrays are the most common type of data, and we do a lot of processing and judging. I’m going to show you some basic and common ways to iterate over arrays, and I’m going to beg you to stop using for loops in your projects, because they’re a pain to maintain

1.Array.foreach()

introduce

This is the most basic array traversal method. It takes a function as an argument and the effect is to loop through the array. The function argument takes three inputs and returns no data

[].foreach((item, index, arr) = > {});
Copy the code

parameter

Item The element of the array that corresponds to each traverse index the subscript of the array that corresponds to each traverse arr The array itself that is traversed

The return value

There is no

Usage scenarios

When you need to iterate over an array

example

Print out all the data and the corresponding subscripts

const arr = ["Zhang"."Luo Xiang"."Zhang wei"];
arr.foreach((item, index, arr) = > {
  console.log(item, index);
});
// select * from *
// select * from '//'
// 'zhang Wei' 2
Copy the code

2.Array.filter()

introduce

Filters an array and accepts a method as an argument that adds the element to the new array when the method returns true

[].filter((item, index, arr) = > true);
Copy the code

parameter

Item The element of the array that corresponds to each traverse index the subscript of the array that corresponds to each traverse arr The array itself that is traversed

The return value

A new array

Usage scenarios

You need to get the elements in the list that match the criteria

example

Pick out all the numbers greater than 4

const arr = [1.5.9.2.3];

const newArr = arr.filter((item, index, c) = > item > 4);

console.log(newArr); / / [5, 9]
Copy the code

3.Array.map()

introduce

To map an array, pass a method that returns one piece of data and then assembles all the returned data into an array

[].map((item, index, arr) = >Process the data and return it);Copy the code

parameter

Item The element of the array that corresponds to each traverse index the subscript of the array that corresponds to each traverse arr The array itself that is traversed

The return value

A new array

Usage scenarios

Process the data into the data format you need

example

Pull out all the names

const arr = [
  { name: "Zhang".age: 14 },
  { name: "Luo Xiang".age: 50 },
  { name: "Zhang wei".age: 23},];const newArr = arr.map((item, index, c) = > item.name);

console.log(newArr); //[' Zhang SAN ', 'Luo Xiang ',' Zhang Wei ']
Copy the code

4.Array.some()

introduce

To iterate over an array, pass a method as an argument, return either true or false, and abort the traversal as soon as one returns true

[].some((item, index, arr) = > true);
Copy the code

parameter

Item The element of the array that corresponds to each traverse index the subscript of the array that corresponds to each traverse arr The array itself that is traversed

The return value

Return true if one traversal meets the criteria, false if all data fails

Usage scenarios

Determines whether one or more elements of the list match a condition

example

Is there a Zhang Wei on the list? Is there anyone named Lin Sanxin on the list?

const arr = [
  { name: "Zhang".age: 14 },
  { name: "Luo Xiang".age: 50 },
  { name: "Zhang wei".age: 23},];const hasZhangWei = arr.some((item, index, c) = > item.name === "Zhang wei");
console.log(hasZhangWei); // true

const hasLinSanXin = arr.some((item, index, c) = > item.name === "Lin SAN Xin");

console.log(hasLinSanXin); // false
Copy the code

5.Array.every()

introduce

Traversal an array, passing a method as an argument, returning either true or false, false, and aborting traversal as soon as one returns false (as opposed to some)

[].every((item, index, arr) = > true);
Copy the code

parameter

Item The element of the array that corresponds to each traverse index the subscript of the array that corresponds to each traverse arr The array itself that is traversed

The return value

Returns true if there are all methods of traversal, false otherwise

Usage scenarios

Determine if all elements of the list match a condition

example

Is everyone on the list older than 18? Is everyone on this list older than 3?

const arr = [
  { name: "Zhang".age: 14 },
  { name: "Luo Xiang".age: 50 },
  { name: "Zhang wei".age: 23},];const all18 = arr.every((item, index, c) = > item.age > 18);
console.log(all18); // false

const all3 = arr.every((item, index, c) = > item.age > 3);

console.log(all3); // true
Copy the code

6. Array. A find (), Array. FindIndex ()

introduce

Iterating through an array, passing in a method that returns either the element itself or its index (find returns the element itself, findIndex returns its index).

[].find((item, index, arr) = > true);
[].findIndex((item, index, arr) = > true);
Copy the code

parameter

Item The element of the array that corresponds to each traverse index the subscript of the array that corresponds to each traverse arr The array itself that is traversed

The return value

Find returns the element itself, undefined if it does not. FindIndex returns the index of the element, undefined if it does not

Usage scenarios

Get the element or its index that meets the criteria, return undefined if it does not

example

Find someone named Luo Xiang and get his information find the subscript of someone named Luo Xiang

const arr = [
  { name: "Zhang".age: 14 },
  { name: "Luo Xiang".age: 50 },
  { name: "Zhang wei".age: 23},];const person = arr.find((item, index, c) = > item.name === 'Luo Xiang');
console.log(person); // {name: "", age: 50}

const i = arr.findIndex((item, index, c) = > item.name === 'Luo Xiang');

console.log(i); / / 1
Copy the code

There are other useful methods, such as Reduce, for those interested