JavaScript: How Array.splice and Array.slice differ

First look at the explanations in the English dictionary:

splice | BrE splʌɪs, AmE splaɪs |
A.transitive verb
(join by interweaving the strands) twisted ji_oji_rope(s)
▸ to splice sth to sth
Twist something together
▸ to splice two things together
Join two things
▸ to get spliced
British Information Married
(join at the ends) glue zh_nji_pieces of timber, film, tape_
▸ to splice two things together
Glue two things together

slice B.transitive verb
(cut into slices) Slice b...qi pi ano_bread_
▸ to slice sth thin or thinly/thick or thickly
Slice sth into thin/thick slices
▸ to slice sth in two or half
Cut something in half
▸ thinly or thin-sliced/thickly or thick-sliced
Sliced/Thick
▸ sliced meat/cucumber
Sliced Meat/Cucumber
(cut from whole) cut off qi xuxia
▸ to slice sth off or from sth;
Cut something off from something
▸ to slice two seconds off the record
Shorten the record by two seconds
▸ to slice £300 off the budget
Reduce budget by 300
(cut through) knife_cut hu_p flesh, cloth; fin, wing cut across hu_guo_water, air_
▸ to slice a leg/an arm to the bone
Cut leg/arm deep into bones
▸ to slice the water
_ship, bow_break the waves and move forward
(4) Sport Cuts xi o_ball_
▸ to slice a ball or shot into/to sth
(in tennis) hit the ball diagonally in/somewhere
▸ to slice a catch to the wicketkeeper
(in cricket) hit the ball diagonally to the catcher
▸ to slice a corner into the net
(in football) diagonally cut a corner ball into the net

Main semantics in JavaScript

1. The splice() method returns deleted items in the array, and the slice() method returns selected elements in the array as new array objects.

2. The splice() method changes the original array, while the slice() method does not.

3. The splice() method can use n parameters:

Parameter 1: Index, required.An integer specifying where items are added/deleted and a negative value specifying where the end of the array is.

Parameter 2: Optional.Number of items to delete.If set to 0 (zero), no items will be deleted.If it fails, all items in the index provided will be deleted.

Parameter 3... N: Optional.A new item to add to the array.

var array=[1,2,3,4,5];
console.log(array.splice(2)); //Truncated from index=2, discarded later
// Displays [3, 4, 5], deleted items returned as a new array.

console.log(array);
// Show [1, 2], original array modified.

var array2=[6,7,8,9,0];
console.log(array2.splice(2,1)); // Truncate from index=2, then discard one
// Show [8]

console.log(array2.splice(2,0));
//Show empty array [], no items deleted.

console.log(array2);
// Show [6,7,9,0]

var array3=[11,12,13,14,15];
console.log(array3.splice(2,1,"Hello","World")); //This shows the meaning of twisting!
// Show [13]

console.log(array3);
// Display [11, 12,'Hello','World', 14, 15]

           -5 -4 -3 -2 -1
            |  |  |  |  |
var array4=[16,17,18,19,20];
             |  |  |  |  |
             0  1  2  3  4

console.log(array4.splice(-2,1,"me"));
// Show [19]

console.log(array4);
// Display [16, 17, 18,'me', 20]

If Argument(1) is NaN, it is treated as 0.

var array5=[21,22,23,24,25];
console.log(array5.splice(NaN,4,"NaN Be treated as 0"));
// Show [21,22,23,24]

console.log(array5);
// Display ["NaN is treated as 0", 25]

If Argument(2) is less than 0 or equal to NaN, it is treated as 0.

var array6=[26,27,28,29,30];
console.log(array6.splice(2,-5,"Hello"));
// Show []

console.log(array6);
// Display [26,27,'Hello', 28,29,30]

console.log(array6.splice(3,NaN,"World"));
// Show []

console.log(array6);
// Display [26,27,'Hello','World', 28,29,30]

If Argument(1) or Argument(2) is greater than the length of Array, the length of Array will be used for any parameter.

var array7=[31,32,33,34,35];
console.log(array7.splice(23,3,"Add Me"));
// Show []

console.log(array7);
// Show [31,32,33,34,35,'Add Me']

console.log(array7.splice(2,34,"Add Me Too"));
// Show [33,34,35,'Add Me']

console.log(array7);
// Show [31,32,'Add Me Too']

4. The slice() method may have two parameters:

Parameter 1: Required.An integer specifying where to start the selection (the index of the first element is 0).Use a negative number to select from the end of the array.

Parameter 2: Optional.An integer specifying the position at which the selection ends.If omitted, all elements from the beginning to the end of the array are selected.Use a negative number to select from the end of the array.

var array=[1,2,3,4,5]
console.log(array.slice(2));
// Displays [3, 4, 5], returning the selected element.

console.log(array.slice(-2));
// Show [4, 5], return selected elements.
console.log(array);
// Displays [1, 2, 3, 4, 5], leaving the original array unchanged.

var array2=[6,7,8,9,0];
console.log(array2.slice(2,4));
// Show [8, 9]

console.log(array2.slice(-2,4));
// Show [9]

console.log(array2.slice(-3,-1));
// Show [8, 9]

console.log(array2);
// Display [6, 7, 8, 9, 0]

If any parameter is NaN, it is treated as 0.

var array3=[11,12,13,14,15];
console.log(array3.slice(NaN,NaN));
// Show []

console.log(array3.slice(NaN,4));
// Show [11,12,13,14]

console.log(array3);
// Show [11,12,13,14,15]

If any parameter is greater than the length of the array, then any parameter will use the length of the array

var array4=[16,17,18,19,20];
console.log(array4.slice(23,24));
// Show []

console.log(array4.slice(23,2));
// Show []

console.log(array4.slice(2,23));
// Show [18,19,20]

console.log(array4);
// Show [16,17,18,19,20]

Hope to help.

Keywords: Javascript less

Added by phpdolan on Sun, 11 Aug 2019 08:06:27 +0300