Summary of APIs commonly used in javascript arrays

This article introduces to you a summary of APIs commonly used in JavaScript arrays. It has certain reference value. Friends in need can refer to it.

Introduction to common APIs for arrays

split(): Split a string into an array (operating on a string)
join(): Merge arrays into strings (operate on arrays)
concat(): Connect two arrays
splice(begin,deleteCount,insert): Splice
splic(begin,end)：Interception[begin,end)
sort(callball(value1,value2))：Sort
resever()：Reverse order
filter(callback(currentValue,index))：Filter
map(callback(currentValue,index))： Traversal, there is a return value, similar to forEach
forEach(callback(currentValue,index)): Traversal, there is no return value
reduce(callback(array) ,currentValue,index)[,array]): Accumulation processing
arguments: used inside the function to turn the function parameters into pseudo arrays (the array api cannot be used)

Example

sortSort: if value1 < value2 return -1, sort in ascending order; return 1, arranged in descending order

var arr = [1,5,4,3,2,6,7]
arr.sort((value1,value2) => {
    if(value1 < value2){
        return -1    //升序
    }else if(value1 > value2){
        return 1    //降序
    }else{
        return 0
    }
})<h3>
<code>filter</code> Filters the array and accepts a callback function. The parameters of the callback function are <code>value</code>, <code>index</code> (optional), <code>array</code>(optional)</h3>
<pre class="brush:php;toolbar:false">let arr = [1,2,3,4,5,6,7,8,9]
arr.filter((value,index) =>{
  console.log(index)
  return value > 5    //筛选条件
})

let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
function find(element){
    return fruits.filter((e)=>{
        return e.indexOf(element) >= -1    //indexOf查到元素，找到返回元素的索引
    })
}
find('ap') //['apple','grapes']

mapThe difference between forEach is: map has a return value, forEach has no return value; if forEach can return a value, just define a variable inside it to store the traversed value.

var a = [1,2,3,4]
a.map(e => e*2)    //[1,4,6,8]
a.forEach(e => e*2)    //undefined， return 也不会出来

reduceAccepts two parameters, the callback function and the first parameter of the callback function (optional); the callback function accepts four parameters: 1. The return value of the callback function (processing result) or the second parameter of reduce; 2. The element being processed; 3. The index of the element being processed; 4. The array calling reduce.

If reduce receives the second parameter, then the first parameter of the callback function is it (such as deduplication, the running logic is to process each item of the array to be processed in a push goes in, which is the process of adding); if there is no second parameter, then the first parameter of the callback function is the first item of the array to be processed (such as destroying the array, the running logic is to The array is taken directly and processed centrally, which is a process of subtraction).

//去重：把待处理数组的每一项处理后在一个个`push`进去，是加的过程
var a = [1,2,3,2,4,5,3,1]
a.sort().reduce((arr,currentValue) => {
  if(arr.length === 0 || arr[arr.length-1] !== currentValue){
    arr.push(currentValue)
  }
  return arr
},[])    //[1,2,3,4,5]

//摧毁数组：把待处理数组直接拿过来集中处理，是减的过程
function destroyer(arr) {
    return [].slice.call(arguments).reduce((current,next) =>{
        return current.filter((e) => {
            return e !== next
        })
    })
}
destroyer([1, 2, 3, 1, 2, 3], 2, 3);    //[1,1]

argumentsAlthough it is not an array, it can be converted into a real array. The following are two methods

function array(arr){
    console.log(arr)    //[1,2,3,4,5]，注意是一个伪数组，不能用数组的方法
}
array(1,2,3,4,5)

var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);

Related recommendations:

Algorithmic analysis of the full arrangement of strings in js

A brief analysis of the content of the event stream in javascript

The above is the detailed content of Summary of APIs commonly used in javascript arrays. For more information, please follow other related articles on the PHP Chinese website!