How to remove element from an array in JavaScript? - javascript

var arr = [1,2,3,5,6];
Remove the first element
I want to remove the first element of the array so that it becomes:
var arr = [2,3,5,6];
Remove the second element
To extend this question, what if I want to remove the second element of the array so that it becomes:
var arr = [1,3,5,6];

shift() is ideal for your situation. shift() removes the first element from an array and returns that element. This method changes the length of the array.
array = [1, 2, 3, 4, 5];
array.shift(); // 1
array // [2, 3, 4, 5]

For a more flexible solution, use the splice() function. It allows you to remove any item in an Array based on Index Value:
var indexToRemove = 0;
var numberToRemove = 1;
arr.splice(indexToRemove, numberToRemove);

arr.slice(begin[,end])
is non destructive, splice and shift will modify your original array

The Array.prototype.shift method removes the first element from an array, and returns it. It modifies the original array.
var a = [1,2,3]
// [1,2,3]
a.shift()
// 1
a
//[2,3]

Maybe something like this:
arr=arr.slice(1);

Wrote a small article about inserting and deleting elements at arbitrary positions in Javascript Arrays.
Here's the small snippet to remove an element from any position. This extends the Array class in Javascript and adds the remove(index) method.
// Remove element at the given index
Array.prototype.remove = function(index) {
this.splice(index, 1);
}
So to remove the first item in your example, call arr.remove():
var arr = [1,2,3,5,6];
arr.remove(0);
To remove the second item,
arr.remove(1);
Here's a tiny article with insert and delete methods for Array class.
Essentially this is no different than the other answers using splice, but the name splice is non-intuitive, and if you have that call all across your application, it just makes the code harder to read.

Others answers are great, I just wanted to add an alternative solution with ES6 Array function : filter.
filter() creates a new array with elements that fall under a given criteria from an existing array.
So you can easily use it to remove items that not pass the criteria. Benefits of this function is that you can use it on complex array not just string and number.
Some examples :
Remove first element :
// Not very useful but it works
function removeFirst(element, index) {
return index > 0;
}
var arr = [1,2,3,5,6].filter(removeFirst); // [2,3,4,5,6]
Remove second element :
function removeSecond(element, index) {
return index != 1;
}
var arr = [1,2,3,5,6].filter(removeSecond); // [1,3,4,5,6]
Remove odd element :
function removeOdd(element, index) {
return !(element % 2);
}
var arr = [1,2,3,5,6].filter(removeOdd); [2,4,6]
Remove items not in stock
const inventory = [
{name: 'Apple', qty: 2},
{name: 'Banana', qty: 0},
{name: 'Orange', qty: 5}
];
const res = inventory.find( product => product.qty > 0);

There are multiple ways to remove an element from an Array. Let me point out most used options below. I'm writing this answer because I couldn't find a proper reason as to what to use from all of these options. The answer to the question is option 3 (Splice()).
1) SHIFT() - Remove First Element from Original Array and Return the First Element
See reference for Array.prototype.shift(). Use this only if you want to remove the first element, and only if you are okay with changing the original array.
const array1 = [1, 2, 3];
const firstElement = array1.shift();
console.log(array1);
// expected output: Array [2, 3]
console.log(firstElement);
// expected output: 1
2) SLICE() - Returns a Copy of the Array, Separated by a Begin Index and an End Index
See reference for Array.prototype.slice(). You cannot remove a specific element from this option. You can take only slice the existing array and get a continuous portion of the array. It's like cutting the array from the indexes you specify. The original array does not get affected.
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]
console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]
3) SPLICE() - Change Contents of Array by Removing or Replacing Elements at Specific Indexes.
See reference for Array.prototype.splice(). The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. Returns updated array. Original array gets updated.
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

You can use the ES6 Destructuring Assignment feature with a rest operator. A comma indicates where you want to remove the element and the rest (...arr) operator to give you the remaining elements of the array.
const source = [1,2,3,5,6];
function removeFirst(list) {
var [, ...arr] = list;
return arr;
}
const arr = removeFirst(source);
console.log(arr); // [2, 3, 5, 6]
console.log(source); // [1, 2, 3, 5, 6]

Typescript solution that does not mutate original array
function removeElementAtIndex<T>(input: T[], index: number) {
return input.slice(0, index).concat(input.slice(index + 1));
}

You can also do this with reduce:
let arr = [1, 2, 3]
arr.reduce((xs, x, index) => {
if (index == 0) {
return xs
} else {
return xs.concat(x)
}
}, Array())
// Or if you like a oneliner
arr.reduce((xs, x, index) => index == 0 ? xs : xs.concat(x), Array())

Array.splice() has the interesting property that one cannot use it to remove the first element. So, we need to resort to
function removeAnElement( array, index ) {
index--;
if ( index === -1 ) {
return array.shift();
} else {
return array.splice( index, 1 );
}
}

Related

Array, return original index from a sorted array in javascript

'I wish to sort an array in numerical order but once it is sorted I wish to be able to find the original index.
For example the original array:
ptsGP = [3,8,2,5,6,9,8,4]
I am using the following code below to sort the array:
arr = ptsGP;
var arr2 = arr.map(function(o, i){return {idx: i, obj: o}; }).sort(function(a, b) {
return b.obj - a.obj;
});
for(var i = 1, j = arr2.length; i <= j; i++){
document.write('i:' + i + ' = arr2[i].obj: PTS: ', arr2[i-1].obj+"<br/>");
}`
This is fine as the sorted array is :
arr = [2,3,4,5,6,8,8,9];
How can I find the index of sorted number in the original array? In this case it would be :
Index on original array would be = [2,0,7,3,4,1,6,5]
I know I could use map on the original array but how can I deal with duplicate numbers i.e, in this case I have two number 8's within the array?
You can achieve it by following below steps :
Creating a deep copy of an original array by using spread operator. So that we can get proper indexing.
Now we can iterate deep copy array to get the index of the elements from an original array.
Regarding duplicate values we can check via .indexOf() and .lastIndexOf() methods.
via and then via comparison. For fetching the correct index of duplicate values I wrote a logic based on the count of duplicate value.
Working Demo :
// Original array.
const originalArray = [3, 8, 2, 5, 6, 9, 8, 4];
// Creating a deep copy of an original array.
const deepCopy = [...originalArray].sort(function(a, b){
return a-b
});
// result array
const arr = [];
// count to get the index based on duplicate values.
let count = 0;
// Iterating deepCopy array to get the actual index.
deepCopy.forEach((elem) => {
// Checking for duplicate value in an array
if (originalArray.indexOf(elem) === originalArray.lastIndexOf(elem)) {
// This line of code execute if there is no duplicates in an array.
arr.push(originalArray.indexOf(elem))
} else {
// This line of code execute if there is duplicate values in an array.
count++;
// Inserting the index one by one.
arr.push(originalArray.indexOf(elem, count))
}
});
// Result array.
console.log(arr);

Spinning the elements of an array clockwise in JS

I am supposed to rotate an array of integers clockwise in JS.
Here is my code for it:
function rotateArray(N, NArray)
{
//write your Logic here:
for(j=0;j<2;j++){
var temp=NArray[N-1];
for(i=0;i<N-1;i++){
NArray[i+1]=NArray[i];
}
NArray[0]=temp;
}
return NArray;
}
// INPUT [uncomment & modify if required]
var N = gets();
var NArray = new Array(N);
var temp = gets();
NArray = temp.split(' ').map(function(item) { return parseInt(item, 10);});
// OUTPUT [uncomment & modify if required]
console.log(rotateArray(N, NArray));
The code accepts an integer N which is the length of the array. The input is as follows:
4
1 2 3 4
The correct answer for this case is supposed to be
4 1 2 3
But my code returns
4 1 1 1
I cannot find where my code is going wrong. Please help me out.
All you need to do is move one item from the end of the array to the beginning. This is very simple to accomplish with .pop() (removes an item from the end of an array), then declare a new array with that element as the first:
function rotateArray(N, NArray) {
const lastItem = NArray.pop();
return [lastItem, ...NArray];
}
console.log(rotateArray(1, [1, 2, 3, 4]));
Doing anything else, like using nested loops, will make things more unnecessarily complicated (and buggy) than they need to be.
If you don't want to use spread syntax, you can use concat instead, to join the lastItem with the NArray:
function rotateArray(N, NArray) {
const lastItem = NArray.pop();
return [lastItem].concat(NArray);
}
console.log(rotateArray(1, [1, 2, 3, 4]));
If you aren't allowed to use .pop, then look up the last element of the array by accessing the array's [length - 1] property, and take all elements before the last element with .slice (which creates a sub portion of the array from two indicies - here, from indicies 0 to the next-to-last element):
function rotateArray(N, NArray) {
const lastItem = NArray[NArray.length - 1];
const firstItems = NArray.slice(0, NArray.length - 1);
return [lastItem].concat(firstItems);
}
console.log(rotateArray(1, [1, 2, 3, 4]));
function rotate(array,n){
Math.abs(n)>array.length?n=n%array.length:n;
if(n<0){
n=Math.abs(n)
return array.slice(n,array.length).concat(array.slice(0,n));
}else{
return array.slice(n-1,array.length).concat(array.slice(0,n-1));
}
}
console.log(rotate([1, 2, 3, 4, 5],-3));
The answer by #CertainPerformance is great but there's a simpler way to achieve this. Just combine pop with unshift.
let a = [1,2,3,4];
a?.length && a.unshift(a.pop());
console.log(a);
You need to check the length first so you don't end up with [undefined] if you start with an empty array.

Shorter way to remove an item by index from an array [duplicate]

This question already has answers here:
How to delete an item from state array?
(18 answers)
Closed 5 years ago.
I've made this post last year and today, I assume things can be simplified.
I need to remove an item from an array but by the index. When by the index, it does not matter if the array has same values. Your typical example:
let arr = [1,2,3,2,1] // just an array, not array with objects
let x = 1;
// This will not be an expected result:
// Find all values that is equal to 1 then remove
arr.filter(num => num !== x) //=> [2,3,2]
My expectation is when I remove the last element (1), for example, the array should be [1,2,3,2]:
let index = 4; // which is the last "1" in the array
let indexVal = arr.indexOf(4) // 1
let newArray = arr.splice(indexVal, 1) //=> [1,2,3,2]
Now, it's 2017, almost '18, is there a shorter way (es5/6) of doing this without any polyfil?
Edit:
Think of this as a todo:
<ul>
<li>me</li>
<li>me</li> // click to delete this one
<li>you</li>
<li>me</li>
</ul>
To correctly remove that item, I have to delete by the index not value
The Array.filter callback gives 2 arguments, number and index and you can filter the array this way.
let arr = [1,2,3,2,1]
let x = 4; //suppose you want to remove element at 4th index
let editedArray = arr.filter((num, index) => index !== x) //editedArray = [1,2,3,2]
EDIT:
The third parameter gives the whole array. Thanks #Oliver for pointing this out in comment
arr.splice(index, 1);
or if you specifically want to remove the last element:
arr.pop();
No indexOf call. The indexOf call never should have been there; it only ever looked like it worked because indexOf returns -1 for an element that isn't present, and splice treats negative indices as counting from the end of the array.
Also, splice modifies the array in place and returns an array of removed elements, so assigning its return value the way you were doing is misleading.
The only way I can think of is the one we use in Redux every day:
const arr = [1, 2, 3, 2, 1]
const index = 4 // index of the item you want to remove
const newArr = [...arr.slice(0, index), ...arr.slice(index + 1)]
console.log(newArr) // [1, 2, 3, 2]
It might not be the shortest but it is more 2017 and it is immutable, which is very important!
Ajay's answer might be what you're looking for. Anyway, there are people like me who prefer slightly-more-lines-but-more-readable/rewritable/maintable solution, I'd do it this way:
function removeElementByIndex(arr, x) {
var newArr = [];
for(var i = 0; i < arr.length; i++) {
if(i != x) {
newArr.push(arr[i]);
}
}
return newArr;
}
// Usage
removeElementByIndex([1, 2, 3, 2, 1], 4);// outputs: [1, 2, 3, 2]
Now, it's 2017, almost '18, is there a shorter way (es5/6) of doing
this without any polyfil?
LOL! Many basic things not yet implemented. We'll have to wait for 2118 or another programming language to replace JS (oh wait, there's one, aka jQuery :P ).

How to remove an item from a list without distorting the original list

This is what I'm trying to do, I have an array
var arr = [1, 2, 3, 4, 5];
then I want to create a new array each time by removing an item once i.e when i remove item at index 0 i should have [2, 3, 4, 5]and when i remove an item at index 1, I should have [1, 3, 4, 5] and so on till i get to arr.length-1 and each time i remove an item i still want my arr to be intact unchanged
using javaScript I have tried some array methods like splice, slice but all that changes the value of arr
how do i go about it with either javascript or python.
For Javascript, using ES6 array spread operator and slice method,
var new_array = [...a.slice(0, index), ...a.slice(index + 1)];
const cut = (a, i) => [...a.slice(0, i), ...a.slice(i + 1)];
let arr = [2, 2, 2, 4, 2];
console.log(cut(arr, 3));
console.log(arr);
For Python:
array = [1,2,3,4,5];
newarray = [value for counter, value in enumerate(array) if counter != 0 ]
PS each time you will use this list-comprehension, array will not be modified! so basically you will get the same output for newarray.
If you want to have newarray each time removed one element you need to create a function instead of list-comprehension (of course it's possible but will likely be less readable).
For JavaScript:
Try making a copy with slice() (slice returns a shallow copy of the array that you can manipulate without affecting the original array) and then using splice() to remove the value at your desired index:
newArray = slice(arr).splice(index, 1);

How to get first N number of elements from an array

I am working with Javascript(ES6) /FaceBook react and trying to get the first 3 elements of an array that varies in size. I would like do the equivalent of Linq take(n).
In my Jsx file I have the following:
var items = list.map(i => {
return (
<myview item={i} key={i.id} />
);
});
Then to get the first 3 items I tried
var map = new Map(list);
map.size = 3;
var items = map(i => {
return (<SpotlightLandingGlobalInboxItem item={i} key={i.id} />);
});
This didn't work as map doesn't have a set function. What can I try next?
To get the first n elements of an array, use
const slicedArray = array.slice(0, n);
I believe what you're looking for is:
// ...inside the render() function
var size = 3;
var items = list.slice(0, size).map(i => {
return <myview item={i} key={i.id} />
});
return (
<div>
{items}
</div>
)
arr.length = n
This might be surprising but length property of an array is not only used to get number of array elements but it's also writable and can be used to set array's length MDN link. This will mutate the array.
If you don't care about immutability or don't want to allocate memory i.e. for a game this will be the fastest way.
to empty an array
arr.length = 0
Use Slice Method
The javascript slice() method returns a portion of an array into a new array object selected from start to end where start and end represent the index of items in that array. The original array will not be modified.
syntax : slice(start, end)
Let us say we have an array with 7 items [5,10,15,20,25,30,35] and we want the first 5 elements from that array:
let array = [5,10,15,20,25,30,35]
let newArray = array.slice(0,5)
console.log(newArray)
You can filter using index of array.
var months = ['Jan', 'March', 'April', 'June'];
months = months.filter((month,idx) => idx < 2)
console.log(months);
Do not try doing that using a map function. Map function should be used to map values from one thing to other. When the number of input and output match.
In this case use filter function which is also available on the array. Filter function is used when you want to selectively take values maching certain criteria. Then you can write your code like
var items = list
.filter((i, index) => (index < 3))
.map((i, index) => {
return (
<myview item={i} key={i.id} />
);
});
Just try this to get first n elements from list:
const slicedList = list.slice(0, n);
Example:
const list = [1,2,3,4,5]
console.log(list.slice(0, 3)) // Should return [1,2,3]
console.log(list.slice(0, 10)) // Returns [1,2,3,4,5] since this is all we have in 1st 10 elements
The following worked for me.
array.slice( where_to_start_deleting, array.length )
Here is an example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.slice(2, fruits.length);
//Banana,Orange ->These first two we get as resultant
Using a simple example:
var letters = ["a", "b", "c", "d"];
var letters_02 = letters.slice(0, 2);
console.log(letters_02)
Output: ["a", "b"]
var letters_12 = letters.slice(1, 2);
console.log(letters_12)
Output: ["b"]
Note: slice provides only a shallow copy and DOES NOT modify the original array.
With lodash, take function, you can achieve this by following:
_.take([1, 2, 3]);
// => [1]
_.take([1, 2, 3], 2);
// => [1, 2]
_.take([1, 2, 3], 5);
// => [1, 2, 3]
_.take([1, 2, 3], 0);
// => []
[1,2,3,4,5,6,7,8,8].slice(0, 3) = While return the first 3 elements.
Answer: [1,2,3]
How it works:
The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.
The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]
console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]
console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]
know more
With LInQer you can do:
Enumerable.from(list).take(3).toArray();
Maybe I'm missing something, but feels like kicking in an open door by suggesting to use splice()? Of course, it's important to remember that this modifies the array.
const myArray = [
'one', 'two', 'three', 'four', 'five', 'six', 'seven',
]
myArray.splice(3)
console.log(myArray)
// expected output: ['one', 'two', 'three']
It's also possible to grab the elements of the array that are outside of what is being kept:
const myArray = [
'one', 'two', 'three', 'four', 'five', 'six', 'seven',
]
const afterFirstThree = myArray.splice(3)
console.log(myArray)
// expected output: ['one', 'two', 'three']
console.log(afterFirstThree)
// expected output: ['four', 'five', 'six', 'seven']
// if n is larger than myArray.length the entire array is kept and if trying to grab the return, it will be an empty array

Categories

Resources