Skip to content

Commit cf2f9ab

Browse files
author
Mahrous-Gamal
committed
first commit
0 parents  commit cf2f9ab

2 files changed

Lines changed: 392 additions & 0 deletions

File tree

Javascript Array Methods.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Mahrous Gamal

README.md

Lines changed: 391 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,391 @@
1+
# Javascript Array Methods
2+
3+
This document contains all the basic array methods of JavaScript, their definitions, and usage examples.
4+
5+
# Array Methods
6+
7+
### concant()
8+
9+
It is used to concatenate two or more arrays. It returns a new array.
10+
11+
```jsx
12+
const array1 = ["a", "b", "c"];
13+
const array2 = ["d", "e", "f"];
14+
15+
const array3 = array1.concat(array2);
16+
17+
console.log(array3); // Array ["a", "b", "c", "d", "e", "f"]
18+
```
19+
20+
### copyWithin()
21+
It copies a section of an array to another array, overwriting it without changing the length of the copied array.
22+
23+
```jsx
24+
const array1 = ["a", "b", "c", "d", "e"];
25+
26+
console.log(array1.copyWithin(0, 3, 4)); // Array ["d", "b", "c", "d", "e"]
27+
28+
console.log(array1.copyWithin(1, 3)); // Array ["d", "d", "e", "d", "e"]
29+
30+
```
31+
32+
### every()
33+
It returns a boolean value depending on whether all elements in the array satisfy the specified condition.
34+
35+
```jsx
36+
const array1 = [1, 30, 39, 29, 10, 13];
37+
console.log(array1.every((eleman) => eleman !== 0)); //true
38+
39+
```
40+
41+
### filter()
42+
It returns a new array containing copies of the elements in the given array that satisfy the specified conditions.
43+
44+
```jsx
45+
const words = [
46+
"spray",
47+
"limit",
48+
"elite",
49+
"exuberant",
50+
"destruction",
51+
"present",
52+
];
53+
54+
const result = words.filter((word) => word.length > 6);
55+
56+
console.log(result); // Array ["exuberant", "destruction", "present"]
57+
```
58+
59+
### forEach()
60+
This method is used to invoke a specified function for each element in an array.
61+
62+
```jsx
63+
const array1 = ["a", "b", "c"];
64+
65+
array1.forEach((element) => console.log(element));
66+
67+
array1.forEach((element, index) => console.log(index + " : " + element));
68+
```
69+
70+
### indexOf()
71+
72+
It returns the index number of the element in the array, or -1 if it is not found.
73+
74+
```jsx
75+
const beasts = ["ant", "bison", "camel", "duck", "bison"];
76+
77+
console.log(beasts.indexOf("bison")); // 1
78+
79+
console.log(beasts.indexOf("bison", 2)); // 4
80+
81+
console.log(beasts.indexOf("giraffe")); // -1
82+
```
83+
84+
### lastIndexOf()
85+
It returns the last index of the searched element in the array. It is useful in arrays with multiple occurrences of the same element.
86+
87+
```jsx
88+
const animals = ["Dodo", "Tiger", "Penguin", "Dodo"];
89+
90+
console.log(animals.lastIndexOf("Dodo")); // 3
91+
92+
console.log(animals.lastIndexOf("Tiger")); // 1
93+
```
94+
95+
### map()
96+
97+
Its purpose is to iterate over each element in the array, performing a specific operation on each one to generate a new array.
98+
99+
```jsx
100+
const array1 = [1, 4, 9, 16];
101+
102+
const array2 = array1.map((x) => x * 2);
103+
104+
console.log(array2); // Array [2, 8, 18, 32]
105+
```
106+
107+
### reduce()
108+
It is an array method used to loop through all elements in an array and obtain a result by concatenating them or summing them up.
109+
110+
```jsx
111+
const array1 = [1, 2, 3, 4];
112+
113+
const initialValue = 0; // initial value
114+
115+
const sum = array1.reduce(
116+
(previousValue, currentValue) => previousValue + currentValue,
117+
initialValue
118+
);
119+
120+
//return 0+1+2+3+4 = 10
121+
122+
```
123+
We can assign any value we want as the initial value. If there is no previous value, it accepts the value of the first element in the array as the initial value. (here the first element is 1)
124+
125+
```jsx
126+
const array1 = [1, 2, 3, 4];
127+
128+
const sum = array1.reduce((prev, current) => {
129+
return prev + current;
130+
}, 2);
131+
132+
console.log(sum); // 2 + 1 + 2 + 3 + 4 = 12
133+
```
134+
135+
### reduceRight()
136+
It works the same as reduce, but it moves from the end to the beginning of the array.
137+
138+
```jsx
139+
const array1 = [0, 1, 2, 3, 4];
140+
141+
let sum = array1.reduceRight((prev, current) => prev + " - " + current);
142+
143+
console.log(sum); // 4 - 3 - 2 - 1 - 0;
144+
```
145+
146+
### reverse()
147+
It reverses the elements of an array in reverse order based on their indices.
148+
149+
```jsx
150+
const array1 = ["one", "two", "three"];
151+
152+
const reversed = array1.reverse();
153+
154+
console.log(reversed); // ["three", "two", "one"]
155+
156+
```
157+
158+
### slice()
159+
160+
It returns a copy of a portion of an array within a specified range of indexes. It does not modify the original array. The second parameter, which represents the end index, is not included in the slice; that is, slice[0,2] method returns the values with indexes 0 and 1.
161+
162+
```jsx
163+
const animals = ["ant", "bison", "camel", "duck", "elephant"];
164+
165+
console.log(animals.slice(2)); // Array ["camel", "duck", "elephant"]
166+
167+
console.log(animals.slice(2, 4)); // Array ["camel", "duck"]
168+
169+
console.log(animals.slice(1, 5)); // Array ["bison", "camel", "duck", "elephant"]
170+
171+
console.log(animals.slice(-2)); // Array ["duck", "elephant"]
172+
173+
console.log(animals.slice(2, -1)); // Array ["camel", "duck"]
174+
```
175+
176+
### some()
177+
It is used to return true if the specified condition is satisfied at least once in the array, otherwise it returns false.
178+
179+
```jsx
180+
[0, 1, 2, 3, 4].some((element) => element > 2) //return true
181+
[0, 1, 2, 3, 4].some((element) => element % 2 === 0) //return true
182+
[0, 1, 2, 3, 4].some((element) => element > 5); //return false
183+
184+
```
185+
186+
### sort()
187+
188+
It sorts the elements of the array in ascending order. However, since it sorts based on UTF-16 code unit values, it may not always display the expected results. It modifies the original array.
189+
190+
```jsx
191+
const names = ["Mahrous", "Ali", "Taha", "Soha"];
192+
names.sort();
193+
console.log(names); // return ["Ali", "Mahrous", "Soha", "Taha"]
194+
```
195+
196+
**IMPORTANT:** You can achieve the correct sorting by passing a comparison function when dealing with numbers.
197+
198+
```jsx
199+
let numbers = [40, 100, 1, 5, 25, 10];
200+
numbers.sort(function (a, b) {
201+
return a - b;
202+
});
203+
204+
console.log(numbers); // [1, 5, 10, 25, 40, 100]
205+
```
206+
207+
### splice()
208+
It is an array method used to add, remove, or change elements in arrays. This method modifies the array and returns the modified elements as a new array.
209+
210+
```jsx
211+
array.splice(start, deleteCount, item1, item2, ...);
212+
```
213+
214+
Parametreler:
215+
- **`start`**: The starting index in the array where changes will be made. Adding or removing operations start from this index.
216+
- **`deleteCount`**: The number of elements to be deleted starting from the start index. If 0, no elements are deleted, only additions are made.
217+
- **`item1, item2, ...`**: New elements to be added. These parameters are optional.
218+
219+
```jsx
220+
let numbers = [10, 20, 30, 40, 50];
221+
numbers.splice(2, 2);
222+
223+
console.log(numbers); // [10, 20, 50]
224+
```
225+
### entries()
226+
227+
This is a method of an array or an object that returns an array consisting of key-value pairs for each element in the array or object. It returns a new array.
228+
229+
```jsx
230+
const fruits = ["apple", "banana", "orange"];
231+
232+
const entries = fruits.entries();
233+
234+
for (const entry of entries) {
235+
console.log(entry);
236+
}
237+
// [0, 'apple']
238+
// [1, 'banana']
239+
// [2, 'orange']
240+
```
241+
242+
### fill()
243+
244+
It replaces the elements in an array with the given value and returns the modified array. It does not add more elements than the length of the array. The fill() function syntax is fill(value, start, end).
245+
246+
```jsx
247+
const array1 = [1, 2, 3, 4];
248+
249+
console.log(array1.fill(0, 2, 4)); // Array [1, 2, 0, 0]
250+
251+
console.log(array1.fill(5, 1)); // Array [1, 5, 5, 5]
252+
253+
console.log(array1.fill(6)); //Array [6, 6, 6, 6]
254+
```
255+
256+
### find()
257+
258+
It returns the first element in the array that satisfies the given condition. If no element satisfies the condition, it returns the value undefined.
259+
260+
```jsx
261+
const array1 = [5, 12, 8, 130, 44];
262+
263+
const found = array1.find((element) => element > 10);
264+
265+
console.log(found); // 12
266+
```
267+
268+
### findIndex()
269+
It returns the index number of the first element in the array that satisfies the given condition. If there is no element that satisfies the condition, it returns `-1`.
270+
271+
```jsx
272+
const array1 = [5, 12, 8, 130, 44];
273+
274+
const isLargeNumber = (element) => element > 13;
275+
276+
console.log(array1.findIndex(isLargeNumber)); // 3
277+
```
278+
279+
### findLast()
280+
It returns the first element in the array, starting from the end and moving towards the beginning, that satisfies the given condition. If no such element is found, it returns `undefined`.
281+
282+
```jsx
283+
const array1 = [5, 12, 50, 130, 44];
284+
285+
const found = array1.find((element) => element > 45);
286+
287+
console.log(found); // 130
288+
```
289+
290+
### findLastIndex()
291+
It returns the index number of the first element in the array, starting from the end and moving towards the beginning, that satisfies the given condition. If no such element is found, it returns `-1`.
292+
293+
```jsx
294+
const array1 = [5, 12, 50, 130, 44];
295+
296+
const isLargeNumber = (element) => element > 45;
297+
298+
console.log(array1.findLastIndex(isLargeNumber)); // 3
299+
```
300+
301+
### includes()
302+
303+
It checks if a specific value exists in an array and returns true or false.
304+
305+
```jsx
306+
const pets = ["cat", "dog", "bat", 12];
307+
308+
console.log(pets.includes(12)); //true
309+
console.log(pets.includes("a")); //false
310+
console.log([0, 1, , 2].includes(undefined)); //true
311+
```
312+
313+
### join()
314+
315+
It returns a new string by concatenating the elements of an array.
316+
317+
```jsx
318+
const elements = ["Fire", "Air", "Water"];
319+
320+
console.log(elements.join()); // "Fire,Air,Water"
321+
console.log(elements.join("")); // "FireAirWater"
322+
console.log(elements.join("-")); // "Fire-Air-Water"
323+
console.log([1, undefined, 3].join()); // '1,,3'
324+
```
325+
326+
### keys()
327+
It returns the index number for each element in the array. It's more useful when used with objects.
328+
329+
```jsx
330+
const array1 = ["a", "b", , "c"];
331+
const ite = Object.keys(array1);
332+
console.log(ite); // ["0","1","3"]
333+
334+
```
335+
336+
### toLocaleString()
337+
It returns the locale-sensitive string representation of a date.
338+
339+
```jsx
340+
let date = new Date();
341+
342+
console.log(date); //return Tue Apr 30 2024 05:32:20 GMT+0300 (Eastern European Summer Time)
343+
console.log(date.toLocaleString("tr-TR")); //return 30.04.2024 05:32:20
344+
```
345+
346+
### pop()
347+
348+
This method removes the last element from the array and returns the removed element. It modifies the array.
349+
350+
```jsx
351+
const myArray = [1, 2, 3, 4, 5];
352+
myArray.pop();
353+
console.log(myArray); // [1, 2, 3, 4]
354+
355+
const emptyArray = [];
356+
console.log(emptyArray.pop()); // undefined
357+
```
358+
359+
### shift()
360+
361+
This method removes the first element from the array and returns the removed element. It modifies the array
362+
363+
```jsx
364+
const myArray = [1, 2, 3, 4, 5];
365+
366+
myArray.shift();
367+
console.log(myArray); // [2, 3, 4, 5]
368+
```
369+
370+
### push()
371+
This method adds one or more elements to the end of the array. It modifies the array and returns its new length.
372+
373+
```jsx
374+
const myArray = [1, 2, 3, 4];
375+
myArray.push(5);
376+
console.log(myArray); // [1, 2, 3, 4, 5]
377+
378+
const myArray = [1, 2, 3, 4];
379+
const additionalItems = [5, 6];
380+
381+
myArray.push(...additionalItems);
382+
console.log(myArray); // [1, 2, 3, 4, 5, 6]
383+
```
384+
385+
### unshift()
386+
This method adds new element(s) to the array, shifting existing elements to make space at the beginning of the array. It modifies the array.
387+
388+
```jsx
389+
const myArray = [3, 4, 5];
390+
myArray.unshift(1, 2); // [1, 2, 3, 4, 5]
391+
```

0 commit comments

Comments
 (0)