Recently in the interview encountered the examination of these two methods, and these two methods look very similar, they are very easy to confuse, so here is a summary, and thoroughly understand this problem.

splice

An array prototype method that modifies an array by deleting or replacing existing elements or adding new ones in place and returns the modified contents as an array. This method changes the original array. (Official definition)

grammar

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
Copy the code

parameter

Start (required)

Specifies the starting position of the modification (counting from 0).

If the length of the array is exceeded, the contents are added from the end of the array.

let nameArray = ['John'.'Paul'.'James'.'Tom'.'Jerry']
nameArray.splice(10.0.'eric')
console.log(nameArray);

// Run the result
[ 'John'.'Paul'.'James'.'Tom'.'Jerry'.'eric' ]
Copy the code

If it is negative, it represents the number of bits from the bottom of the array (counting from -1, which means that -n is the NTH to last element and equivalent to array.length-n).

let nameArray = ['John'.'Paul'.'James'.'Tom'.'Jerry']
nameArray.splice(-1.0.'eric')
console.log(nameArray);

// Run the result
[ 'John'.'Paul'.'James'.'Tom'.'eric'.'Jerry']
Copy the code

If the absolute value of a negative number is greater than the length of the array, the starting position is bit 0.

let nameArray = ['John'.'Paul'.'James'.'Tom'.'Jerry']
nameArray.splice(-10.0.'eric')

// Run the result
[ 'eric'.'John'.'Paul'.'James'.'Tom'.'Jerry' ]
Copy the code

DeleteCount (optional)

An integer representing the number of array elements to remove.

If deleteCount is greater than the total number of elements after start, all elements after start are deleted (including the start bit).

let nameArray = ['John'.'Paul'.'James'.'Tom'.'Jerry']
nameArray.splice(1.10)
console.log(nameArray);

// Run the result
[ 'John' ]
Copy the code

If deleteCount is omitted, or its value is greater than or equal to array.length-start (that is, if it is greater than or equal to the number of all elements after start), then all elements in the array after start are deleted.

let nameArray = ['John'.'Paul'.'James'.'Tom'.'Jerry']
nameArray.splice(1)
console.log(nameArray);

// Run the result
[ 'John' ]
Copy the code

If deleteCount is 0 or negative, the element is not removed. In this case, at least one new element should be added.

let nameArray = ['John'.'Paul'.'James'.'Tom'.'Jerry']
nameArray.splice(1, -1.'eric')
console.log(nameArray);

// Run the result
[ 'John'.'eric'.'Paul'.'James'.'Tom'.'Jerry' ]
Copy the code

Array.prototype.slice()

The slice() method returns a new array object that is a shallow copy (including begin, but not end) of the array determined by begin and end. The original array will not be changed.

grammar

arr.slice([begin[, end]])
Copy the code

parameter

The begin (optional)

Extracts the index at the beginning (starting at 0) from which the original array elements are extracted.

const animals = ['ant'.'bison'.'camel'.'duck'.'elephant']
console.log(animals.slice(1.3))

// Run result ['bison', 'camel']
Copy the code

If this parameter is negative, it extracts from the penultimate element of the original array, and slice(-2) extracts from the penultimate element of the original array to the last element, including the last element.

const animals = ['ant'.'bison'.'camel'.'duck'.'elephant']
console.log(animals.slice(-2))

// Run result ['duck', 'elephant']
Copy the code

If begin is omitted, slice starts at index 0.

const animals = ['ant'.'bison'.'camel'.'duck'.'elephant']
console.log(animals.slice())

/ / run results [' ant ', 'bison', 'camel', 'duck', 'elephant']
Copy the code

End (optional)

Extract the index at the end (starting at 0) and end the extraction of the original array element at that index. Slice extracts all elements indexed from begin to end (including begin, but not end).

// slice(1,4) extracts all elements in the array from the second to the fourth element
// (elements with indexes 1, 2, 3).
const animals = ['ant'.'bison'.'camel'.'duck'.'elephant']
console.log(animals.slice(1.4))

// Run the result
[ 'bison'.'camel'.'duck' ]
Copy the code

If this parameter is negative, it indicates the penultimate element in the original array at the end of the extraction. Slice (-2,-1) extracts the penultimate element of the array to the last element (excluding the last element, i.e. only the penultimate element).

const animals = ['ant'.'bison'.'camel'.'duck'.'elephant']
console.log(animals.slice(1, -2))

// Run the result
[ 'bison'.'camel' ]
Copy the code

If end is omitted, slice extracts all the way to the end of the original array.

If end is greater than the length of the array, Slice will extract all the way to the end of the array.

const animals = ['ant'.'bison'.'camel'.'duck'.'elephant']
console.log(animals.slice(0))
console.log(animals.slice(0.100))

// Run the result
[ 'ant'.'bison'.'camel'.'duck'.'elephant' ]
[ 'ant'.'bison'.'camel'.'duck'.'elephant' ]
Copy the code

Do the problem

// There is an array
const names = ['John'.'Paul'.'James'.'Tom'.'Jerry']
// Execute the following code in sequence
console.log(names.splice(1.2))
console.log(names);
console.log(names.slice(1.4))
console.log(names)
console.log(names.slice())
// What is the output?
Copy the code

The answer

[ 'Paul'.'James' ] at names.splice(1.2) ['John'.'Tom'.'Jerry' ] at names
[ 'Tom'.'Jerry' ] at names.slice(1.4) ['John'.'Tom'.'Jerry'Product names] at ['John'.'Tom'.'Jerry'] at names. Slice ()Copy the code

contrast

  1. Splice the second argument is deleteCount, which is the number of deletions; The second argument to slice is end, which is the end index.
  2. Splice alters the array, while slice does not.
  3. Splice can add elements to arrays, slice can’t.
  4. Slice retrieves an array including begin, but not end.