JavaScript Array Methods - Systematic Summary and Detailed Explanation

First of all, the significance of summary is to make the chaos more orderly, so that the thinking will be clearer during the use process.

Notes on using arrays:

• Mutating and non-mutating methods. That is, the mutation method will change the original array, while the latter will not. The mind map below labels them.
• You may want to note that array methods and string methods have several similarities. How do you switch between arrays and strings?
• Some method parameters support negative numbers, and the second parameter of some methods does not represent coordinates but numbers.
• We can even sort out the callback functions. Most callback function parameter formats are the same, but some callback functions are different.
• When split, slice, splice, join, contains, includes, push, pop, shift, unshift or even you are confused by similar words, so that you can't tell which is the array method and which is the string method, and what each function does. Of course, I can now tell you whether the above methods are array methods or string methods, or even whether string methods and array methods have such a method, but there is no need to do so because it will be difficult for you to remember them after all. So we will systematically classify and summarize them below, and it will be easy for you to distinguish them.

Next you just need to forget your previous disorganized memory and rebuild your memory by sorting it out.

Common array methods

Adding and deleting array elements

Manipulating the array header

• unshift(value)變異方法inserts an element into the head of the array
• The shift()變異方法removes the first element from the array head

Operate on the tail of an array

• push(value) mutation method pushes an element to the end of the array
• pop() mutation method pops an element at the end of the array

Add or delete at any location

splice(start,length[…,value])變異方法

The second parameter is the number. When it is not 0, it means that length elements need to be deleted starting from the start. Addition and deletion can be done at the same time.

Array concatenation

• concat(...arr) String has similar method

Convert array to string

• join(str) concatenates the array into a string using the specified characters
• toString() Converts an array into a string by splitting it with ","

Intercepting an Array

• slice(start[,end])支持負數 字符串有該類似方法

Array sorting methods

Sorting

• sort(callback)變異方法to sort the array

The callback function returns ab to sort from large to small, and ba to sort from small to large.

//callback function format function callback(a,b) {
	return ab
}

Sequence Reversal

The reverse()變異方法reverses the order of the array

Array Iteration Methods

Array traversal search

The return value is the subscript

• indexOf(targetValue) traverses the array from left to right, finds the subscript of the target value, and returns the subscript value that appears for the first time.
• lastIndexOf(targetValue) traverses the array from right to left, finds the subscript of the target value, and returns the subscript value that appears for the first time.
• findIndex(callback) uses the callback function to conditionally judge the array elements and return the index value of the element that meets the condition for the first time

The return value is content

• find(callback) uses the callback function to conditionally judge the array elements and returns the value of the element that meets the condition for the first time

Array traversal processing

callback(value[,index[,array]])

//callback callback function format function callback( value, index, array) {
	//deal with ...
	return ... // Is the retrun statement not needed here? Annotate it below.}

• forEach(callback) traverses the array and only processes those without return value. The callback does not require a return statement
• map(callback) traverses each element of the array and uses callback to process the array, and adds the return value processed by callback to the new array and returns the new array.
• filter(callback) performs a filter operation on the array and returns a new array consisting of elements whose callback return value is true.
• every(callback) traverses the array. If the callback return value is true, the method return value is true
• some(callback) traverses the array. If one of the callback return values ​​is true, the method return value is true.

callback(total,value[,index[,array]])

//callback callback function format function callback(total, value, index, array) {
  return total + value;
}

• reduce(callback[,initial value])
  

The array is shortened from left to right, and the result of the last processing is passed to the next callback function as a parameter for the callback function to use.

• reduceRight(callback[,initial value])
  

The array is shortened from right to left, and the result of the last processing is passed to the next callback function as a parameter for the callback function to use.

Other array methods

includes(value) ES6 Determines whether an array contains a certain element

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!