Most useful Array method in JavaScript.
Rohit Azad
Senior Officer - Front-end Technology at Times Internet | Next.js, React.js, JavaScript Developer | Full Stack Developer
Array in JavaScript Create a array in javascript and how to used it.
In JavaScript, arrays aren't primitives but are instead Array objects with the following core characteristics.
JavaScript arrays are resizable and can contain a mix of different data types. (When those characteristics are undesirable, use typed arrays instead.)
How to create a new array in javascript.
const fruits = ['Apple', 'Orange', 'Banana'];
console.log(fruits); // ['Apple', 'Orange', 'Banana']
console.log(fruits.length) // 3
2. you can used to Array() constructor like this
const fruits_2 = new Array('Apple', 'Orange', 'Banana');
console.log(fruits_2); // ['Apple', 'Orange', 'Banana']
console.log(fruits_2.length) // 3
3. you can used to String.prototype.split() like this
const fruits_3 = 'Apple, Orange, Banana'.split(', ');
console.log(fruits_3); // ['Apple', 'Orange', 'Banana']
console.log(fruits_3.length) // 3
4. Create a string from an array with .join()
const fruits_4 = ['Apple', 'Orange', 'Banana'];
const fruitsString = fruits_4.join(', ');
console.log(fruitsString) // 'Apple, Orange, Banana'
5. Access an array item by its index
The index of an array's first element is always 0
const fruits_5 = ['Apple', 'Orange', 'Banana']
console.log(fruits_5[0]) // Apple
console.log(fruits_5[1]) // Orange
console.log(fruits_5[2]) // Banana
Using a index number larger than the array's length
returns 'undefined'.
fruits_5[9999] // undefined
6. Find the index of an item in an array
const fruits_6 = ['Apple', 'Orange', 'Banana']
console.log(fruits_6.indexOf('Banana')) // 2 it's give to you array of index
7. Check if an array contains a certain item
This example shows two ways to check if the fruits_7 array contains "Banana" and "Cherry": first with the includes() method, and then with the indexOf() method to test for an index value that's not -1
const fruits_7 = ['Apple', 'Orange', 'Banana']
fruits_7.includes('Banana'); // true
fruits_7.includes('Cherry'); // false
If indexOf() doesn't return -1, the array contains the given item.
fruits_7.indexOf('Banana') !== -1;
fruits_7.indexOf('Cherry') !== -1;
8. Append an item to an array push method to append a new string to the fruits_8 array
领英推荐
const fruits_8 = ['Apple', 'Orange', 'Banana'];
fruits_8.push('Cherry');
console.log(fruits_8.length) // 4
9. Remove the last item from an array
pop method to remove a string to the fruits_9 array
const fruits_9 = ['Apple', 'Orange', 'Banana'];
const removedItem = fruits_9.pop();
console.log(fruits_9.length) // 2
10. Remove multiple items from the end of an array
const fruits_10 = ['Apple', 'Banana', 'Strawberry', 'Mango', 'Cherry'];
const start = -3;
const removedItems = fruits_10.splice(start);
console.log(fruits_10) // ['Apple', 'Banana']
const fruits_11 = ['Apple', 'Banana', 'Strawberry', 'Mango', 'Cherry'];
const start = 2;
const removedItems = fruits_11.splice(start);
console.log(fruits_11) // ['Apple', 'Banana']
12. Remove the first item from an array shift() method to remove the first item
const fruits_12 = ['Apple', 'Banana'];
const removedItem = fruits_12.shift();
console.log(fruits_12); // ['Banana'];
13. Remove multiple items from the beginning of an array splice() method to remove the first 3 items
const fruits_13 = ['Apple', 'Strawberry', 'Cherry', 'Banana', 'Mango']
const start = 0;
const deleteCount = 3;
const removedItems = fruits_13.splice(start, deleteCount);
console.log(fruits_13); // ['Banana', 'Mango']
14. Add a new first item to an array unshift() method to add, at index 0
const fruits_14 = ['Banana', 'Mango']
const newLength = fruits_14.unshift('Strawberry');
console.log(fruits_14); // ['Strawberry', 'Banana', 'Mango']
console.log(newLength); // 3
15. Remove a single item by index uses the splice() method to remove the string "Banana" from the fruits array — by specifying the index position of "Banana".
const fruits_15 = ['Strawberry', 'Banana', 'Mango']
const start = fruits_15.indexOf('Banana');
const deleteCount = 1;
const removedItems = fruits_15.splice(start, deleteCount);
console.log(fruits_15); // ['Strawberry', 'Mango']
console.log(removedItems); // ['Banana']
16. Merge multiple arrays together concat() method to merge
const fruits_16 = ['Apple', 'Banana', 'Strawberry']
const moreFruits = ['Mango', 'Cherry'];
const combinedFruits = fruits_16.concat(moreFruits);
console.log(combinedFruits); // ?['Apple', 'Banana', 'Strawberry', 'Mango', 'Cherry']
17. Copy an array with ...spread operator ES6
const fruits_17 = ['Strawberry', 'Mango']
const fruitsCopy = [...fruits_17];
18. Deep copy and shallow different copy different and how to resolve It's.
const fruits_18 = ['Apple',{'name':'Rohit', 'age':34, 'address':{'city':'delhi', 'country':'In'}}, true, 23, [1,2,3,4,5,6,{'office':[{'address':'Noida UP India'}]}]]
we try to this
const shallowCopy_Array = [...fruits_18]
shallowCopy_Array[1].name = 'RAM';
console.log(shallowCopy_Array[1].name) // RAM
console.log(fruits_18[1].name) // RAM
we used to ...spread operator but it's copy only shallow not deep copy
we used to here JSON.stringify() and JSON.parse() for Deep Copy
const deepCopy_Array = JSON.stringify(fruits_18);
deepCopy_Array = JSON.parse(deepCopy_Array);
deepCopy_Adrray[1].name ='Ram'?
console.log(deepCopy_Adrray[1].name) // Ram
console.log(fruits_18[1].name) // Rohit
If you want watch to this in video then go to my youtube channel
React.js | Next.js | 35k+ @Linkedin | JavaScript | Frontend Developer
2 年useful methods.