Home > Web Front-end > JS Tutorial > body text

JavaScript Arrays

王林
Release: 2024-08-02 09:35:47
Original
700 people have browsed it

JavaScript Arrays

What are arrays?

Arrays are a data structure that stores an ordered collection of elements. In JavaScript, arrays are classified as a special type of object and can store numbers, strings, objects, or other arrays. Elements in an array are enclosed in square brackets [ ] and use a zero-based index. A zero-based index means that the first element of an array will have an index of 0, the second element will have an index of 1, and so on.

const names = ["David", "Hannah", "William"];
console.log(names[0]); // returns the first element
// returns "David"
console.log(names[1]); // returns the second element
// returns "Hannah"
console.log(names[2]); // returns the third element
// returns "William"
Copy after login

How can arrays be modified or manipulated?

Index of the Element in an Array

A new element can be added to an array by assigning a value to an empty index.

names[3] = "Eric";
console.log(names);
// returns ["David", "Hannah", "William", "Eric"]
Copy after login

Elements in an array can be modified by reassigning a new value to an existing index.

names[1] = "Juniper";
console.log(names);
// returns ["David", "Juniper", "William", "Eric"]
Copy after login

Array Methods

Arrays can also be modified or manipulated with array methods such as 'push', 'pop', 'unshift', 'shift', 'slice', and 'splice'.

'push()'

The 'push' method takes one or more elements as arguments, adds the elements to the end of the array, and returns the length of the modified array.

names.push("Bob");
// returns 5 
console.log(names);
// returns ["David", "Juniper", "William", "Eric", "Bob"]
Copy after login

'pop()'

The 'pop' method takes no arguments, removes the last element of the array, and returns the removed element.

names.pop();
// returns "Bob"
console.log(names);
// returns ["David", "Juniper", "William", "Eric"]
Copy after login

'unshift()'

The 'unshift' method takes one or more elements as arguments, adds the elements to the beginning of the array, and returns the length of the modified array.

names.unshift("Jack", "Jane");
// returns 6
console.log(names);
// returns ["Jack", "Jane", "David", "Juniper", "William", "Eric"]
Copy after login

'shift()'

The 'shift' method takes no arguments, removes the first element of an array, and returns the removed element.

names.shift();
// returns "Jack"
console.log(names);
// returns ["Jane", "David", "Juniper", "William", "Eric"]
Copy after login

'slice()'

The 'slice' method takes two optional arguments (startIndex, endIndex) and returns a new array with the elements from the startIndex to, but not including, the endIndex of the original array.
If the startIndex is omitted, 0 is used.
If the endIndex is omitted, the array length is used. Negative index numbers can be used to count back from the end of the array.

names.slice(1, 3);
// returns ["David", "Juniper"]
names.slice(3);
// returns ["Juniper", "William", "Eric"]
names.slice(-2, 1);
// returns ["William", "Eric", "Jane"]
names.slice();
// returns ["Jane", "David", "Juniper", "William", "Eric"]
Copy after login

'splice()'

The 'splice' method takes one or more arguments (startIndex, deleteCount, element1, element2, ...) and returns a new array containing all the removed elements. From the startIndex, the deleteCount number of elements are deleted and the following element arguments will be added to the array beginning from the startIndex. If deleteCount is omitted, all elements from startIndex to the end of the array are deleted. If element arguments are omitted, no elements are added.

names.splice(0, 1, "Joe", "Alex"); 
// returns ["Jane"]
console.log(names);
// returns ["Joe", "Alex", "David", "Juniper", "William", "Eric"]
names.splice(1, 4);
// returns ["Alex", "David", "Juniper", "William"]
console.log(names);
// returns ["Joe", "Eric"]
names.splice(0, 0, "Bob", "Frank", "Maria")
// returns []
console.log(names);
// returns ["Joe", "Bob", "Frank", "Maria", "Eric"]
Copy after login

Since 'push', 'pop', 'unshift', 'shift, and 'splice' modify the original array, they are classified as destructive methods. The 'slice' method leaves the original array intact, so it is classified as non-destructive.

Spread Operator '...'

To add elements to or copy an array non-destructively, the spread operator can be used. The spread operator spreads an array into its elements.

const array = [1, 2, 3];
const newArray = [0, ...array, 4, 5];
// ...array spreads [1, 2, 3] into 1, 2, 3
console.log(newArray);
// returns [1, 2, 3, 4, 5]
Copy after login

Without the spread operator, the original array would be nested within the new array.

const array = [1, 2, 3];
const newArray = [0, array, 4, 5];
console.log(newArray);
// returns [0, [1, 2, 3], 4, 5];
Copy after login

Iterative Array Methods

Iterative array methods call a provided function on each element in an array and returns a value or new array. The provided function is called with three arguments: the current element, the index of the current element, and the original array that the method was called on.

function callbackFunction (currentElement, currentIndex, originalArray) {
// function body
}
Copy after login

Some examples of iterative array methods are: 'find', 'filter', 'map', and 'reduce'.

'find()'

The 'find' method takes a function as an argument and returns the first element in the array that satisfies the conditions of the function.

const numbers = [5, 10, 15, 20, 25];
numbers.find(number => number > 15);
// returns 20;
Copy after login

'filter()'

The 'filter' method is the similar to the 'find' method, but instead returns an array of all the elements that satisfy the conditions of the given function.

const numbers = [5, 10, 15, 20, 25];
numbers.filter(number => number > 15);
// returns [20, 25];
Copy after login

'map()'

The 'map' method returns a new array with the results of calling the function on each element in the original array.

const numbers = [1, 2, 3, 4, 5];
numbers.map(number => number * number);
// returns [1, 4, 9, 16, 25]
Copy after login

'reduce()'

The 'reduce' method takes a function and an initial value as an argument. The provided function receives four arguments: the accumulator, current value, current index, and the original array. The initial value provided is the value of the accumulator for the first element of the array. The result of the function for each element is used as the value of the accumulator for the next element in the array. If an initial value is not provided, the accumulator is set to the first element of the array and the callback function is called starting from the second element.

const numbers = [1, 2, 3, 4, 5]
numbers.reduce(((acc, number) => acc + number), 0);
// returns 15
Copy after login

The above is the detailed content of JavaScript Arrays. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template