Javascript - Array methods

Detailed explanation of JavaScript array methods

This article will delve into the commonly used array methods in JavaScript, covering elements addition and deletion, search, conversion, sorting, combination and iteration, etc., and provide code examples to help you better understand and apply these methods.

1. Adding and deleting elements

• push(): Add elements to the end of the array.

<code class="language-javascript">let fruits = ["apple", "banana"];
fruits.push("cherry");
console.log(fruits); // Output: ["apple", "banana", "cherry"]</code>

• pop(): Delete the last element of the array.

<code class="language-javascript">fruits.pop();
console.log(fruits); // Output: ["apple", "banana"]</code>

• unshift(): Add elements to the beginning of the array.

<code class="language-javascript">fruits.unshift("mango");
console.log(fruits); // Output: ["mango", "apple", "banana"]</code>

• shift(): Delete the beginning element of the array.

<code class="language-javascript">fruits.shift();
console.log(fruits); // Output: ["apple", "banana"]</code>

2. Find and search

• indexOf(): Returns the index of the first occurrence of the specified element in the array.

<code class="language-javascript">let numbers = [10, 20, 30, 40];
console.log(numbers.indexOf(20)); // Output: 1</code>

• includes(): Check whether the array contains the specified element.

<code class="language-javascript">console.log(numbers.includes(30)); // Output: true
console.log(numbers.includes(50)); // Output: false</code>

3. Array conversion

• map(): Create a new array whose elements are the results of processing the original array elements through the callback function.

<code class="language-javascript">let numbers = [1, 2, 3];
let squares = numbers.map(num => num * num);
console.log(squares); // Output: [1, 4, 9]</code>

• filter(): Create a new array whose elements are the elements in the original array that meet the specified conditions.

<code class="language-javascript">let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2]</code>

• reduce(): Accumulate array elements into a value.

<code class="language-javascript">let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // Output: 6</code>

4. Sorting

• sort(): Sort the array (default alphabetically). Numbers require a custom comparator.

<code class="language-javascript">let fruits = ["banana", "apple", "cherry"];
fruits.sort();
console.log(fruits); // Output: ["apple", "banana", "cherry"]

let numbers = [10, 5, 20];
numbers.sort((a, b) => a - b); // 升序
console.log(numbers); // Output: [5, 10, 20]</code>

• reverse(): Reverse the array.

<code class="language-javascript">fruits.reverse();
console.log(fruits); // Output: ["cherry", "banana", "apple"]</code>

5. Array combination and extraction

• concat(): Merge two or more arrays.

<code class="language-javascript">let arr1 = [1, 2];
let arr2 = [3, 4];
let combined = arr1.concat(arr2);
console.log(combined); // Output: [1, 2, 3, 4]</code>

• slice(): Extract part of the array without modifying the original array.

<code class="language-javascript">let numbers = [10, 20, 30, 40];
let sliced = numbers.slice(1, 3);
console.log(sliced); // Output: [20, 30]</code>

• splice(): Add or remove elements from the array.

<code class="language-javascript">let fruits = ["apple", "banana", "cherry"];
fruits.splice(1, 1, "orange", "grape");
console.log(fruits); // Output: ["apple", "orange", "grape", "cherry"]</code>

6. Array iteration

• forEach(): Execute a function for each element in the array.

<code class="language-javascript">let numbers = [1, 2, 3];
numbers.forEach(num => console.log(num * 2)); // Output: 2, 4, 6</code>

7. Other common methods

• join(): Convert an array to a string, using the specified delimiter.

<code class="language-javascript">let fruits = ["apple", "banana", "cherry"];
console.log(fruits.join(", ")); // Output: "apple, banana, cherry"</code>

• find(): Returns the first element that meets the specified condition.

<code class="language-javascript">let numbers = [10, 20, 30];
let result = numbers.find(num => num > 15);
console.log(result); // Output: 20</code>

• findIndex(): Returns the index of the first element that meets the specified condition.

<code class="language-javascript">console.log(numbers.findIndex(num => num > 15)); // Output: 1</code>

• flat(): Flatten nested arrays.

<code class="language-javascript">let nested = [1, [2, 3], [4, [5]]];
console.log(nested.flat(2)); // Output: [1, 2, 3, 4, 5]</code>

The above is the detailed content of Javascript - Array methods. For more information, please follow other related articles on the PHP Chinese website!