JavaScript: forEach, map, Arrow Functions, setTimeout, setInterval, filter, some, every, and reduce-JS Tutorial-php.cn

JavaScript: forEach, map, Arrow Functions, setTimeout, setInterval, filter, some, every, and reduce

WBOY

Release： 2024-08-08 06:47:11

Original

275 people have browsed it

JavaScript: forEach, map, Arrow Functions, setTimeout, setInterval, filter, some, every, and reduce

forEach Method

forEach is used to iterate over arrays. Here is a simple example:

const numbers = [1, 2, 3, 4, 5, 6, 7];

numbers.forEach(function (el) {
  if (el % 2 === 0) {
    console.log(el);
  }
});

Copy after login

Now let's use forEach with an array of objects:

const movies = [
  {
    title: 'Indiana Jones',
    score: 77,
  },
  {
    title: 'Star Trek',
    score: 94,
  },
  {
    title: 'Deadpool',
    score: 79,
  },
];

movies.forEach(function (movie) {
  console.log(`${movie.title} - ${movie.score}/100`);
});

Copy after login

Map

Map creates a new array with the results from calling a callback on every element in the array.

First, let's iterate over a basic array:

const lCase = ['jim', 'bob', 'abby'];
const uCase = lCase.map(function (t) {
  return t.toUpperCase();
});

console.log(lCase, uCase);

Copy after login

Now, let's iterate over an array of objects:

const movies = [
  {
    title: 'Indiana Jones',
    score: 77,
  },
  {
    title: 'Star Trek',
    score: 94,
  },
  {
    title: 'Deadpool',
    score: 79,
  },
];

const titles = movies.map(function (movie) {
  return movie.title;
});
console.log(titles);

Copy after login

Arrow Functions

We can write arrow functions as follows to simplify our syntax:

const square = (x) => {
  return x * x;
};

const sum = (x, y) => {
  return x + y;
};

const rollDie = () => {
  return Math.floor(Math.random() * 6) + 1;
};

console.log(square(2), sum(2, 3));
console.log(rollDie());

Copy after login

We can also re-visit the movie example and use an arrow function:

const movies = [
  {
    title: 'Indiana Jones',
    score: 77,
  },
  {
    title: 'Star Trek',
    score: 94,
  },
  {
    title: 'Deadpool',
    score: 79,
  },
];

const newMovies = movies.map((movie) => {
  return `${movie.title} = ${movie.score} / 10`;
});

Copy after login

Implicit Returns

Implicit returns are another shorthand way of writing functions, some examples include:

const rollDie = () => Math.floor(Math.random() * 6) + 1;
const isEven = (num) => num % 2 === 0;

Copy after login

Set Timeout

Runs the callback after x milliseconds

console.log('Apears 1st');
// takes callback, then milliseconds
setTimeout(() => {
  console.log('Apears 3rd');
}, 3000);

console.log('Apears 2nd');

Copy after login

Set Interval

Repeats the callback every x milliseconds

setInterval(() => {
  console.log(Math.random());
}, 2000);

Copy after login

If we want to eventually make the callback stop, we can do this:

const id = setInterval(() => {
  console.log(Math.random());
}, 2000);

clearInterval(id); // stops the loop

Copy after login

Filter Method

Filter creates a new array with the elements that pass return true within the callback function

const nums = [9, 8, 7, 6, 5, 4, 3, 2, 1];
const odds = nums.filter((n) => {
  return n % 2 === 1; // our callback returns true or false
  // if it returns true, n is added to the filtered array
});
// [9, 7, 5, 3, 1]

const smallNums = nums.filter((n) => n < 5); // [4, 3, 2, 1]

Copy after login

We can also filter objects in an array:

const movies = [
  {
    title: 'Indiana Jones',
    score: 77,
  },
  {
    title: 'Star Trek',
    score: 94,
  },
  {
    title: 'Deadpool',
    score: 79,
  },
];

const badMovies = movies.filter((movie) => {
  return movie.score < 80;
});

console.log(badMovies);

Copy after login

Some and Every

Some - tests if ANY of the elements in an array return true in the callback function. It returns a boolean

const firstWords = ['dog', 'jello', 'log', 'bag', 'wag', 'cupcake'];

words.some((word) => {
  return word.length > 4;
}); // true

words.some((word) => word[0] === 'Z'); // false
words.some((word) => word.includes('cake')); // true

Copy after login

Every - tests if ALL the elements in an array return true in the callback function. It returns a boolean

const words = ['dog', 'dig', 'log', 'bag', 'wag'];

words.every((word) => {
  return word.length === 3;
}); // true

words.every((word) => word[0] === 'd'); // false

words.every((w) => {
  return w[w.length - 1] === 'g';
}); // true

Copy after login

Reduce

The first (and potential only) argument in reduce a callback function.
- This function's first argument is a value that is subject to change as we iterate through each item.
- The second argument in this function is the value from an index of the array.
The optional second argument of reduce is the value that we want the callback function's first value to start at.

const prices = [9.99, 1.5, 19.99, 49.99, 30.5];

const total = prices.reduce((total, price) => {
  return total + price;
});

const min = prices.reduce((min, price) => {
  return Math.min(min, price);
});

console.log(min);

Copy after login

We can do this with an array of objects too:

const movies = [
  {
    title: 'Indiana Jones',
    score: 77,
  },
  {
    title: 'Star Trek',
    score: 94,
  },
  {
    title: 'Deadpool',
    score: 79,
  },
];

let bestMovie = movies.reduce((best, movie) => {
  if (movie.score > best.score) {
    return movie;
  }
  return best;
});

console.log(bestMovie);

Copy after login

We can also set the initial value of the reducer:

let nums = [1, 2, 3, 4, 5];

let maxPlus100 = nums.reduce((max, num) => {
  return (max += num);
}, 100);

console.log(maxPlus100); // 115

Copy after login

The above is the detailed content of JavaScript: forEach, map, Arrow Functions, setTimeout, setInterval, filter, some, every, and reduce. For more information, please follow other related articles on the PHP Chinese website!