如何正确使用 splice 和 slice [Typescript]

Question

I'm new to typescript . I'm sorry for asking such basic question. But I'm not able to figure out the problem in my code. I've read many articles about slice and splice . I wanted to use them in my angular project(not both of them together). I'm getting unexpected outputs. Here is my code:

When using slice:

newArray:string[];
mutatedArray:string[];

removeOneFruit() {
  this.newArray=['Apple', 'Orange', 'Plums', 'Grapes'];
  console.log("Before slicing: "+this.newArray);
  this.mutatedArray=this.newArray.slice(this.newArray.indexOf('Orange'),1);
  console.log("After slicing: "+this.mutatedArray);
}

Output:

Before slicing: Apple,Orange,Plums,Grapes

After slicing:

The After slicing thing is simply blank. No errors or warnings on console. This is strange for me.

When using splice:

newArray:string[];
mutatedArray:string[];

removeOneFruit() {
  this.newArray=['Apple', 'Orange', 'Plums', 'Grapes'];
  console.log("Before splicing: "+this.newArray);
  this.mutatedArray=this.newArray.splice(this.newArray.indexOf('Orange'),1);
  console.log("After splicing: "+this.mutatedArray);
}

Output:

Before slicing: Apple,Orange,Plums,Grapes

After slicing: Orange

I don't understand what's happening. I'm expecting an array with all the fruits but Orange . Please correct me.

PS: Its a miniature model of a huge project where things are not fruits and they ain't hard coded also.

Answer 1

.splice() returns the deleted elements, but if you use it in a separate line:

 var arr = ['Apple', 'Orange', 'Plums', 'Grapes']; arr.splice(arr.indexOf('Orange'), 1); console.log(arr);

Or you can use .slice() like this: (it's a bit long)

 var arr = ['Apple', 'Orange', 'Plums', 'Grapes']; //This slices from the start up to "Orange", then concatenates from after "Orange" to the end of the array console.log(arr.slice(0, arr.indexOf('Orange')).concat(arr.slice( arr.indexOf('Orange') + 1, arr.length)));

Answer 2

So slice does not work the same as splice

Array.slice takes two parameter, start and end . So in your first function you are giving the start index of Orange and the end index of 1 which I think doesn't make sense because the slice is getting items within a range, so there are no items between that range.

So if you look at the code snippet I have the index of Orange and then the index one up because the slice is inclusive so you in your example Orange is at the 1 index and then you are doing 1 as the end index. So I am pulling everything between index 1 and index 2, which is Orange.

 let newArray; let mutatedArray; function removeOneFruit() { newArray=['Apple', 'Orange', 'Plums', 'Grapes']; console.log("Before slicing: "+newArray); mutatedArray=newArray.slice(newArray.indexOf('Orange'), newArray.indexOf('Orange')+1); console.log("After slicing: "+mutatedArray); } removeOneFruit()

Your second function you are using splice which is used to remove items from an array. Array.splice takes an index and the amount of items you want to remove at that index . So all you are doing is creating a new array with the item that you remove. If you wanted return an array with everything but Orange. Then you would run splice , which would remove Orange, and then point the mutatedArray to the new value of newArray.

 let newArray; let mutatedArray; function removeOneFruit() { newArray=['Apple', 'Orange', 'Plums', 'Grapes']; console.log("Before splicing: "+newArray); newArray.splice(newArray.indexOf('Orange'),1); mutatedArray= newArray; console.log("After splicing: "+mutatedArray); } removeOneFruit()

Answer 3

Slice is not returning anything because the second parameter is the end index. Since Orange is 1 and the end is 1 it will not return anything.

Splice - will return the deleted items the original array is the one that gets affected.

Answer 4

Read the docs !

newArray.slice(newArray.indexOf('Orange'), 1);

This cuts a segment of an array from index newArray.indexOf('Orange') (which is 1 ) up to but not including index 1 . This ends up as an empty array.

If you wanted a slice of length 2 from a given position, you would do:

var a = [100, 200, 300, 400];
var pos = a.indexOf(200);
a.slice(pos, pos + 2);  // == [ 200, 300 ]

If what you need is to remove a particular element from an array, you're better off by just filtering it:

 const newArray = ['Apple', 'Orange', 'Plums', 'Grapes']; // Remove the first 'Orange'. const orangeIx = newArray.indexOf('Orange'); console.log('Removed by index:', newArray.filter((ignoredValue, index) => index != orangeIx)); // Remove every 'Orange'. console.log('Removed by value:', newArray.filter(fruit => fruit != 'Orange'));

Note that the above creates a new shallow copy of the original array, not mutates it.