JS Array Manipulators
JS Array Manipulators
Array Manipulators
=========================================================
01. map():-
- This function is used to manipulate each and every element in
array
- it returns an array
//Eg01
let arr1 = [10, 20, 30, 40, 50]
//multiply each element by 2
console.log(arr1.map((element, index) => {
return element * 2
}))
//Eg02
let arr2 = [1, 2, 3, 4, 5]
//o/p ['$1','$2','$3','$4','$5']
console.log(arr2.map((element, index) => {
return '$' + element
}))
//Eg03
let arr31 = [1, 2, 3]
let arr32 = ['one', 'two', 'three']
//o/p [ [ 1, 'one' ], [ 2, 'two' ], [ 3, 'three' ] ]
console.log(arr31.map((element, index) => {
return [element, arr32[index]]
}))
02. filter():-
- this function creates array based on condition
//Eg01
let arr1 = [10, 20, 30, 40, 50]
//create an array with elements greater than 30
console.log(arr1.filter((element, index) => {
return element > 30
}))
//Eg02
let arr2 = [10, 100, 20, 200, 30, 300, 40, 400, 50, 500]
//create array with elements greater than or equal to 100
console.log(arr2.filter((element, index) => {
return element >= 100
}))
//Eg03
let arr3 = [10, 20, 30, 40, 50]
//o/p [300,400,500]
console.log(arr3.filter((element, index) => {
return element > 20
}).map((element, index) => {
return element * 10
}))
//Eg01
let arr1 = [1, 2, 3, 4, 5]
console.log(arr1.reduce((fv, nv) => {
return fv + nv
}))
console.log(arr1.reduceRight((fv, nv) => {
return fv + nv
}))
//Eg02
let arr2 = [1, 2, 3, 4, `5`]
console.log(arr2.reduce((fv, nv) => {
return fv + nv
}))
console.log(arr2.reduceRight((fv, nv) => {
return fv + nv
}))
//Eg03
let arr3 = [`1`, 2, 3, 4, 5]
console.log(arr3.reduce((fv, nv) => {
return fv + nv
}))
console.log(arr3.reduceRight((fv, nv) => {
return fv + nv
}))
05. forEach
06. for...of
07. for...in
14. find() :-
- this function is used to find an element in array
- if element found it will return the same element
- if an element is not found it will return undefined.
15. includes() :-
- it is boolean function used to check element is present in
array or not
let arr = [10, 20, 30, 40, 50]
console.log(arr.find((element, index) => {
return element == `30`
})) //30
console.log(arr.find((element, index) => {
return element === `30`
})) //undefined
console.log(arr.includes(30)) //true
console.log(arr.includes('30')) //false
let arr = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
console.log(arr) //[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
arr.splice(5, 2) //from index 5 delete TWO elements
console.log(arr) //[10, 20, 30, 40, 50, 80, 90, 100]
//delete 80
arr.splice(5, 1)
console.log(arr) //[10, 20, 30, 40, 50, 90, 100]
//delete 100
//arr.splice(6, 1)
arr.splice(-1, 1)
console.log(arr) //[ 10, 20, 30, 40, 50, 90 ]
arr.splice(2, 2)
console.log(arr) //[ 10, 20, 50, 90 ]
//before 90 add 60, 70, 80
arr.splice(3, 0, 60, 70, 80)
console.log(arr) //[10, 20, 50, 60, 70, 80, 90]
//delete 50 and add 30, 40, 50
arr.splice(2, 1, 30, 40, 50)
console.log(arr) //[10, 20, 30, 40, 50, 60, 70, 80, 90]
//add 100 at end
arr.splice(9, 0, 100)
console.log(arr) //[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
17. findIndex():-
- it is used to find index of particular element
let arr = [10, 100, 20, 200, 30, 300, 40, 400, 50, 500]
let idx = arr.findIndex((element, index) => {
return element == 30
})
console.log(idx) //4
console.log(arr) //[10, 100, 20, 200, 30, 300, 40, 400, 50, 500]
arr.splice(idx, 1)
console.log(arr) //[10, 100, 20, 200, 300, 40, 400, 50, 500]
key = 40
arr.splice(arr.findIndex((element, index) => {
return element == key
}), 1)
console.log(arr) //[10, 100, 20, 200, 300, 400, 50, 500]
let arr2 = [
{ p_id: 111 },
{ p_id: 1111 },
{ p_id: 222 },
{ p_id: 333 }
]
console.log(arr2)
arr2.splice(arr2.findIndex((element, index) => {
return element.p_id == 1111
}), 1)
console.log(arr2)
18. slice():-
let arr = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
//in slice first include last exclude
//-ve indices supported
console.log(arr) //[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
console.log(arr.slice(5, 7)) //[ 60, 70 ]
console.log(arr.slice(3, 7)) //[ 40, 50, 60, 70 ]
console.log(arr.slice(5)) //[ 60, 70, 80, 90, 100 ]
console.log(arr.slice(5, -2)) //[ 60, 70, 80 ]
console.log(arr.slice(5,-5)) //[]
19. copyWithin()
let arr1 = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
//copy all elements at index 1
console.log(arr1.copyWithin(1)) //[10, 10, 20, 30, 40, 50, 60, 70, 80,
90]
let arr2 = [10, 100, 20, 200, 30, 300, 40, 400, 50, 500]
console.log(arr2.copyWithin(5)) //[10, 100, 20, 200, 30, 10, 100, 20,
200, 30]
let arr3 = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
//copy all elements from index 5 at index 2
console.log(arr3.copyWithin(2, 5)) //[10, 20, 60, 70, 80, 90, 100, 80,
90, 100]
let arr4 = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
//copy all elements from index no 4 to 6 at index 2
console.log(arr4.copyWithin(2, 4, 6)) //[10, 20, 50, 60, 50, 60, 70, 80, 90,
100]
21. sort()
let arr = [10, 50, 20, 40, 30]
console.log(arr)
console.log(arr.sort((num1, num2) => {
return num1 - num2
})) //[ 10, 20, 30, 40, 50 ]
console.log(arr.sort((num1, num2) => {
return num2 - num1
})) //[ 50, 40, 30, 20, 10 ]
22. length
let arr = [1, 2, 3, 4, 5]
console.log(arr)
console.log(arr.length) //5
console.log(arr[3])
console.log(arr[arr.length]) //?
arr.length = 3
console.log(arr[3])
console.log(arr.length)
console.log(arr
27. flat()
let arr = [1, [2], [3], [4, [5]]]
console.log(arr) //[ 1, [ 2 ], [ 3 ], [ 4, [ 5 ] ] ]
console.log(arr.flat(1))
console.log(arr.flat(2))
//if we dont know level
let arr2 = [1,[[[[2]]]],[3],[[[[[[[[[[[[[[[[[[[[[4]]]]]]]]]]]]]]]]]]]]]]
console.log(arr2.flat(Infinity))
28. reduce()
29. flatMap() :- combination of flat() and map()
let arr1 = [1, 2, 3]
let arr2 = ['one', 'two', 'three']
console.log(arr1.map((element, index) => {
return [element, arr2[index]]
})) //[ [ 1, 'one' ], [ 2, 'two' ], [ 3, 'three' ] ]
console.log(arr1.flatMap((element, index) => {
return [element, arr2[index]]
})) //[ 1, 'one', 2, 'two', 3, 'three' ]
32. split()
let str = `Welcome to Javascript`
console.log(str.split()) //[ 'Welcome to Javascript' ]
console.log(str.split(" ")) //[ 'Welcome', 'to', 'Javascript' ]
let myStr = 'Mahabharat'
console.log(myStr.split('a')) //[ 'M', 'h', 'bh', 'r', 't' ]
console.log(myStr.split('a', 3))//[ 'M', 'h', 'bh' ]
33. lastIndexOf()
let arr = [10, 20, 10, 20, 30, 10]
console.log(arr.lastIndexOf(10)) //5
console.log(arr.lastIndexOf(20)) //3
34. concat()
let arr1 = [10]
let arr2 = [20]
let arr3 = [30]
let arr4 = arr1.concat(arr2, arr3)
console.log(arr4) //[ 10, 20, 30 ]
35. substr()
36. substring()
let str = `Welcome to Javascript`
//Welcome
console.log(str.substr(0, 7))
console.log(str.substring(0, 7))
//to
console.log(str.substr(8, 2))
console.log(str.substring(8, 10))
//Javascript
console.log(str.substr(11))
console.log(str.substring(11))
//Eg02
let str = `This is my School`
let res = str.replace('School','College')
console.log(str)
console.log(res)
//Eg03
let str = "red green Red red Green Red"
let res = str.replace(/red/,"Yellow") //only first occurence
console.log(str) //red green Red red Green Red
console.log(res) //Yellow green Red red Green Red
res = str.replace(/red/g,"Yellow") //all occurences
console.log(res) //Yellow green Red Yellow Green Red
res = str.replace(/red/ig,"Yellow") //all occurences ignore case
console.log(res) //Yellow green Yellow Yellow Green
Yellow
39. search():- This function returns the index of first match string
returns -1 for unsuccessful search
let str = "Sound mind in sound body"
console.log(str)
console.log(str.search('sound')) //14
console.log(str.search('Sound')) //0
console.log(str.search(/sound/i)) //0
console.log(str.search('refresh')) //-1
40. toLocaleLowerCase()
41. toLocaleUpperCase()
let num = 91
console.log(num.toString())
console.log(num.toString(2)) //1011011
console.log(num.toString(8)) //133
console.log(num.toString(16)) //5b