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"

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"]

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"]

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"]

'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"]

'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"]

'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"]

'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"]

'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"]

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]

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];

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
}

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;

'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];

'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]

'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

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