js array method

Basic concept of array:

1. What is an array
Array is a container for storing one or more data. It is a group of memory space, which is usually used to process data in batch. This group of memory space is called array.
2. Characteristics of array
Array is a non picky guy. There is no requirement to align the data stored by itself. Whether it is quantity or type, array elements are always managed through array subscripts.
Array name. Length represents the length of the array and the number of elements currently stored in the array. Since the subscript starts from 0, array length - 1 represents the subscript of the last element of the array.

There are two ways to create arrays in JavaScript

(1) Use the Array constructor:
var arr1 = new Array(); // Create an empty array
var arr2 = new Array(20); // Create an array of 20 items
var arr3 = new Array(“lily”,“lucy”,“Tom”); // Create an array of 3 strings
(2) Use array literal notation:
var arr4 = []; // Create an empty array
var arr5 = [20]; // Create an array containing 1 items
var arr6 = [“lily”,“lucy”,“Tom”]; // Create an array of 3 strings

Access operation of array

Find element
indexOf() function is one of the most commonly used access functions, which is used to find whether the passed parameters exist in the target array. If it contains, the index is returned, and if it does not contain, - 1 is returned.
The lastIndexOf() function returns the index of the last element in the same element.

String representation of an array
Both join() and toString() can convert arrays to strings

Create a new array from an existing array
The concat() method can combine multiple arrays to create a new array
The splice() method intercepts a subset of an array to create a new array. The splice() method has other purposes, such as adding or deleting elements for an array.

Variable function

Adding elements to an array

push() can take any number of parameters, add them to the end of the array one by one, and return the length of the modified array.
unshift() adds a parameter to the beginning of the original array and returns the length of the array.

var arr = ["Lily","lucy","Tom"];

var count = arr.push("Jack","Sean");
console.log(count); // 5
console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"]

var count = arr.push("Jack","Sean");
console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"]

Remove element from array

The pop() method can delete the elements at the end of the array
The shift() method deletes the first element of the array

var arr = ["Lily", "lucy", "Tom", "Jack", "Sean"];

var item = arr.pop();
console.log(item); // Sean
console.log(arr); // ["Lily", "lucy", "Tom", "Jack"]

var item = arr.shift();
console.log(item); // Lily
console.log(arr); // [ "lucy", "Tom", "Jack", "Sean"]

Add and remove elements from the middle of the array

The splice() method can add / replace / delete elements for an array

splice(Start index,[[Number of elements to be deleted(This parameter is set to 0 when using the day leave element)],Array elements to add])

Sort arrays

The reverse() method can flip the elements in the array

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]
console.log(arr); // [1, 3, 5, 7] (original array not modified)

The sort() method can sort the array, but if the elements to be sorted are numbers, the sorting result of the sort() method is not satisfactory.
But you can pass a comparison function in the sort method!

var arr1 = ["a", "d", "c", "b"];
console.log(arr1.sort()); // ["a", "b", "c", "d"]
arr2 = [13, 24, 51, 3];
console.log(arr2.sort()); // [13, 24, 3, 51]
console.log(arr2); // [13, 24, 3, 51] (the meta array is changed)
//terms of settlement
function compare(num1, num2) {
        return num1 - num2;

    console.log(num) //[3,13,24,51]

Iterator method

The iterator method can execute a function for each element in the array

Iterator methods that do not generate new arrays

forEach(): loop through the array and run the given function for each item in the array. This method has no return value. The parameters are all of function type. By default, there are passed parameters. The parameters are: the contents of the traversed array; The corresponding array index, the array itself.

var arr = [1, 2, 3];
arr.forEach(function(x, index, a){
console.log(x + '|' + index + '|' + (a === arr));
// Output is:
// 1|0|true
// 2|1|true
// 3|2|true

every(), which receives a function with a return value of boolean type and uses the function for each element in the array. If the function returns true for all elements, the method returns true.

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
return x < 10;
console.log(arr2); //true
var arr3 = arr.every(function(x) {
return x < 3;
console.log(arr3); // false

The some() method is the same as the every method. As long as there is an element that makes the function return true, the function returns true.

The reduce() method receives a function and returns a value. This method will start with an accumulated value, and continuously call this function on the accumulated value, accumulated value and subsequent elements in the array until the last element in the array, and finally return the obtained accumulated value.

    var nums = [1, 200, 31, 100]
    var sum = nums.reduce((total, num)=>total+num)

Iterator method to generate a new array

map() and filter() iterator methods can generate new arrays.

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
console.log(arr2); //[1, 4, 9, 16, 25]

map() and forEach() are a bit like using a function for each element in an array. The difference is that the map function returns a new array whose elements are the result of applying a function to the original elements.

filter(): the "filter" function. Each item in the array runs the given function and returns an array that meets the filter conditions.

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
console.log(arr2); //[1, 4, 7, 8, 9, 10]

Tags: Javascript Front-end

Posted on Sun, 24 Oct 2021 02:30:15 -0400 by beanwebb