JavaScript – Array Methods

1. How to add an element to the beginning of the array?

var arr = ['a','b','c']
for(var i=arr.length-1;i>=0;i + + ){
    arr[i + 1] = arr[i]
}
arr[0] = 'd'
console.log(arr)

This is more complicated to operate. In order to facilitate our operation on arrays, js provides some methods to quickly operate arrays:

unshift – add one or more elements to the beginning of the array – returns the new length of the array

var arr = ['a','b','c'];
var l = arr. unshift('d')
console.log(arr) // ['d','a','b','c']
console.log(l) // 4

push – add one or more elements to the end of the array – returns the new length of the array

var arr = ['a','b','c'];
var l = arr. push('d')
console.log(arr) // ['a','b','c','d']
console.log(l) // 4

shift – removes the first element of the array – returns the removed element

var arr = ['a','b','c'];
var ele = arr. shift()
console.log(arr) // ['b','c']
console.log(ele) // 'a'

pop – deletes the last element of the array – returns the deleted element

 var arr = ['a','b','c'];
  var ele = arr. pop()
  console.log(arr) // ['a','b']
  console.log(ele) // 'c'

splice – Add, delete, and modify operations on arrays

var arr = ['a','b','c']
// Change - parameter 1: start subscript; parameter 2: number of deletions; parameter 3: new element to be placed at the deleted position - can be multiple
arr.splice(1,1,'d') // ['a','d','c']
// increase
arr.splice(1,0,'d') // ['a','d','b','c'] - delete 0, just do not delete, and then put new elements
// delete - the third parameter can be omitted
arr.splice(1,0) // ['a','c']

concat – Concatenation of arrays

var arr = ['a','b','c'];
var brr = ['d','e','f'];
// Combine arr and brr into a larger array
var crr = arr.concat(brr) // ['a','b','c','d','e','f']
// Merge one or more values and arrays into one big array
var crr = arr.concat(1,2,3)// ['a','b','c',1,2,3]

sort – the sort of the array

var arr = [9,5,3,7,1,6,4,8,2];
arr.sort() // default ascending order
console.log(arr) // [1,2,3,4,5,6,7,8,9]
arr.sort(function(a,b){ // a represents the previous number, b represents the following number
    return a-b; // ascending order - if the previous number - the next number > 0, then swap positions
    return b-a; // descending order - if the following number - the previous number > 0, then swap positions
})

reverse – the reverse of the array

var arr = ['a','b','c'];
arr. reverse()
console.log(arr) // ['c','b','a']

join – Join the elements in the array together using the specified connector

var arr = ['a','b','c'];
var str = arr.join('_') // parameter is a joiner
console.log(str) // a_b_c

var str = arr.join() // use comma connection by default
console.log(str) // a,b,c

var str = arr. join('')
console.log(str) // abc

slice – slice an array

var arr = ['a','b','c','d','e','f'];
// Intercept 'b', 'c', 'd' in the array to form a new array
var brr = arr.slice(1,4) // Parameter 1 is the subscript of the start interception, parameter 2 is the end subscript of the interception, and the result does not contain the element corresponding to the end subscript
console.log(brr) // ['b','c','d']
// If the second parameter is omitted, the default is to intercept from the start subscript to the end of the array
var crr = arr. slice(1)
console.log(crr) // ['b','c','d','e','f']

indexOf method

Find the first occurrence of an element in an array

grammar:

arr.indexOf(element,[start subscript to start searching]);
# Parameter 1: the element to be found
# Parameter 2: optional. From which subscript to start searching backward
# Return value: If found, return the subscript of this element in the array, if not found, return -1

example:

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); // 2 - Find the index of the first occurrence of the number 5 in the array
console.log(arr.lastIndexOf(5)); // 5 - finds the last occurrence of the number 5 in the array
console.log(arr.indexOf(5,3)); // 5 - Find the first occurrence of the number 5 in the array starting from subscript 2
console.log(arr.lastIndexOf(5,4)); // 2 - Find the last occurrence of the number 5 in the array starting from subscript 4
console.log(arr.indexOf("5")); // -1 - the array is full of numbers, the string 5 cannot be found, so return -1

forEach method

for iterating over the array

grammar:

arr.forEach(function(value, subscript, current array){
    // code snippet
});
# In this method, a function parameter needs to be passed in. The parameters of this function are described as follows:
# Parameter 1: each value traversed by the array
# Parameter 2: optional. The subscript corresponding to each value in the array traversed
# Parameter 3: optional. The current array being traversed

example:

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

Instructions for use:

This method has no return value, and the return value is undefined, which will not change the value of the original array.

map method

Traverse the array and process each element with a function to form a new element, and all new elements form a new array and return

grammar:

map method

Traverse the array and process each element with a function to form a new element, and all new elements form a new array and return

Syntax:

example:

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

Instructions for use:

This method is mainly used to process each value in the array with the same rules, and form a new array to return

filter method

Combine the values in the array that meet the specified conditions into a new array and return

grammar:

arr.filter(function(value, subscript, current array){
    return filter
});

example:

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

Instructions for use:

The usage method and function are very similar to the map method, but the operation rules are different. The function in the map method is used to return new elements, and the function in the filter method is used to filter elements according to returning true or false

reduce method

for array summation

grammar:

arr.reduce(function(a, b){
    return a + b
});

Among them, the first time a represents the first element, the second time starts to represent the data returned last time, the first time b represents the second element, and the second time represents the third element and the fourth element. . .

some – Determine whether at least one element in the array satisfies the specified condition, returning a Boolean value

grammar:

Boolean = array.some(function(v,i,a){
    return condition;
})
// above i and a are optional parameters

Example: To determine whether there is a failing grade among all grades

var arr = [68,95,78,56,86,63];
var bool = arr.some(function(v,i,a){
    return v<60;
});
console.log(bool); // true

The built-in principle of some is to traverse the array to judge whether each value satisfies the condition, and return true if it is satisfied, and break the loop. After traversing, none of them is satisfied, and return false

var arr = [68,95,78,56,86,63];
var k = 0
var bool = arr.some(function(v,i,a){
    k++
    return v<60;
});
console. log(bool); // true
console. log(k); // 4

var arr = [68,95,78,66,86,63];
var k = 0
var bool = arr.some(function(v,i,a){
    k++
    return v<60;
});
console. log(bool); // false
console.log(k); // 6

every – Determines whether all elements in the array meet the specified condition and returns a Boolean value

grammar:

Boolean = array.every(function(){
    return condition
})
// above i and a are optional parameters

Example: To determine whether all grades are passed

var arr = [68,95,78,56,86,63];
var bool = arr.some(function(v,i,a){
    return v>60;
});
console.log(bool); // false

The built-in principle of every is to traverse the array to judge whether each value satisfies the condition, and return false if it is not satisfied, and break the loop. After traversing, it is satisfied and returns true

var arr = [68,95,78,56,86,63];
var k = 0
var bool = arr.every(function(v,i,a){
    k++
    return v>60;
});
console. log(bool); // false
console. log(k); // 4

var arr = [68,95,78,66,86,63];
var k = 0
var bool = arr.every(function(v,i,a){
    k++
    return v>60;
});
console. log(bool); // true
console.log(k); // 6

find – Find the first value in the array that satisfies the specified condition, find the return value, and return undefined if not found

grammar:

value = array.find(function(v,i,a){
    return condition
})
// above i and a are optional parameters

Example: Find the first failing grade among all grades

var arr = [68,95,78,56,86,63];
var ele = arr. find(function(v,i,a){
    return v<60
})
console.log(ele); // 56

The principle of find is to traverse the array and judge whether each element satisfies the condition. If it is satisfied, it will return the element and break the loop. If no condition is met after traversing, it will return undefined

var arr = [68,95,78,56,55,86,63];
var k = 0
var ele = arr. find(function(v,i,a){
    k++
    return v<60;
});
console. log(ele); // 56
console. log(k); // 4

var arr = [68,95,78,66,86,63];
var k = 0
var ele = arr. find(function(v,i,a){
    k++
    return v<60;
});
console.log(ele); // undefined
console.log(k); // 6

findIndex – Find the first corresponding subscript in the array that satisfies the condition, if found, return the subscript, if not found, return -1

grammar:

Subscript = array.findIndex(function(v,i,a){
    return condition
})
// above i and a are optional parameters

Example: Find the subscript of the first failing grade among all grades

var arr = [68,95,78,56,86,63];
var index = arr. find(function(v,i,a){
    return v<60
})
console.log(index); // 3

The principle of findIndex is to traverse the array and judge whether each element satisfies the condition. If it is satisfied, it will return the subscript of this element, and break the loop. If none of the conditions are met after traversing, it will return -1

var arr = [68,95,78,56,55,86,63];
var k = 0
var index = arr. find(function(v,i,a){
    k++
    return v<60;
});
console.log(index); // 3
console. log(k); // 4

var arr = [68,95,78,66,86,63];
var k = 0
var index = arr. find(function(v,i,a){
    k++
    return v<60;
});
console.log(index); // -1
console.log(k); // 6