|
| 1 | +JavaScript array methods can be categorized into two groups: |
| 2 | +- Mutating methods: These are the methods that directly modify the original array. |
| 3 | +- Non-mutating methods: These methods return a new array without altering the |
| 4 | +original one. |
| 5 | + |
| 6 | +There are 9 methods in total that mutate the arrays, |
| 7 | +```javascript |
| 8 | +let arr1 = [1, 2, 3]; |
| 9 | +// Syntax: array.push(element1, element2, ..., elementN) |
| 10 | +let newLength1 = arr1.push(4, 5); // arr1 is now [1, 2, 3, 4, 5], newLength1 is 5 |
| 11 | +``` |
| 12 | +the end of the array and returns the new length. |
| 13 | +2. `pop`: Removes the last element from the |
| 14 | +array and returns that element. |
| 15 | +```javascript |
| 16 | +let arr2 = [1, 2, 3]; |
| 17 | +let lastElement = arr2.pop(); // arr2 is [1, 2], lastElement is 3 |
| 18 | +``` |
| 19 | + |
| 20 | +3. `unshift`: Adds one or more elements to the beginning of |
| 21 | +the array and returns the new length. |
| 22 | +```javascript |
| 23 | +let arr3 = [2, 3]; |
| 24 | +let newLength3 = arr3.unshift(1); // arr3 is [1, 2, 3], newLength3 is 3 |
| 25 | +``` |
| 26 | +4. `shift`: Removes the first element from the array |
| 27 | +and returns that element. |
| 28 | +```javascript |
| 29 | +let arr4 = [1, 2, 3]; |
| 30 | +let firstElement = arr4.shift(); // arr4 is [2, 3], firstElement is 1 |
| 31 | +``` |
| 32 | +5. `splice`: Adds or removes elements from the array at a specific |
| 33 | +index position. |
| 34 | +```javascript |
| 35 | +let arr5 = [1, 2, 3, 4, 5]; |
| 36 | +// Remove 2 elements starting from index 1 |
| 37 | +let removed = arr5.splice(1, 2); // arr5 is [1, 4, 5], removed is [2, 3] |
| 38 | +// Add elements at index 1 |
| 39 | +arr5.splice(1, 0, 2, 3); // arr5 is [1, 2, 3, 4, 5] |
| 40 | +``` |
| 41 | +6. `sort`: Sorts the elements of the array in-place based on a given sorting |
| 42 | +criteria. |
| 43 | +```javascript |
| 44 | +let arr6 = [3, 1, 4, 2]; |
| 45 | +arr6.sort(); // arr6 is [1, 2, 3, 4] (default string sort) |
| 46 | +arr6.sort((a, b) => b - a); // arr6 is [4, 3, 2, 1] (numeric sort) |
| 47 | +``` |
| 48 | +7. `reverse`: Reverses the order of elements in the given array. |
| 49 | +```javascript |
| 50 | +let arr7 = [1, 2, 3]; |
| 51 | +arr7.reverse(); // arr7 is [3, 2, 1] |
| 52 | +``` |
| 53 | +8. `fill`: Fills all |
| 54 | +elements of the array with a specific value. |
| 55 | +```javascript |
| 56 | +let arr8 = [1, 2, 3]; |
| 57 | +arr8.fill(0); // arr8 is [0, 0, 0] |
| 58 | +// Fill with 5 from index 1 to 3 (exclusive) |
| 59 | +let arr8b = [1, 2, 3, 4]; |
| 60 | +arr8b.fill(5, 1, 3); // arr8b is [1, 5, 5, 4] |
| 61 | +``` |
| 62 | +9. `copyWithin`: Copies a sequence of elements |
| 63 | +within the array to a specified target index in the same array |
| 64 | +```javascript |
| 65 | +let arr9 = [1, 2, 3, 4, 5]; |
| 66 | +// Copy elements at index 3 to index 0 |
| 67 | +arr9.copyWithin(0, 3, 4); // arr9 is [4, 2, 3, 4, 5] |
| 68 | +``` |
| 69 | + |
| 70 | + |
| 71 | +Non-mutating methods: These methods return a new array without altering the |
| 72 | +original one. |
| 73 | +There are many non-mutating methods, including: |
| 74 | +1. `concat`: Merges two or more arrays and returns a new array. |
| 75 | +```javascript |
| 76 | +let arrA = [1, 2]; |
| 77 | +let arrB = [3, 4]; |
| 78 | +let merged = arrA.concat(arrB); // merged is [1, 2, 3, 4] |
| 79 | +``` |
| 80 | +2. `slice`: Returns a shallow copy of a portion of an array into a new array object. |
| 81 | +```javascript |
| 82 | +let arrC = [1, 2, 3, 4, 5]; |
| 83 | +let sliced = arrC.slice(1, 3); // sliced is [2, 3] |
| 84 | +``` |
| 85 | +3. `map`: Creates a new array populated with the results of calling a provided function on every element in the calling array. |
| 86 | +```javascript |
| 87 | +let arrD = [1, 2, 3]; |
| 88 | +let doubled = arrD.map(x => x * 2); // doubled is [2, 4, 6] |
| 89 | +``` |
| 90 | +4. `filter`: Creates a new array with all elements that pass the test implemented by the provided function. |
| 91 | +```javascript |
| 92 | +let arrE = [1, 2, 3, 4]; |
| 93 | +let evens = arrE.filter(x => x % 2 === 0); // evens is [2, 4] |
| 94 | +``` |
| 95 | +5. `reduce`: Executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value. |
| 96 | +```javascript |
| 97 | +let arrF = [1, 2, 3, 4]; |
| 98 | +let sum = arrF.reduce((acc, curr) => acc + curr, 0); // sum is 10 |
| 99 | +``` |
| 100 | +6. `forEach`: Executes a provided function once for each array element. It does not return a new array; its return value is `undefined`. |
| 101 | +```javascript |
| 102 | +let arrG = [1, 2, 3]; |
| 103 | +arrG.forEach(x => console.log(x)); // Logs 1, 2, 3 |
| 104 | +``` |
| 105 | +7. `join`: Creates and returns a new string by concatenating all of the elements in an array. |
| 106 | +```javascript |
| 107 | +let arrH = ['a', 'b', 'c']; |
| 108 | +let str = arrH.join('-'); // str is "a-b-c" |
| 109 | +``` |
| 110 | +8. `indexOf`/`lastIndexOf`: Returns the first/last index at which a given element can be found in the array, or -1 if it is not present. |
| 111 | +```javascript |
| 112 | +let arrI = [1, 2, 3, 2, 1]; |
| 113 | +let firstIndex = arrI.indexOf(2); // 1 |
| 114 | +let lastIndex = arrI.lastIndexOf(2); // 3 |
| 115 | +``` |
| 116 | +9. `includes`: Determines whether an array includes a certain value among its entries, returning `true` or `false`. |
| 117 | +```javascript |
| 118 | +let arrJ = [1, 2, 3]; |
| 119 | +let hasTwo = arrJ.includes(2); // true |
| 120 | +let hasFour = arrJ.includes(4); // false |
| 121 | +``` |
| 122 | +10. `find`: Returns the value of the first element in the provided array that satisfies the provided testing function. |
| 123 | +```javascript |
| 124 | +let arrK = [5, 12, 8, 130, 44]; |
| 125 | +let found = arrK.find(element => element > 10); // found is 12 |
| 126 | +``` |
| 127 | +11. `findIndex`: Returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1. |
| 128 | +```javascript |
| 129 | +let arrL = [5, 12, 8, 130, 44]; |
| 130 | +let foundIndex = arrL.findIndex(element => element > 13); // foundIndex is 3 |
| 131 | +``` |
| 132 | +12. `some`: Tests whether at least one element in the array passes the test implemented by the provided function. |
| 133 | +```javascript |
| 134 | +let arrM = [1, 2, 3, 4, 5]; |
| 135 | +let even = arrM.some(element => element % 2 === 0); // true |
| 136 | +``` |
| 137 | +13. `every`: Tests whether all elements in the array pass the test implemented by the provided function. |
| 138 | +```javascript |
| 139 | +let arrN = [1, 30, 39, 29, 10, 13]; |
| 140 | +let allBelow40 = arrN.every(element => element < 40); // true |
| 141 | +``` |
| 142 | +14. `flat`: Creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. |
| 143 | +```javascript |
| 144 | +let arrO = [0, 1, 2, [3, 4]]; |
| 145 | +let flattened = arrO.flat(); // flattened is [0, 1, 2, 3, 4] |
| 146 | +``` |
| 147 | +15. `flatMap`: Returns a new array formed by applying a given callback function to each element of the array, and then flattening the result by one level. |
| 148 | +```javascript |
| 149 | +let arrP = [1, 2, 3, 4]; |
| 150 | +let flatMapped = arrP.flatMap(x => [x, x * 2]); // flatMapped is [1, 2, 2, 4, 3, 6, 4, 8] |
| 151 | +``` |
| 152 | +16. `at`: Takes an integer value and returns the item at that index, allowing for positive and negative integers. |
| 153 | +```javascript |
| 154 | +let arrQ = [5, 12, 8, 130, 44]; |
| 155 | +let index2 = arrQ.at(2); // 8 |
| 156 | +let lastItem = arrQ.at(-1); // 44 |
| 157 | +``` |
| 158 | +17. `reduceRight`: Applies a function against an accumulator and each value of the array (from right-to-left) to reduce it to a single value. |
| 159 | +```javascript |
| 160 | +let arrR = ['1', '2', '3', '4', '5']; |
| 161 | +let rightReduced = arrR.reduceRight((acc, curr) => acc + curr); // "54321" |
| 162 | +``` |
| 163 | + |
| 164 | +### Static Methods |
| 165 | + |
| 166 | +1. `Array.from`: Creates a new, shallow-copied Array instance from an iterable or array-like object. |
| 167 | +```javascript |
| 168 | +let fromString = Array.from('foo'); // ["f", "o", "o"] |
| 169 | +``` |
| 170 | +2. `Array.of`: Creates a new Array instance from a variable number of arguments, regardless of number or type of the arguments. |
| 171 | +```javascript |
| 172 | +let ofArray = Array.of(7); // [7] |
| 173 | +let ofArray2 = Array.of(1, 2, 3); // [1, 2, 3] |
| 174 | +``` |
| 175 | +3. `Array.isArray`: Determines whether the passed value is an Array. |
| 176 | +```javascript |
| 177 | +let isArr = Array.isArray([1, 2, 3]); // true |
| 178 | +let isNotArr = Array.isArray({foo: 123}); // false |
| 179 | +``` |
0 commit comments