Remove element from array, using slice

Question

I am trying to remove a element from my array using slice, but i can't get it to work, look at this piece of code.

 console.log(this.activeEffects); // Prints my array
 console.log(this.activeEffects.slice(0,1)); // Remove from index 0, and remove one.
 console.log(this.activeEffects); // Prints array again, this time my element should be gone

Result of this is.

enter image description here

So what is get from this is, at first the array is whole, as it should be. Then its prints what is sliced of the array. Finally the third should be empty? or?

• zb': it is possible to make jsfiddle for this ?
• Ashwin Prabhu: Are you sure this is an array?

Answer 1

function removeItemWithSlice(index) {
 return [...items.slice(0, index), ...items.slice(index + 1)]
}

Slice will create a new array. We create two arrays: from beggining to index and from index+1 to end. Then we apply the spread operator (...) to take the items of those arrays and create a new single array containing all the items we care. I will paste an equivalent way if you don't like the one liner:

function removeItemWithSlice(index) {
 const firstArr = items.slice(0, index);
 const secondArr = items.slice(index + 1);
 return [...firstArr , ...secondArr]
}

• user22325: This should be the accepted answer since it solves the literal question. Splice and Slice do not behave the same when it comes to mutation.

Answer 2

I believe you're looking for splice. From W3 Schools:

The splice() method adds/removes items to/from an array, and returns the removed item(s).

Take a look at the example on that page; the use case there is similar to what you want to achieve.

EDIT: Alternative link to MDN, as suggested by Nicosunshine; much more information about the command there.

• nicosantangelo: I know I might sound annoying, but don't use W3 Schools. MDN it's a much better resource developer.mozilla.org/en-US/docs/JavaScript/Reference/…
• MartinElvar: Thank you TSL, this solved my problem. Slapping my self right now.
• canon: @nicosunshine to Meta to request auto-block of w3schools links!
• nicosantangelo: @canon I don't know if that would fly, but you can always spam w3fools.com in all stack overflow :P
• Emobe: The OP asked for slice. There's a reason to use slice if you wish not to mutate values.

Answer 3

a.slice(0, index).concat(a.slice(index + 1))

• kingdaro: Instead of throwing a code snippet at OP, better to give some additional explanation, e.g. why their solution doesn't work, how yours does, and maybe link to additional documentation to the used functions in question.
• spirinvladimir: @kingdaro My type of thinking adressed to a strong developer.
• Francesco Mari: technically, this is the right answer - and yes, you might want to use splice instead :-)

Answer 4

.slice does not mutate the array, you could use .splice() to remove the item at index i in the array:

this.activeEffects.splice(i, 1)

• MartinElvar: But i may need to remove a element i the middle of the array
• Esailija: @MartinElvarJensen right, I didn't realize that. shift() is preferable when you want to remove from the beginning.
• mbx-mbx: slice does not change the original array as he says but it does return the removed elements. Why not then replace the original array with the removed elements by doing an assignment? e.g. this.activeEffects = this.activeEffects.slice(0,1)
• Esailija: @Magrangs you would need to reverse that. Something like: this.activeEffects = this.activeEffects.slice(1) It makes a new array that has all the items except for the first one. But if there are other references to the old array, they won't be updated.

Answer 5

This is what I was able to come up with :

var newArray = oldArray.slice(indexOfElementToRemove+1).concat(oldArray.slice(0,indexOfElementToRemove));

• tladuke: this changes the order of the array

Answer 6

Array.prototype.slice() ...

does not alter the original array, but returns a new "one level deep" copy that contains copies of the elements sliced from the original array. Elements of the original array are copied into the new array as follows:

Whereas Array.prototype.splice() ...

Changes the content of an array, adding new elements while removing old elements.

This example should illustrate the difference.

// sample array
var list = ["a","b","c","d"];
// slice returns a new array
console.log("copied items: %o", list.slice(2));
// but leaves list itself unchanged
console.log("list: %o", list);
// splice modifies the array and returns a list of the removed items
console.log("removed items: %o", list.splice(2));
// list has changed
console.log("list: %o", list);

Answer 7

Look at here : http://www.w3schools.com/jsref/jsref_slice_array.asp

You can see that the slice method select object et throw them into a new array object ^^ So you can't delete an object like this, may be you can try a thing like this :

var a = ["a","b","c"]; (pseudo code)
/* I wan't to remove the "b" object */
var result = a.slice(0,1)+a.slice(2,1); /* If you considers that "+" is a concatenation operator, i don't remember if it is true... */