Js | Js array method usage and details summary (on)

Preface

This article mainly summarizes the modifier methods in the array method in Js. It will focus on explaining splice()similar common and important operations. For most of the methods that are rarely used, simple examples are used to illustrate the functions and usage methods. You can refer to the link given at the end of the article to further your study. The introduction inside is also more comprehensive. The sample codes in this article are all based on ES6grammar.

Modifier method

修改器方法It is a method that changes the value of the original array itself . The opposite is that 访问方法, for example slice(), 访问方法it does not modify the original array, but returns a new array. For most 修改器方法of Vue, it can trigger a view update (except copyWithin()and fill()). There are mainly the following methods:

copyWithin(target[, start[, end]])(ES6)

Inside the array, copy a sequence of elements to another sequence of elements, overwrite the original value, and the return value is the modified array. See the sample code and comments below for specific usage. To understand the detailed usage and details of this method, please see the link ( this method cannot trigger the view update in Vue ).

let arr1 = [0, 1, 2, 3, 4, 5, 6, 7]
// output: [1, 2, 3, 4, 4, 5, 6, 7]
// 当 end 大于数组长度时，等同于 end 为 arr.length 时的结果
// 即用下标[1, 7]范围的值覆盖原数组[0, 3]范围内的值
// 多余的元素会被舍弃，即[5, 7]，如下所示：
// 1 2 3 4 5 6 7
// ↓ ↓ ↓ ↓
// 0 1 2 3
console.log(arr1.copyWithin(0, 1, 5))

let arr2 = [0, 1, 2, 3, 4, 5, 6, 7]
// output: [2, 3, 4, 5, 6, 7, 6, 7]
// 当 end 省略时, 即等同于(0, 2, arr.length)
// 在这里指用下标[2, 7]范围内的值覆盖原数组[0, 5]范围内的值
console.log(arr2.copyWithin(0, 2))

let arr3 = [0, 1, 2, 3, 4, 5, 6, 7]
// ouput: [0, 1, 2, 0, 1, 2, 3, 4]
// 当 start、end均省略时，等同于(target, 0, arr.length)
// 在这里指用下标[0, 7]范围内的值覆盖原数组[3, 7]范围内的值
// 多余的元素会被舍弃，即[5, 7]
console.log(arr3.copyWithin(3))

note

A method for the three parameters target, start, endand can be negative, if targetnegative and the absolute value is less than the corresponding length of the array, it may be directly targetreplaced target + arr.length, the result is the same, and when targetgreater than the length of the array, is targetequal to 0 , The same is true for startand end, in addition, when startthe value is greater than or equal endto, the result is still the original array. In addition to the following method specifically described, where there can be specified startand endto determine the scope of this are the same . For the convenience of discussion, the following methods will no longer discuss the case of negative parameters ( spliceexcept), you can verify the exercise yourself.

fill(value[, start[, end]])(ES6)

Use a fixed value to fill all elements in an array from the start index to the end index, excluding the end index , and the return value is the modified array. See the sample code and comments below for specific usage. To understand the detailed usage and details of this method, please see the link ( this method cannot trigger the view update in Vue ).

let arr3 = [1, 2, 3, 4]
// output: [0, 0, 0, 4]
// 将下标[0, 2]范围的值均置0
console.log(arr3.fill(0, 0, 3))

let arr2 = [1, 2, 3, 4]
// output: [1, 0, 0, 0]
// 将下标[1, arr2.length]范围的值置0
// 当 end 省略时，默认值为 arr.length
console.log(arr2.fill(0, 1))

let arr1 = [1, 2, 3, 4]
// output: [0, 0, 0, 0]
// 将数组所有元素均置0
// 当 start 与 end 均省略时，默认值分别为 0 和 arr.length
console.log(arr1.fill(0))

splice(start[, deleteCount[, item1[, item2[, ...]]]])

Modify the array by deleting or replacing existing elements or adding new elements in place, and return the modified content in the form of an array . It can be seen from the function description that the method is powerful, and it is also a method that must be mastered. Since this method also corresponds to different functions depending on whether optional parameters are specified, it is specifically described in detail here. To understand the detailed usage and details of this method, see the link .
1. Only one parameter
  
  When only one parameter, the format of splice(start)the time, which represents the original array deleted from startall the elements of the start index, the original array elements is removed within a specified range, it returns the removed element in an array, as follows:
```
let arr = [0, 1, 2, 3, 4, 5]
// output: [3, 4, 5]
// 返回值为被删除的元素，即下标[3, 5]内的元素
console.log(arr.splice(3))
// output: [0, 1, 2]
// 原数组在运算后，被删除了[3, 5]内的元素
console.log(arr)
```
2. There are two parameters
  
  When there are two parameters, the format splice(start, deleteCount), that is representative of the original array from startthe start index, deleted deleteCountelements, elements of the original array is removed within a specified range, returns the removed element in an array, as follows:
```
let arr = [0, 1, 2, 3, 4, 5]
// output: [2, 3, 4]
// 返回值为被删除的元素，即下标[2, 4]内的元素
console.log(arr.splice(2, 3))
// output: [0, 1, 5]
// 原数组在运算后，被删除了2, 3, 4
console.log(arr)
```
  note
  
  When the second parameter is deleteCountgreater than the startnumber of elements from the beginning to the end of the array, it is equivalent to splice(start)deleting startall the elements starting from the subscript. When deleteCount <= 0the time does not remove any elements of the original array unchanged.
3. Three or more parameters
  
  When there are three or more parameters, the format splice(start[, deleteCount[, item1[, item2[, ...]]]]), that is from the array representing startthe start index, deleted deleteCountelements, and item1、item2...is inserted into starta position index beginning of the return value of the element to be deleted is still, as follows:
```
let arr1 = [0, 1, 2, 3, 4, 5]
// output: [2, 3]
// 返回值为被删除的下标从2开始的2个元素, 即[3, 3]
console.log(arr1.splice(2, 2, 5, 6, 7))
// output: [0, 1, 5, 6, 7, 4, 5]
// 原数组被删除两个元素后为[0, 1, 4, 5]
// 5, 6, 7三个数从下标2处被插入到原数组
console.log(arr1)

let arr2 = [0, 1, 2, 3, 4, 5]
// output: []
// 未删除元素，故返回值为[]
console.log(arr2.splice(6, 0, 5, 6, 7))
// output: [0, 1, 2, 3, 4, 5, 5, 6, 7]
// 当 start <大于等于>数组长度时，即向数组末尾添加元素
// 补：当负数的绝对值<大于>数组长度时，也同此
console.log(arr2)
```
  note
  
  When the number of elements to delete deleteCountthe number of elements needed to be inserted with the same, can be seen as a modification element, and when deleteCount <= 0the time does not remove elements i.e., if there is subsequent parameters, can be viewed as elements increases, and in accordance with the specified startspecified Insertion position. In addition, the method can be combined with ES6 ...grammar, using splice(start, deleteCount, ...[arr])this form, is also very useful in many cases.
push(element1, ..., elementN)

Add one or more elements to the end of the array , and return the new length of the array. The original array is modified to the array after the specified elements are added. The method including the following methods are easy to use and understand, so a brief description, to understand the detailed use of the method and details can be found in the link .
```
let arr = [1, 2, 3]
// output: 6
// 该方法返回值为添加元素后数组的新长度
console.log(arr.push(4, 5, 6))
// output: [1, 2, 3, 4, 5, 6]
// 数组在<末尾>按顺序添加所给的元素
console.log(arr)
```
pop()

Delete the last element from the array and return the value of the element. This method has no parameters . The original array is modified to the array after adding the specified element. When the array is empty, it returns undefined. For detailed usage and details of this method, see the link .
```
let arr = [1, 2, 3]
// output: 3
// 该方法返回被移除的最后一个元素
console.log(arr.pop())
// output: [1, 2]
// 数组删除最后一个元素的结果
console.log(arr)
```
shift()

Delete the first element from the array and return the value of the element. This method has no parameters . The original array is modified to the array after adding the specified element. When the array is empty, it returns undefined. For detailed usage and details of this method, see the link .
```
let arr = [1, 2, 3]
// output: 1
// 该方法返回被移除的第一个元素
console.log(arr.shift())
// output: [2，3]
// 数组删除第一个元素后的结果
console.log(arr)
```
unshift(element1, ..., elementN)

Add one or more elements to the beginning of the array, and return the new length of the array. The original array is modified to the array after adding the specified elements. For detailed usage and details of this method, see the link .
```
let arr = [3]
// output: 3
// 该方法返回添加了元素后的新数组长度
console.log(arr.unshift(1, 2))
// output: [1, 2，3]
// 数组在开头按顺序添加所传参数
console.log(arr)
```

sort([compareFunction])

Sort the elements of the array using the in-place algorithm and return the array. The default sort order is constructed when the elements are converted into strings and then their UTF-16 code unit value sequences are compared . For detailed usage and details of this method, see the link .

let arr1 = [1, 2, 10, 3, 22]
// output: [1, 10, 2, 22, 3]
// 如果第一次使用sort可能会对这个结果感到奇怪，但正如
// 上述所说默认排序在将元素转成字符串后进行排序的，因
// 此，想要按照数字整型排序，则必须自己指定排序函数。
console.log(arr1.sort())

let arr2 = [1, 2, 10, 3, 22]
// output: [1, 2, 3, 10, 22]
// 在自己设置了排序方式后，可以发现结果符合了预期，至
// 于所传函数的语法问题以及如果自己编写指定的排序方式，
// 不是本篇博客所要讨论的，大家可以多自行查阅资料
console.log(arr2.sort((i, j) => i - j))

reverse()

Reverse the position of the elements in the array and return the array. To understand the detailed usage and details of this method, see the link .
```
let arr = [1, 2, 11, 3]
// output: [3, 11, 2, 1]
// 返回数组颠倒后的结果
console.log(arr.reverse())
```

to sum up

This article mainly introduces the method of array modifier in Js. It splice()can be said that it needs to be mastered. The above is the whole content of this article. If there is any error, please point it out. I hope to get your corrections. I will talk about the rest afterwards. of 访问方法and 迭代方法, so stay tuned ~