Summary of array methods in javascript (with code)

This article brings you a summary of array methods in JavaScript (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1.copyWithin() method will change the original array
Copy the first two elements of the array to the last two elements:
array.copyWithin(target, start, end)
Parameters Description
target Required. Copy to the specified target index location.
start Optional. The starting position for element copying.
end Optional. The index position to stop copying (defaults to array.length). If it is a negative value, it represents the reciprocal value.

var arr = [1,2,3,4,5];
arr.copyWithin(3,0,2);
console.log(arr);  //1,2,3,1,2

2.every(function(){}) will not change the original array
Run a function for each item in the array. If each item returns true, it will return true;

var arr=[1,2,3,4,5];
var result=arr.every(function(item){
  return item>1;
})
console.log(result);  //false

3.some(function(){}) will not change the original array
Run a function for each item in the array. If one item returns true, it will return true;

var arr=[1,2,3,4,5]
var result=arr.some(function(item){
  return item>1;
})
console.log(result)  //true

4.fill() Using a fixed value to fill the array will change the original array
array.fill(value, start, end)
Parameter Description
value Required. The value to fill.
start Optional. Start filling the position.
end Optional. Stop filling position (default is array.length)

var arr=[1,2,3,4,5];
arr.fill("哈哈",0,3);
console.log(arr);  //[ '哈哈', '哈哈', '哈哈', 1, 2 ]

5.filter() will not change the original array
Create a new array, the elements in the new array are checked by checking the specified array to meet the conditions All elements.
Note: filter() will not detect empty arrays.

var ages = [22, 53, 16, 40];
var ar5=ages.filter(function(age){
  return age>30;
})
console.log(ar5) //[ 53, 40 ]

6.find() will not change the original array
Returns the value of the first element of the array that passes the test (judged within the function).
The find() method calls a function execution once for each element in the array:
When an element in the array returns true when testing the condition, find() returns the element that meets the condition, and subsequent values ​​will not Then call the execution function.
If there is no element that meets the conditions, it returns undefined
Note: The find() function will not be executed for an empty array.

var num = [212, 537, 160, 401];
function odd(x){
  return x%2;
}
var ar6=num.find(odd);
console.log(ar6);   //537

7.findIndex() will not change the original array
Returns the first element position of the array passed in a test condition (function) that meets the conditions.
The findIndex() method calls a function execution once for each element in the array:
When the element in the array returns true when testing the condition, findIndex() returns the index position of the element that meets the condition, and then The value will no longer call the execution function.
If there is no element that meets the conditions, -1 is returned.
Note: The findIndex() function will not be executed for an empty array.

var num = [212, 537, 160, 401];
function odd(x){
  return x%2;
}
console.log(num.findIndex(odd)); //1

8.indexOf() will not change the original array
Search for elements in the array and return its location.

var num = [212, 537, 160, 401];
console.log(num.indexOf(160));  //2

9.lastIndexOf() will not change the original array
Returns the last position where a specified string value appears, and searches from back to front at the specified position in a string.

var num = [212, 537, 160, 401];
console.log(num.indexOf(160));  //

10.join() will change the original array
Convert the array into a string. The elements are separated by the specified delimiter. If there is no comma by default,
toString() will change Original array
Convert the array to a string and return the result, without parameters

var num = [212, 537, 160, 401];
console.log(num.join());  //212,537,160,401

11.map() will not change the original array
Process each element of the array through the specified function and return The processed array

var arr=[12,23,45,56,78];
var arr1=arr.map(function(x){
  return x+1;
})
console.log(arr1);  //[ 13, 24, 46, 57, 79 ]
console.log(arr);   //[ 12, 23, 45, 56, 78 ]

12.forEach() will not change the original array
The method is used to call each element of the array and pass the elements to the callback function.
Note: forEach() will not execute the callback function for an empty array

var num=[ 212, 537, 160, 401 ];
num.forEach(function(num){
  return num/2;
})
console.log(num);  //[ 212, 537, 160, 401 ]

13.reduce() will not change the original array
Receives a function as an accumulator, each element in the array Values ​​start to decrease (from left to right), eventually counting to one value.
reduce() can be used as a higher-order function for compose of functions.
Note: reduce() will not execute the callback function for an empty array

var arr=[ 12, 23, 45, 56, 78 ];
var arr2=arr.reduce(function(total,item){
  return total-item;
})
console.log(arr2); //-190
console.log(arr);  //[ 12, 23, 45, 56, 78 ]

14.reduceRight() will not change the original array
The function is the same as the reduce() function, but different ReduceRight() accumulates the array items in the array from the end of the array forward.
Note: reduce() will not execute the callback function for an empty array

var arr=[ 12, 23, 45, 56, 78 ];
var arr2=arr.reduceRight(function(total,item){
  return total-item;
})
console.log(arr2);  //-58
console.log(arr);   //[ 12, 23, 45, 56, 78 ]

15.pop() will change the original array
Delete the last element of the array and return the deleted element. No parameters
shift() will change the original array
Delete and return the first element of the array. Without parameters
push() will change the original array
Add one or more elements to the end of the array and return the new length. The parameter is the element to be added, which can be one or more.
unshift() will change the original array.
Add one or more elements to the beginning of the array and return the new length. The parameter is the element to be added, which can be one or more

16.sort() 会改变原数组
对数组的元素进行排序,只能是一位数，如果是两位数会按字典序排列，改进：加一个回调函数

var arr2=[2,8,45,12,5,67,9];
arr2.sort(function(a,b){
  return a-b;
});
console.log(arr2);  //[ 2, 5, 8, 9, 12, 45, 67 ]

17.reverse() 会改变原数组
反转数组的元素顺序

var arr2=[ 2, 5, 8, 9, 12, 45, 67 ];
arr2.reverse();
console.log(arr2);    //[ 67, 45, 12, 9, 8, 5, 2 ]

18.valueOf() 不会改变原数组
返回数组对象的原始值，一般原样返回

var arr2=[ 67, 45, 12, 9, 8, 5, 2 ];
arr2.valueOf();
console.log(arr2);  //[ 67, 45, 12, 9, 8, 5, 2 ]
// 可以自己定义一个对象的valueOf()方法来覆盖它原来的方法。
// 这个方法不能含有参数，方法里必须return一个值。
var x = {};
x.valueOf = function(){
    return 10;
}
console.log(x+1);// 输出10
console.log(x+"hello");//输出10hello

19.slice() 不会改变原数组
选取数组的的一部分，并返回一个新数组。
array.slice(start, end)
参数 描述
start 可选。规定从何处开始选取(包括)。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元 素，-2 指倒数第二个元素，以此类推。
end 可选。规定从何处结束选取（不包括）。该参数是数组片断结束处的数组下标。
如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。
如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

var arr2=[ 67, 45, 12, 9, 8, 5, 2 ];
console.log(arr2.slice(1,4));  //[ 45, 12, 9 ]
console.log(arr2);     //[ 67, 45, 12, 9, 8, 5, 2 ]

20.splice() 会改变原始数组
方法用于插入、删除或替换数组的元素。
array.splice(index,howmany,item1,.....,itemX)
参数 描述
index 必需。规定从何处添加/删除元素。
该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany 必需。规定应该删除多少元素。必须是数字，但可以是 "0"。
如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX 可选。要添加到数组的新元素

arr3=[2,3,4,5,6,7,8];
//删除
arr3.splice(2,3);
console.log(arr3);   //[ 2, 3, 7, 8 ]
//增加
arr3.splice(1,0,9,10);
console.log(arr3);  //[ 2, 9, 10, 3, 7, 8 ]
//替换
arr3.splice(0,3,8,7,3);  //[ 8, 7, 3, 3, 7, 8 ]
console.log(arr3);

最后再小结一下：

会改变原数组的方法：copyWithin()、fill()、join()、pop()、push()、shift()、unshift()、sort()、reverse()、splice()；

不会改变原数组的方法：every()、some()、filter()、find()、findIndex()、indexOf()、lastIndexOf()、map()、forEach()、reduce()、reduceRight()、valueOf()、slice()；

相关推荐：

对JavaScript数组的方法总结

JavaScript数组中的indexOf方法

The above is the detailed content of Summary of array methods in javascript (with code). For more information, please follow other related articles on the PHP Chinese website!