There are several methods that you can mutate array: shift, unshift, push, pop, splice are mutators. concat, slice, rest operator, spread operator, destructing.
Slice copy the subset of items from array and produce the a new array
const array = [1,2,3]
const newArray = array.slice()
console.log(newArray) //[1,2,3]
//using slice
const colors = ['yellow','red','blue']
const index = colors.indexOf('red')
const newColors = [...colors.slice(0, index),
'white', ...colors.slice(index +1 ) ]
console.log(newColors) //['yellow','white','blue']
//using slice
const colors = ['red', 'blue', 'white']
let index = colors.indexOf('blue')
const newColors = [
...colors.slice(0,index),
...colors.slice(index + 1)
]
console.log(newColors) // ['red', 'white']
const array = [1, 2, 3]
const newArray = array.slice(0,-2)
console.log(newArray) // [1]
You can use spread operator adding items to the construction of a new array.
const array = [2,4,3]
const newArray = [1, ...array]
console.log(newArray) //[1,2,4,3]
const array = [2,4,3]
const newArray = [...array,7, 8]
console.log(newArray) //[2,4,3,7,8]
Adding items to array
//using unshift add item at begin of the array
const array = [2,4,3]
array.unshift(1)
console.log(array) //[1, 2, 4 ,3]
//using push to add item at the end of the array
const array = [2,4,3]
array.push(5)
console.log(array) //[2,4,3,5]
//using splice add item in middle of array
const colors = ['red', 'blue', 'white']
let index = colors.indexOf('blue')
const newColors = colors.slice()
newColors.splice(index, 1)
console.log(newColors) // ['red', 'white']
//using splice for adding items in the middle the array
const colors = ['yellow','red','blue']
const index = colors.indexOf('red')
const newColors = colors.slice()
newColors.splice(index + 1, 0, 'white')
console.log(newColors) //['yellow', 'red', 'white', 'blue']
Remove items from the array: You can remove items by using destructure the array, shift.
Remove from the beginning of the array.
const array = [1, 2, 3]
const [takeoff, ...result] = array
console.log(result) // [2, 3]
const array = [1, 2, 3]
const newArray = array.shift()
console.log(array) // [2,3]
Removing from the end of the array
const array = [1, 2, 3]
const newArray = array.pop()
console.log(array) // [1,2]
Loop through the array: You can use map and filter, reduce, forEach, for of to iterate through the array. I only use reduce when adding sum of the array. But it can be used for other things.
const array = [2,3,6]
const newArray = array.map(e => e + 1)
console.log(newArray) // [3,4,7]
const array = [2,3,6]
const newArray = array.filter(e => e > 3)
console.log(newArray) // [6]
const array = [2,3,6]
const newArray = array.reduce((sum,num) => sum + num, 0)
console.log(newArray) // 11
//use forEach to count each item quantity
const items = ['pencil', 'book','pencil']
const count = {}
items.forEach(item => {
if (count[item]) {
count[item] +=1
return
}
count[item] = 1
})
console.log(count) // {pencil: 2, book: 1}
//use for of
const items = ['pencil', 'book','pencil']
const count = {}
for(const item of items){
console.log(item + 's')
}
// pencils
// books
// pencils
//using reduce
const items = ['pencil', 'book','pencil']
const count = items.reduce((count, item) => {
if (count[item]) {
count[item] +=1
} else {
count[item] = 1
}
return count
}, {})
console.log(count) // {pencil: 2, book: 1}
Top comments (2)
I think it's wise to be clear and consistent regarding the terms you use.
Mutation includes any change to the object, so shift, unshift, push, pop, and splice are all mutators.
The spread operator doesn't add items to an array -- it includes them in the construction of a new array.
Splice and push do add items, but slice and spread don't.
So these are quite different kinds of thing and it's a bit misleading to lump them together.
Slice doesn't remove items from an array -- it copies a subset of items from an array to produce a new array.
The examples here are of extraction rather than removal.
Reduce isn't limited to addition.
I would be careful to distinguish between construction and mutation, since these have very different consequences.
Good luck.
Thanks for your comments.