- Introduction to Arrays
- Array Declaration
- Array Methods
- Array Properties
- Array Destructuring
- Array Spread Operator
- Array Iteration with
for...of
Arrays are a fundamental data structure in JavaScript used to store multiple values in a single variable. With the introduction of ES6, JavaScript added several new features and methods to make array manipulation more powerful and flexible.
Arrays can be declared using array literals or the Array constructor.
javascript const arr1 = [1, 2, 3]; // Array literal const arr2 = new Array(1, 2, 3); // Array constructor
console.log(arr1); // Output: [1, 2, 3]Mutator methods modify the original array.
| Method | Description | Example |
|---|---|---|
push() |
Adds one or more elements to the end of an array | arr.push(4); // [1, 2, 3, 4] |
pop() |
Removes the last element from an array | arr.pop(); // [1, 2, 3] |
shift() |
Removes the first element from an array | arr.shift(); // [2, 3] |
unshift() |
Adds one or more elements to the beginning of an array | arr.unshift(0); // [0, 1, 2, 3] |
splice() |
Adds/Removes elements from an array | arr.splice(1, 1, 5); // [1, 5, 3] |
reverse() |
Reverses the order of the elements in an array | arr.reverse(); // [3, 2, 1] |
sort() |
Sorts the elements of an array | arr.sort(); // [1, 2, 3] |
Accessor methods return a new array or value based on the original array without modifying it.
| Method | Description | Example |
|---|---|---|
concat() |
Joins two or more arrays and returns a new array | const newArr = arr1.concat(arr2); // [1, 2, 3, 1, 2, 3] |
join() |
Joins all elements of an array into a string | const str = arr.join('-'); // '1-2-3' |
slice() |
Returns a shallow copy of a portion of an array | const subArr = arr.slice(1, 3); // [2, 3] |
indexOf() |
Returns the index of the first occurrence of a value | const index = arr.indexOf(2); // 1 |
lastIndexOf() |
Returns the index of the last occurrence of a value | const lastIndex = arr.lastIndexOf(2); // 1 |
includes() |
Determines whether an array includes a certain value | const includes = arr.includes(2); // true |
find() |
Returns the value of the first element that satisfies a condition | const found = arr.find(el => el > 1); // 2 |
findIndex() |
Returns the index of the first element that satisfies a condition | const foundIndex = arr.findIndex(el => el > 1); // 1 |
Iteration methods execute a function for each element in the array.
| Method | Description | Example |
|---|---|---|
forEach() |
Executes a function for each array element | arr.forEach(el => console.log(el)); |
map() |
Creates a new array with the results of calling a function for every element | const newArr = arr.map(el => el * 2); // [2, 4, 6] |
filter() |
Creates a new array with all elements that pass a test | const filteredArr = arr.filter(el => el > 1); // [2, 3] |
reduce() |
Reduces the array to a single value | const sum = arr.reduce((acc, el) => acc + el, 0); // 6 |
some() |
Tests whether at least one element passes a condition | const hasEven = arr.some(el => el % 2 === 0); // true |
every() |
Tests whether all elements pass a condition | const allEven = arr.every(el => el % 2 === 0); // false |
ES6 introduced several new array methods to enhance array manipulation.
| Method | Description | Example |
|---|---|---|
Array.from() |
Creates a new array from an array-like or iterable object | const newArr = Array.from('hello'); // ['h', 'e', 'l', 'l', 'o'] |
Array.of() |
Creates a new array with a variable number of arguments | const newArr = Array.of(1, 2, 3); // [1, 2, 3] |
fill() |
Fills all the elements of an array with a static value | arr.fill(0); // [0, 0, 0] |
copyWithin() |
Copies a sequence of array elements within the array | arr.copyWithin(0, 2); // [3, 2, 3] |
flat() |
Creates a new array with all sub-array elements concatenated | const newArr = [1, [2, 3]].flat(); // [1, 2, 3] |
flatMap() |
Maps each element using a mapping function, then flattens the result | const newArr = arr.flatMap(el => [el, el * 2]); // [1, 2, 2, 4, 3, 6] |
entries() |
Returns a new Array Iterator object with key/value pairs | const iterator = arr.entries(); |
keys() |
Returns a new Array Iterator object with the keys of the array | const iterator = arr.keys(); |
values() |
Returns a new Array Iterator object with the values of the array | const iterator = arr.values(); |
| Property | Description | Example |
|---|---|---|
length |
Returns the number of elements in an array | const len = arr.length; // 3 |
Array destructuring allows you to unpack values from arrays into distinct variables.
const [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3The spread operator (...) allows an iterable (like an array) to be expanded in places where zero or more arguments are expected.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]The for...of loop iterates over iterable objects, including arrays.
for (const el of arr) {
console.log(el);
}Tip
Use array destructuring and the spread operator for concise and readable code. Leverage ES6+ array methods like map, filter, and reduce for functional programming. Always consider the performance implications of array operations, especially when dealing with large arrays.
[EOF]