Common uses of Array.prototype.splice

Common uses of Array.prototype.splice

This article mainly explains the comprehensive usage of splice, and the design knowledge points are more detailed. There are the following five parts

• Introduction to the splice function
• splice implements adding elements to an array
• splice implements array deletion elements
• splice implements an array to change the value of an element
• Application of splice in vue

1. Introduction to the splice function

MDN official explanation: The splice() method modifies the array by deleting or replacing existing elements or adding new elements in place, and returns the modified content in the form of an array . This method mutates the original array .

important point:

• The splice method is different from slice and concat, splice will directly modify the original array.
• splice is powerful and can realize addition, deletion and modification operations.

1.1 Syntax format

splice(start)//表示从 start 下标开始截取
splice(start, deleteCount)//表示从 start 下标开始截取 deleteCount 个元素
splice(start, deleteCount, item1)//表示从 start 下标开始截取 deleteCount 个元素，再插入一个元素
splice(start, deleteCount, item1, item2, itemN)//表示从 start 下标开始截取 deleteCount 个元素，再插入N个元素

1.2 parameters

• The start parameter value is an integer specifying the starting position of the modification (counting from 0).

  • If the length of the array is exceeded, add content from the end of the array;
  • If it is a negative value, it means the number from the end of the array (counting from -1), which is equivalent to array.length-n;
    • If the absolute value of the negative number is greater than the length of the array, it means that the starting position is the 0th bit.

• The deleteCount parameter value is an integer, indicating the number of array elements to be removed.

  • If deleteCount is omitted or deleteCount >= (array.length - start), all elements after the array start will be deleted (including the start bit).
  • If deleteCount <= 0, no elements are removed. In this case, at least one new element should be added.

• The itemN parameter indicates the element to be added to the array, starting from the start position.

  • If not specified, splice() will only remove array elements.

1.3 return value

The return value is an array type

• If only one element was removed, returns an array containing only one element.
• Returns an empty array if no elements were removed.

2.splice implements adding elements to the array

const arr = [0,1,2,3,4,5,6];
arr.splice(3,0,7,7,7);//在下标3的位置删除0个元素，插入7，7，7
console.log(arr);//[0,1,2,7,7,7,3,4,5,6]

2.1 splice implements array deletion elements

const arr = [0,1,2,3,4,5,6];
arr.splice(3,3);//在下标3的位置删除3个元素
console.log(arr);//[0,1,2,6]

2.2 splice implements arrays to change the value of elements

const arr = [0,1,2,3,4,5,6];
arr.splice(3,3,7,7,7);//在下标3的位置删除3个元素，插入7，7，7
console.log(arr);//[0,1,2,7,7,7,6]

2.3 Application of splice in vue

Since the data responsiveness of vue2 is implemented through the getter and setter in the Object.defineProperty() method, when we dynamically add or delete object properties, we will not be able to monitor; so use $set and $delete in vue2 to solve solved the problem.

So Vue cannot detect changes in the following arrays :

• When you set an array item directly by index, for example: vm.items[indexOfItem] = newValue
• When you modify the length of the array, for example: vm.items.length = newLength

Of course, the array can also be solved by using the $set and $delete methods, but in order to operate data more conveniently, vue2 has rewritten some methods on the data prototype , and the following methods can be used to dynamically monitor the elements of the array.

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

So to solve the problem of directly modifying the elements of the array, you can use splice: vm.items.splice(index,1,newValue)
to solve the problem of modifying the length of the array, you can also use splice:vm.items.splice(newLength)

Code words are not easy, friends who find it helpful will like it, and follow it.

If you have doubts about this article, you can discuss it in the comment area. Everyone is welcome to point out the wrong views in the text.