Technology Sharing

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

In JavaScript, arrays are a very important data structure used to store multiple values. JS provides many built-in methods to operate arrays, making data processing simpler and more efficient. This article will introduce some commonly used JavaScript array methods in detail. These are not only commonly used methods in daily development, but also the focus of interviews. Now let's review them together~

1. push() and pop()

push()

The push() method is used to add one or more elements to the end of an array and return the length of the new array.

let arr = [1, 2, 3];
 let newLength = arr.push(4, 5); // newLength is 5, arr is [1, 2, 3, 4, 5]

parameter: One or more elements to add to the end of the array.

return value: The length of the new array.

pop()

The pop() method is used to remove an element from the end of an array and return the element.

let arr = [1, 2, 3, 4];
let removedElement = arr.pop(); // removedElement is 4, arr is [1, 2, 3]

parameter: none.

return value: The element to be deleted.

2. shift() and unshift()

shift()

The shift() method is used to remove an element from the beginning of an array and return that element.

let arr = [1, 2, 3, 4];
 
let removedElement = arr.shift(); // removedElement is 1, arr is [2, 3, 4]

parameter: none.

return value: The element to be deleted.

unshift()

The unshift() method is used to add one or more elements to the beginning of an array and return the length of the new array.

let arr = [2, 3, 4];
let newLength = arr.unshift(0, 1); // newLength is 5, arr is [0, 1, 2, 3, 4]

parameter: One or more elements to add to the beginning of the array.

return value: The length of the new array.

3. slice() and splice()

slice()

The slice() method is used to return a new array selected from the beginning to the end (excluding the end). The original array will not be modified.

let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1, 3); // newArr is [2, 3], arr is [1, 2, 3, 4, 5]

parameter:

begin(Optional): Start extracting from this index (inclusive).

end(Optional): End extraction before (excluding) this index.

return value:

A new array containing the begin arriveend(excluding end)Elements.

splice()

splice() Method is used to modify the contents of an array by deleting or replacing existing elements or adding new elements. The return value is the deleted element.

let arr = [1, 2, 3, 4, 5];
let removedElements = arr.splice(2, 2, 6, 7); // removedElements is [3, 4], arr is [1, 2, 6, 7, 5]

parameter:

start: Specifies the start position of the modification.

deleteCount(optional): Integer indicating the number of elements to remove.

item1, item2, ...(optional): The new element to be added to the array.

return value: An array containing the elements to be deleted.

4. concat()

concat() Method is used to merge two or more arrays. This method does not change the existing arrays but returns a new array.

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = arr1.concat(arr2, [7, 8]); // newArr is [1, 2, 3, 4, 5, 6, 7, 8]

parameter: The array or value to be merged into the current array.

return value: A new array.

5. forEach()

forEach() Method executes the supplied function once for each element of an array.

let arr = [1, 2, 3, 4];
arr.forEach((element, index) => {
  console.log(`Element at index ${index} is ${element}`);
});
// Output:
// Element at index 0 is 1
// Element at index 1 is 2
// Element at index 2 is 3
// Element at index 3 is 4

parameter: A function that accepts the current element, the element index, and the array itself as parameters.

return value: none.

6. map()

map() The method creates a new array whose result is that each element in the array is the return value of calling the supplied function once.

let arr = [1, 2, 3, 4];
let newArr = arr.map(element => element * 2); // newArr is [2, 4, 6, 8]

parameter: A function that accepts the current element, the element index, and the array itself as parameters.

return value: A new array.

7. filter()

filter() The method creates a new array containing all elements that pass the test implemented by the provided function.

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(element => element > 2); // newArr is [3, 4, 5]

parameter: A function that accepts the current element, the element index, and the array itself as parameters and returns a Boolean value.

return value: A new array.

8. reduce()

reduce() The method executes a reducer function that you provide for each element in the array (in ascending order), aggregating the results into a single return value.

let arr = [1, 2, 3, 4];
let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // sum is 10

parameter:reducer function that accepts the accumulator and the current value as arguments.

initialValue(optional): The value to pass as the first argument to the callback function when it is first called.

return value: The result of the accumulation.

9. find()

find() The method returns the value of the first element in the array that satisfies the provided test function. Otherwise, it returnsundefined。

let arr = [1, 2, 3, 4];
let foundElement = arr.find(element => element > 2); // foundElement is 3

parameter: A function that accepts the current element, the element index, and the array itself as parameters and returns a Boolean value.

return value: The first element value that passes the test.

10. includes()

includes() The method is used to determine whether an array contains a specified value, and if so, returnstrue, otherwise return false。

let arr = [1, 2, 3, 4];
let hasElement = arr.includes(3); // hasElement is true
let notIncluded = arr.includes(5); // notIncluded is false

parameter:

valueToFind: The element value to be found.

fromIndex(Optional): Start searching at this index.

return value: Boolean value.

By learning these commonly used JavaScript array methods, we can process the data passed by the backend more efficiently and write more concise and readable code. I hope this article is helpful to you!