What is the difference between splice and slice ?
const array = [1, 2, 3, 4, 5];
array.splice(index, 1);
array.slice(index, 1);
splice() changes the original array whereas slice() doesn't but both of them returns array object.
See the examples below:
var array=[1,2,3,4,5];
console.log(array.splice(2));
This will return [3,4,5]. The original array is affected resulting in array being [1,2].
var array=[1,2,3,4,5]
console.log(array.slice(2));
This will return [3,4,5]. The original array is NOT affected with resulting in array being [1,2,3,4,5].
Below is simple fiddle which confirms this:
//splice
var array=[1,2,3,4,5];
console.log(array.splice(2));
//slice
var array2=[1,2,3,4,5]
console.log(array2.slice(2));
console.log("----after-----");
console.log(array);
console.log(array2);
Splice and Slice both are Javascript Array functions.
Splice vs Slice
The splice() method returns the removed item(s) in an array and slice() method returns the selected element(s) in an array, as a new array object.
The splice() method changes the original array and slice() method doesn’t change the original array.
The splice() method can take n number of arguments and slice() method takes 2 arguments.
Splice with Example
Argument 1: Index, Required. An integer that specifies at what position to add /remove items, Use negative values to specify the position from the end of the array.
Argument 2: Optional. The number of items to be removed. If set to 0(zero), no items will be removed. And if not passed, all item(s) from provided index will be removed.
Argument 3…n: Optional. The new item(s) to be added to the array.
var array=[1,2,3,4,5];
console.log(array.splice(2));
// shows [3, 4, 5], returned removed item(s) as a new array object.
console.log(array);
// shows [1, 2], original array altered.
var array2=[6,7,8,9,0];
console.log(array2.splice(2,1));
// shows [8]
console.log(array2.splice(2,0));
//shows [] , as no item(s) removed.
console.log(array2);
// shows [6,7,9,0]
Slice with Example
Argument 1: Required. An integer that specifies where to start the selection (The first element has an index of 0). Use negative numbers to select from the end of an array.
Argument 2: Optional. An integer that specifies where to end the selection but does not include. If omitted, all elements from the start position and to the end of the array will be selected. Use negative numbers to select from the end of an array.
var array=[1,2,3,4,5]
console.log(array.slice(2));
// shows [3, 4, 5], returned selected element(s).
console.log(array.slice(-2));
// shows [4, 5], returned selected element(s).
console.log(array);
// shows [1, 2, 3, 4, 5], original array remains intact.
var array2=[6,7,8,9,0];
console.log(array2.slice(2,4));
// shows [8, 9]
console.log(array2.slice(-2,4));
// shows [9]
console.log(array2.slice(-3,-1));
// shows [8, 9]
console.log(array2);
// shows [6, 7, 8, 9, 0]
S LICE = Gives part of array & NO splitting original array
SP LICE = Gives part of array & SPlitting original array
I personally found this easier to remember, as these 2 terms always confused me as beginner to web development.
Here is a simple trick to remember the difference between slice vs splice
var a=['j','u','r','g','e','n'];
// array.slice(startIndex, endIndex)
a.slice(2,3);
// => ["r"]
//array.splice(startIndex, deleteCount)
a.splice(2,3);
// => ["r","g","e"]
Trick to remember:
Think of "spl" (first 3 letters of splice) as short for "specifiy length", that the second argument should be a length not an index
The slice() method returns a copy of a portion of an array into a new array object.
$scope.participantForms.slice(index, 1);
This does NOT change the participantForms array but returns a new array containing the single element found at the index position in the original array.
The splice() method changes the content of an array by removing existing elements and/or adding new elements.
$scope.participantForms.splice(index, 1);
This will remove one element from the participantForms array at the index position.
These are the Javascript native functions, AngularJS has nothing to do with them.
Splice - MDN reference - ECMA-262 spec
Syntax
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
Parameters
start: required. Initial index.
If start is negative it is treated as "Math.max((array.length + start), 0)" as per spec (example provided below) effectively from the end of array.
deleteCount: optional. Number of elements to be removed (all from start if not provided).
item1, item2, ...: optional. Elements to be added to the array from start index.
Returns: An array with deleted elements (empty array if none removed)
Mutate original array: Yes
Examples:
const array = [1,2,3,4,5];
// Remove first element
console.log('Elements deleted:', array.splice(0, 1), 'mutated array:', array);
// Elements deleted: [ 1 ] mutated array: [ 2, 3, 4, 5 ]
// array = [ 2, 3, 4, 5]
// Remove last element (start -> array.length+start = 3)
console.log('Elements deleted:', array.splice(-1, 1), 'mutated array:', array);
// Elements deleted: [ 5 ] mutated array: [ 2, 3, 4 ]
More examples in MDN Splice examples
Slice - MDN reference - ECMA-262 spec
Syntax
array.slice([begin[, end]])
Parameters
begin: optional. Initial index (default 0).
If begin is negative it is treated as "Math.max((array.length + begin), 0)" as per spec (example provided below) effectively from the end of array.
end: optional. Last index for extraction but not including (default array.length). If end is negative it is treated as "Math.max((array.length + begin),0)" as per spec (example provided below) effectively from the end of array.
Returns: An array containing the extracted elements.
Mutate original: No
Examples:
const array = [1,2,3,4,5];
// Extract first element
console.log('Elements extracted:', array.slice(0, 1), 'array:', array);
// Elements extracted: [ 1 ] array: [ 1, 2, 3, 4, 5 ]
// Extract last element (start -> array.length+start = 4)
console.log('Elements extracted:', array.slice(-1), 'array:', array);
// Elements extracted: [ 5 ] array: [ 1, 2, 3, 4, 5 ]
More examples in MDN Slice examples
Performance comparison
Don't take this as absolute truth as depending on each scenario one might be performant than the other.
Performance test
The splice() method returns the removed items in an array.
The slice() method returns the selected element(s) in an array, as a new array object.
The splice() method changes the original array and slice() method doesn’t change the original array.
Splice() method can take n number of arguments:
Argument 1: Index, Required.
Argument 2: Optional. The number of items to be removed. If set to 0(zero), no items will be removed. And if not passed, all item(s) from provided index will be removed.
Argument 3..n: Optional. The new item(s) to be added to the array.
slice() method can take 2 arguments:
Argument 1: Required. An integer that specifies where to start the selection (The first element has an index of 0). Use negative numbers to select from the end of an array.
Argument 2: Optional. An integer that specifies where to end the selection. If omitted, all elements from the start position and to the end of the array will be selected. Use negative numbers to select from the end of an array.
Splice and Slice are built-in Javascript commands -- not specifically AngularJS commands. Slice returns array elements from the "start" up until just before the "end" specifiers. Splice mutates the actual array, and starts at the "start" and keeps the number of elements specified. Google has plenty of info on this, just search.
Most answers are too wordy.
splice and slice return rest of elements in the array.
splice mutates the array being operated with elements removed while slice not.
Both return same answer but:
SPlice will mutate your original array.
Slice won't mutate your original array.
The slice( ) method copies a given part of an array and returns that copied part as a new array. It doesn’t change the original array.
The splice( ) method changes an array, by adding or removing elements from it.
Here is the slice syntax:
array.slice(from, until);
// example
let array = [1, 2, 3, 4, 5, 6]
let newArray = array.slice(1, 3)
console.log({array, newArray})
// output: array: [1, 2, 3, 4, 5, 6], newArray: [2, 3]
Note: the Slice( ) method can also be used for strings.
And here is the splice syntax:
//For removing elements, we need to give the index parameter,
// and the number of elements to be removed
array.splice(index, number of elements to be removed);
//example
let array = [1, 2, 3, 4, 5, 6]
let newArray = array.splice(1, 3)
console.log({array, newArray})
// output: array: [1, 5, 6], newArray: [2, 3, 4]
Note: If we don’t define the second parameter, every element starting from the given index will be removed from the array
// For adding elements, we need to give them as the 3rd, 4th, ... parameter
array.splice(index, number of elements to be removed, element, element);
//example
let array = [1, 2, 3, 4, 5, 6]
let newArray = array.splice(1, 3, 'a', 'b')
console.log({array, newArray})
// output: array: [1, ,'a', 'b', 5, 6], newArray: [2, 3, 4]
Related links:
Let’s clear up the confusion around the slice( ), splice( ), & split( ) methods in JavaScript
Array.prototype.slice()
Array.prototype.splice()
splice & delete Array item by index
index = 2
//splice & will modify the origin array
const arr1 = [1,2,3,4,5];
//slice & won't modify the origin array
const arr2 = [1,2,3,4,5]
console.log("----before-----");
console.log(arr1.splice(2, 1));
console.log(arr2.slice(2, 1));
console.log("----after-----");
console.log(arr1);
console.log(arr2);
let log = console.log;
//splice & will modify the origin array
const arr1 = [1,2,3,4,5];
//slice & won't modify the origin array
const arr2 = [1,2,3,4,5]
log("----before-----");
log(arr1.splice(2, 1));
log(arr2.slice(2, 1));
log("----after-----");
log(arr1);
log(arr2);
slice does not change original array it return new array but splice changes the original array.
example: var arr = [1,2,3,4,5,6,7,8];
arr.slice(1,3); // output [2,3] and original array remain same.
arr.splice(1,3); // output [2,3,4] and original array changed to [1,5,6,7,8].
splice method second argument is different from slice method. second argument in splice represent count of elements to remove and in slice it represent end index.
arr.splice(-3,-1); // output [] second argument value should be greater then
0.
arr.splice(-3,-1); // output [6,7] index in minus represent start from last.
-1 represent last element so it start from -3 to -1.
Above are major difference between splice and slice method.
Another example:
[2,4,8].splice(1, 2) -> returns [4, 8], original array is [2]
[2,4,8].slice(1, 2) -> returns 4, original array is [2,4,8]
//splice
var array=[1,2,3,4,5];
console.log(array.splice(2));
//slice
var array2=[1,2,3,4,5]
console.log(array2.slice(2));
console.log("----after-----");
console.log(array);
console.log(array2);
slice and splice are intimately connected, but yet serves very different purposes:
The slice function is used to select a portion of an array. Its purpose is its return value. Its execution does not affect its subject.
The splice function is used to remove elements from an array. Its purpose is to modify its subject. It still returns a copy of the removed items, for reference, if needed.
JavaScript Array splice() Method By Example
Example1 by tutsmake -Remove 2 elements from index 1
var arr = [ "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten" ];
arr.splice(1,2);
console.log( arr );
Example-2 By tutsmake – Add new element from index 0 JavaScript
var arr = [ "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten" ];
arr.splice(0,0,"zero");
console.log( arr );
Example-3 by tutsmake – Add and Remove Elements in Array JavaScript
var months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb'); // add at index 1
console.log(months);
months.splice(4, 1, 'May'); // replaces 1 element at index 4
console.log(months);
https://www.tutsmake.com/javascript-array-splice-method-by-example/
The difference between Slice() and Splice() javascript build-in functions is,
Slice returns removed item but did not change the original array ;
like,
// (original Array)
let array=[1,2,3,4,5]
let index= array.indexOf(4)
// index=3
let result=array.slice(index)
// result=4
// after slicing=> array =[1,2,3,4,5] (same as original array)
but in splice() case it affects original array; like,
// (original Array)
let array=[1,2,3,4,5]
let index= array.indexOf(4)
// index=3
let result=array.splice(index)
// result=[4,5]
// after splicing array =[1,2,3] (splicing affects original array)
There are 3 differences:
Splice will remove the selected elements from the original array and return them as a new array -Notice that the original will no longer have them-. Slice will create a new array with the selected elements without affecting the original one.
Splice receives as parameters the start index and how many elements to remove from that point. Slice receives 2 indexes, start and end.
Splice can be used to add elements at a specific position in the array by passing optional parameters.
These two methods are very confusing for beginners. I have researched and found 4 key points in slice and splice. You can read more in detail about slice vs splice.
Slice in JavaScript
Slice just returns a specified number of elements from an array. For example you have an array of 10 elements and you want to just get 3 elements from 2nd index.
It doesn't modify the original array but returns the number of elements.
The syntax of the slice is array.slice(startingIndex, elementCount)
Splice in JavaScript
Splice can also return the selected elements from the array same as the slice but it modifies the original array.
You can add a new element in an array using splice on a specific index
You can remove specified elements as well as add new elements at the same time.
The syntax of using splice is array.splice(startingIndex, removeCounter, newElement(s)[optional])
Summary
The purpose of the slice is to get only selected elements from array and it doesn't modify the original array.
The splice should be used when you want to modify the original array by removing elements and adding new elements.
Related
In this case of concat() function, i don't get why the value of the length property is not concatenated to array. Also when i change the value of length property to some random value, the first two properties are ignored as well when i concatenate them.
1st case:
let arr = [1, 2];
let arrayLike = {
0: "something",
1: "else",
[Symbol.isConcatSpreadable]: true,
length: 2
};
alert( arr.concat(arrayLike) ); // 1,2,something,else
2nd case:
let arr = [1, 2];
let arrayLike = {
0: "something",
1: "else",
[Symbol.isConcatSpreadable]: true,
length: "random",
};
console.log( arr.concat(arrayLike) ); // 1,2
Your arrayLike object is sort of mimicking being an array like arr. So if you're treating it like a normal array, then why would you expect the value of length to be counted as a value in the array?
In your actual array, arr, you would have arr.length == 2. But 2 is not a value in the array, it just tells you how many values are in the array (two values, 1 and 2). This is how JavaScript knows how many values to look for. If you were to set arr.length = 1, suddenly JavaScript would only show one value instead of two. See here:
let arr = [1, 2];
console.log(arr); //[1, 2]
arr.length = 1;
console.log(arr) //[1]
Similarly, your length: 2 property in your arrayLike object is being used to represent an array with 2 elements. If you set it to something that isn't a number, JavaScript no longer knows how many values could be in the "array", so it apparently simply counts it as 0 - an empty array.
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);
Can anyone explain to me how this code works? I looked for reduce and concat functions in Array, I understand these functions but I don't understand how this code works initialy:
var arrays = [[1, 2, 3], [4, 5], [6]];
console.log(arrays.reduce(function(flat, current) {
return flat.concat(current);
}, []));
// → [1, 2, 3, 4, 5, 6]
Well actually it's a wrong use of .reduce(). For this job you don't need no initial array. Just the previous (p) and current (c) hand to hand can do it. Such as;
var arrays = [[1, 2, 3], [4, 5], [6]];
console.log(arrays.reduce((p,c) => p.concat(c)));
Note: Initial is handy when the type of the returned value is different from the array items. However in this case you are processing arrays and returning an array which renders the use of initial redundant.
I've described each step for you.
var arrays = [[1, 2, 3], [4, 5], [6]];
console.log(arrays.reduce(function(flat, current) {
// first loop: flat - [1,2,3], current - [4,5]
// [1,2,3].concat([4,5]) -> [1,2,3,4,5]
//second/last loop: flat - [1,2,3,4,5], current - [6]
// [1,2,3,4,5].concat([6]) -> [1,2,3,4,5,6]
//function stop
return flat.concat(current);
}, []));
You could add a console.log inside the callback we pass to the reduce and think about the output:
var arrays = [[1, 2, 3], [4, 5], [6]];
console.log(arrays.reduce(function(flat, current) {
console.log('flat: '+ flat + 'current: ' + current)
return flat.concat(current);
}, []));
Initially we concat an empty array and the array [1,2,3]. So the result is a new array with elements [1,2,3]. Then we concat this array with the next element of the arrays, the array [4,5]. So the result would be a new array with elements [1,2,3,4,5]. Last we concat this array with the last element of the arrays, the array [6]. Hence the result is the array [1,2,3,4,5,6].
Ir order to understand in details the above you have to read about Array.prototype.reduce().
As it is stated in the above link:
The reduce() method applies a function against an accumulator and each
value of the array (from left-to-right) to reduce it to a single value
Furthermore the syntax is
arr.reduce(callback, [initialValue])
In you case the initialValue is an empty array, [].
So assuming we have the 2D array that you do: [[1, 2, 3], [4, 5], [6]] that is being reduced, the function is split into 2 main components.
array.reduce((accumulator, iterator) => {...}, initialValue);
flat - this is the accumulator of the reduction. It is given the initial value as passed into the second parameter of the reduce function and is used to store the values as the iterator passes through them.
current - this is the iterator that goes through all values within the data set being reduced.
So as you're iterating through the data set, your example is concatenating the accumulation array with the current value, and by the end you have your new array.
Array.reduce expects a callback with following signature:
function(previousElement, currentElement, index, array)
and an optional initial value.
In first iteration, if initialValue is passed, then previousElement will hold this value and currentElement will hold `firstArrayElement.
If not, then previousElement will hold firstArrayElement and currentElement will hold secondArrayElement.
For the following iterations, previousElement will hold value returned by previous iteration and currentElement will hold next value.
So in you example, initially flat holds [].
return flat.concat(current); will return a new merged array. This value will be used as flat for next iteration, and this process is returned. Finally, value returned by last iteration is used as final return value and is printed in console.
Which one?
arr[arr.length+1] = value
arr[arr.length] = value
arr[arr.length-1] = value
arr = arr + value
simply use
arr.push(value);
the value will be added to the end of the array
You can use the second option.
arr[arr.length] = value
Array instance .length is 0-based, beginning at 0. An array having three elements [1,2,3] will have .length 3, though indexes 0 through 2 will be populated with values 1 through 3. arr[arr.length] = value sets value at index 3, where resulting .length will be 4.
Depends on what you want to receive on return.
If you want to receive back the added element array[array.length] = thingy // <- thingy
If you want to receive back the length of the array array.push(thingy) // <- array.length
If you want to receive a copy of the array with the new element added at the last position array.concat(thingy) (care for array items to be added since they get spread i.e. [].concat([1,2,3],[4,5,6]); // <- [1, 2, 3, 4, 5, 6])
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 );
}
}