Javascript array manipulation

Javascript array manipulation

1.1 Reverse the order of array elements
1.1.1 The reverse() method
syntax:
        arrayObject.reverse()
Note: This method will change the original array without creating a new array.
Example:

var myArr = ["1","2","3"];
document.write(myArr + "<br />"); //Run result: 1,2,3
document.write(myArr.reverse()); //Running result: 3,2,1

1.2 Determine whether an element is in the array
1.2.1 indexOf method
Function: Returns the first index value of the given element in the array, otherwise returns -1.
Syntax:
        array.indexOf(item[, index]);
        item, the element to find.
        index, start to find the index value of the specified element, the default value is 0 (that is, find the specified element in the entire array).
Note:
        If the index is greater than or equal to the length of the array, the search stops and -1 is returned.
        If index is a negative value, it is used as an offset at the end of the array, i.e. -1 means starting from the last element, -2 means starting from the second to last element, and so on.
Compatibility: Not compatible with IE6~8.
Example:

var arr = new Array(1, 2, 3);  
var backVal = arr.indexOf (2);
console.log(backVal); //Running result: 1

1.2.2 Custom Functions

function contains(arr, obj) {
    var i = arr.length;
    while (i--) {
        if (arr[i] === obj) { return true; }
    }  
    return false;
}
var arr = new Array(1, 2, 3);  
contains(arr, 2); //return true
contains(arr, 4); //return false

1.2.3 Add a function to Array

Array.prototype.contains = function (obj) {
    var i = this.length;
    while (i--) {
        if (this[i] === obj) { return true; }
    }
    return false;
}
[1, 2, 3].contains(2); //return true
[1, 2, 3].contains('2'); //return false

Note: If you are using JQuery, you can use the $.inArray(value, array); function.
1.3 Delete a certain value in the array
1.3.1 Delete method
function: It just turns the deleted element into undefined, while the key values ​​of other elements remain unchanged.
Compatibility: IE4 and above are supported.
Example:

var arr = ['a','b','c','d'];
delete arr[1];
for(index in arr){
    console.log(arr[index]);
}
Running result: acd
for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
}
Running result: a undefined cd

1.3.2 splice method
function: delete or replace a value in the array. After deleting a value, the length and index of the array of the array will also change accordingly.
Syntax:
        splice(index,len[,item]);
        index: the start index of the array.
        len: Length of replacement/removal.
        item: The value to replace.
Compatibility: IE5.5 and above are supported.
Example 1: delete

var arr = ['a','b','c','d'];
arr.splice(1,1);
for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
}
Running result: acd

Example 2: Replacement

var arr = ['a','b','c','d'];
arr.splice(1,1,1);
for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
}
Running result: a 1 cd

Example 2: Replacement and Addition

var arr = ['a','b','c','d'];
arr.splice(1,1,1,2);
for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
}
Running result: a 1 2 cd

1.4 Traverse the array
1.4.1forEach() method
Function: Traverse the array so that each item of the array executes the given function once.
Syntax:
        array.forEach(callback[, thisArg]);
        callback: a function executed on each item of the array, receiving three parameters: currentValue (the value of the current item), index (the index of the current item) and array (the array itself ).
        thisArg: optional parameter. The object used as the this value in the callback function, that is, the execution context of the callback function.
Compatibility: Not compatible with IE6~8.
1.4.2 The function of map() method
: Traverse the array and return a new array composed of the return value of each element in the original array after calling a specified method, while keeping the original array unchanged.
Syntax:
        array.map(callback[, thisArg]);
        callback: a function executed on each item of the array, receiving three parameters: currentValue (the value of the current item), index (the index of the current item) and array (the array itself ).
        thisArg: optional parameter. The object used as the value of this in the callback function, that is, the execution context of the callback function.
Compatibility: Not compatible with IE6~8. 1.4.3 The common points
between forEach() and map() are: 1. They both loop through each item in the array.


2. Each anonymous function in forEach() and map() supports 3 parameters: the current item item in the array, the index index of the current item, and the original array arr.
3. This in the anonymous function refers to Window.
4, can only traverse the array.
5. Compatibility is the same, IE8 and below versions are not supported.
Differences:
1. ForEach() has no return value, while map() has a return value, which can be returned.
Example:

var arr_0 = [12,23,24,42,1];
var res_0 = arr_0.forEach(function (item,index, arr) {
    arr [index] = item*10;
})
console.log(res_0); //Execution result: undefined
console.log(arr_0); //Execution result: [120, 230, 240, 420, 10], making changes to the original array
var arr_1 = [12,23,24,42,1];
var res_1 = arr_1.map(function (item,index, arr) {
    return item*10;
})
console.log(res_1); //Execution result: [120,230,240,420,10]
console.log(arr_1); //Execution result: [12,23,24,42,1], the original array remains unchanged

1.4.4 filter() method
function: traverse the array and return a new array created by all elements tested by the specified function.
Syntax:
        arr.filter(callback[, thisArg]);
        callback: a function executed on each item of the array, receiving three parameters: currentValue (the value of the current item), index (the index of the current item) and array (the array itself ).
        thisArg: optional parameter. The object used as the value of this in the callback function, that is, the execution context of the callback function.
Compatibility: Not compatible with IE6~8.
Example:

var arr = ["Guan Yu", "Zhang Yide", "Zhao Zilong", "Huang Zhong", "Ma Chao"];
var res = arr.filter(function(ele,index,array){
    if(ele.length>2){ return true; }
    return false;
});
console.log(arr); //Execution result: ["Guan Yu", "Zhang Yide", "Zhao Zilong", "Huang Zhong", "Ma Chao"]
console.log(res); //Execution result: ["Zhang Yide", "Zhao Zilong"]

Note: return will end the defined function function, but there is a for loop-like sentence inside the filter() method to execute the function function in sequence on the elements.
1.4.5 some() method
function: traverse the array, each element in the array executes the specified function once, until it finds a value that makes the specified function return a true value. Returns true if found, false otherwise.
Syntax:
        arr.some(callback[, thisArg]);
        callback: a function executed on each item of the array, receiving three parameters: currentValue (the value of the current item), index (the index of the current item) and array (the array itself ).
        thisArg: optional parameter. The object used as the value of this in the callback function, that is, the execution context of the callback function.
Compatibility: Not compatible with IE6~8.
Example:

var arr = [1, 2, 3, 4, 5, 6];  
var res=arr.some(function(item,index,array){
    console.log(item);
    return item > 3;
});
//Execution result: 1 2 3 4
console.log(arr); //Execution result: [1, 2, 3, 4, 5, 6], the original array remains unchanged
console.log(res); //Execution result: true

1.4.6 every() method
Function : Traverse the array, each element in the array executes the specified function once, and returns true only if all elements return true in the specified function, otherwise returns false.
Syntax:
        arr.every(callback[, thisArg]);
        callback: a function executed on each item of the array, receiving three parameters: currentValue (the value of the current item), index (the index of the current item) and array (the array itself) ).
        thisArg: optional parameter. The object used as the value of this in the callback function, that is, the execution context of the callback function.
Compatibility: Not compatible with IE6~8.
Example:

var arr = [6, 5, 4, 3, 2, 1];
var res = arr.every( function( item, index, array ){
    console.log(item);
    return item > 3;
});
//Execution result: 6 5 4 3
console.log(arr); //Execution result: [6, 5, 4, 3, 2, 1], the original array remains unchanged
console.log(res); //Execution result: false

1.5 Array splicing
1.5.1 concat method
Function: used to connect two or more arrays.
Syntax:
        arrayObject.concat(arrayX,arrayX,......,arrayX);
        arrayX: Required. The parameter can be a concrete value or an array object. Can be any number.
Note: This method returns a new array. The array is generated by adding all arrayX parameters to arrayObject.
Example 1: Concatenating array elements

var arr = [1,2,3];
var newArr=arr.concat(4,5);
console.log(arr); //Execution result: [1, 2, 3], the original array remains unchanged
console.log(newArr); //Execution result: [1, 2, 3, 4, 5]

Example 2: Concatenating Arrays

var arr_0 = ["George","John","Thomas"];
var arr_1 = ["James","Adrew", "Martin"];
var newArr=arr_0.concat(arr_1);
console.log(arr_0); //Execution result: ["George", "John", "Thomas"], the original array remains unchanged
console.log(arr_1); //Execution result: ["James", "Adrew", "Martin"], the original array remains unchanged
console.log(newArr); //执行结果：["George", "John", "Thomas", "James", "Adrew", "Martin"]

1.6 Array interception
1.6.1 slice method
Function: Return the selected element from the existing array.
Syntax:
        arrayObject.slice(start,end);
        start: Required. Specifies where to start the selection. If negative, it specifies the position from the end of the array. That is, -1 refers to the last element, -2 refers to the second-to-last element, and so on.
        end: optional. Specifies where to end the selection. This parameter is the array subscript at the end of the array fragment. If this parameter is not specified, the split array contains all elements from start to end of the array. If this parameter is negative, it specifies the element counted from the end of the array.
Note: This method returns a new array containing the elements in arrayObject from start to end (excluding this element).
Example:

var arr = ["George","John","Thomas"];
var newArr=arr.slice(1,2);
console.log(arr); //Execution result: ["George", "John", "Thomas"], the original array remains unchanged
console.log(newArr); //Execution result: ["John"]