Exploring JavaScript Array Methods with Examples

JavaScript arrays are versatile and offer a wide range of built-in methods to manipulate, iterate, and manage data efficiently. Understanding these methods is crucial for effective programming. Let's delve into some commonly used array methods with practical examples.

Array Methods

• push(): Adds one or more elements to the end of an array and returns the new length of the array.

let fruits = ['apple', 'banana'];
fruits.push('orange');  // returns 3 (new length of array)
console.log(fruits);    // Output: ['apple', 'banana', 'orange']

• pop(): Removes the last element from an array and returns that element.

let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop();  // returns 'orange'
console.log(fruits);           // Output: ['apple', 'banana']
console.log(lastFruit);        // Output: 'orange'

• shift(): Removes the first element from an array and returns that removed element.

let fruits = ['apple', 'banana', 'orange'];
let firstFruit = fruits.shift();  // returns 'apple'
console.log(fruits);              // Output: ['banana', 'orange']
console.log(firstFruit);          // Output: 'apple'

• unshift(): Adds one or more elements to the beginning of an array and returns the new length of the array.

let fruits = ['banana', 'orange'];
fruits.unshift('apple');  // returns 3 (new length of array)
console.log(fruits);      // Output: ['apple', 'banana', 'orange']

• forEach(): Executes a provided function once for each array element.

let numbers = [1, 2, 3];
numbers.forEach(function(num) {
  console.log(num * 2);  // Output: 2, 4, 6
});

• map(): Creates a new array populated with the results of calling a provided function on every element in the calling array.

let numbers = [1, 2, 3];
let doubled = numbers.map(function(num) {
  return num * 2;
});
console.log(doubled);  // Output: [2, 4, 6]

• filter(): Creates a new array with all elements that pass the test implemented by the provided function.

let numbers = [1, 2, 3, 4, 5];
let evens = numbers.filter(function(num) {
  return num % 2 === 0;
});
console.log(evens);  // Output: [2, 4]

• find(): Returns the first element in the array that satisfies the provided testing function.

let numbers = [10, 20, 30, 40, 50];
let found = numbers.find(function(num) {
  return num > 25;
});
console.log(found);  // Output: 30

• reduce(): Applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(acc, current) {
  return acc + current;
}, 0);
console.log(sum);  // Output: 15 (1 + 2 + 3 + 4 + 5)

• indexOf(): Returns the first index at which a given element can be found in the array, or -1 if it is not present.

let fruits = ['apple', 'banana', 'orange', 'apple'];
let index = fruits.indexOf('apple');  // returns 0
console.log(index);                   // Output: 0

• lastIndexOf(): Returns the last index at which a given element can be found in the array, or -1 if it is not present.

let fruits = ['apple', 'banana', 'orange', 'apple'];
let lastIndex = fruits.lastIndexOf('apple');  // returns 3
console.log(lastIndex);                      // Output: 3

These array methods are fundamental tools for manipulating data structures in JavaScript efficiently. By mastering these methods, you'll gain a powerful toolkit for handling arrays in various programming scenarios.

The above is the detailed content of Exploring JavaScript Array Methods with Examples. For more information, please follow other related articles on the PHP Chinese website!