Summary of various JS operations on Array

Array should be the most frequently used when we write js code. In daily projects, a lot of data can be stored and manipulated through Array. In addition to Object, the Array type should be the most commonly used type in js.

Today I will summarize some simple and basic operations of Array, and also to consolidate my basic knowledge.

1. How to create an Array (let’s talk about arrays directly below)

There are two main ways to create an array. The first is to use the array constructor, and the second is to use the array literal representation.

1. Use the array constructor

For example: var arr = new Array();

If you know the length of the array in advance, you can also pass the length directly to the constructor.

For example: var arr = new Array(20);

If you know the items that should be included in the array, just pass the items that should be included in the array directly during construction.

For example: var arr = new Array(1,2,3);

2. Use array literal representation

For example: var arr = [1,2,3,4];

var arr2 = [ ; Tail data item

push();----This method is to add data items at the end of the array. The number of parameters of this method can be customized;

pop();---This method is to obtain the last item of the array. A data item, this function does not need to pass any parameters;

For example:

var colors = new Array();//Create an array

var count = colors.push("red","green");//Push Two items

console.log(count);

var color = ["red","black"];

color.push("brown");//Push another item

color[3]="yellow "; //Add an item
console.log(color);
console.log(color.push("blue"));
console.log(color.pop()); //Get the last item




2) Queue operation method: first in, first out principle---simulated by inserting data from the head of the array and obtaining data items

push();--adding data items to the end of the array;

shift ();---Get the data information of the head item of the array;

unshift();--Completely opposite to shift, it inserts the data item information into the head of the array;

var colorArr = new Array() ;//Create an array

colorArr.push("red","yellow");//Push two items

console.log(colorArr);

var length = colorArr.push("blue");

console.log (length);

var item = colorArr.shift();//Get the first item
console.log(item);
console.log(colorArr.length);



2. Detect and verify the array

In daily project development, we often encounter the problem of judging whether an object is an array (during function parameter transfer). So if we want to judge whether an object is an array, there are the following two ways

1) The first method

　　if(value instanseof Array){
   }

2) The second method

　　if(Array.isArray(value)){
   }//该方法只使用与高版本的浏览器：IE9+、Firefox4+/Chrome

3. Specific programming examples

1) Add elements (add elements at the end of the array)

Add the element item at the end of the array arr. Do not modify the array arr directly, the result will return a new array.

Method 1: Combining slice() and push()

function append(arr, item) { 
  var newArr = arr.slice(0); // slice(start, end)浅拷贝数组 
  newArr.push(item); 
  return newArr; 
};

Method 2: Ordinary iterative copy

function append(arr, item) { 
  var length = arr.length, 
    newArr = []; 
  
  for (var i = 0; i < length; i++) { 
    newArr.push(arr[i]); 
  } 
  
  newArr.push(item); 
  
  return newArr; 
};

Method 3: Use concat

function append(arr, item) { 
  return arr.concat(item); 
}

2) Add elements (Add an element at any position)

Add the element item at the index of the array arr. Do not modify the array arr directly, the result will be a new array.

Method 1: Use ordinary iterative copy

function insert(arr, item, index) { 
  var newArr=[]; 
  for(var i=0;i<arr.length;i++){ 
    newArr.push(arr[i]); 
  } 
  newArr.splice(index,0,item); 
  return newArr; 
}

Method 2: Combine slice() and splice()

function insert(arr, item, index) { 
  var newArr=arr.slice(0); 
  newArr.splice(index,0,item); 
  return newArr; 
}

Method 3: Combine concat() and splice()

function insert(arr, item, index) { 
  var newArr=arr.concat(); 
  newArr.splice(index,0,item); 
  return newArr; 
}

3. Delete elements (delete the last one in the array element)

Delete the last element of array arr. Do not modify the array arr directly, the result will be a new array.

Method 1: Use ordinary iterative copy

function truncate(arr, item) { 
  var newArr=[]; 
  for(var i=0;i<arr.length-1;i++){ 
    newArr.push(arr[i]); 
  } 
  return newArr; 
}

Method 2: Combine concat() and pop()

function truncate(arr) { 
  var newArr = arr.concat(); 
  newArr.pop(); 
  return newArr; 
}

4. Delete elements (delete the first element of the array)

Delete the first element of the array arr. Do not modify the array arr directly, the result will be a new array.

Method 1: Use ordinary iterative copy

function curtail(arr) { 
  var newArr=[]; 
  for(var i=1;i<arr.length;i++){ 
    newArr.push(arr[i]); 
  } 
  return newArr; 
}

Method 2: Combine concat() and shift()

function curtail(arr) { 
  var newArr = arr.concat(); 
  newArr.shift(); 
  return newArr; 
}

Method 3: slice()

function curtail(arr) { 
  return arr.slice(1); 
}

5, merge arrays

Merge array arr1 and array arr2. Do not modify the array arr directly, the result will be a new array.

Method one: Use ordinary iterative copy

function concat(arr1, arr2) { 
  var newArr=[]; 
  for(var i=0;i<arr1.length;i++){ 
    newArr.push(arr1[i]); 
  } 
  for(var j=0;j<arr2.length;j++){ 
    newArr.push(arr2[j]); 
  } 
  return newArr; 
}

Method two: concat() method

function concat(arr1, arr2) { 
  return arr1.concat(arr2); 
}

Method three: combine slice() and push()

function concat(arr1, arr2) { 
  var newArr=arr1.slice(0); 
  for(var i=0;i<arr2.length;i++){ 
    newArr.push(arr2[i]); 
  } 
  return newArr; 
}

5. Remove elements from the array

Remove the array arr All elements whose values ​​are equal to item. Do not modify the array arr directly, the result will be a new array.

Method one: splice() method

function remove(arr, item) { 
      var newArr = arr.slice(0); 
      for(var i=0; i<newArr.length; i++) { 
        if(newArr[i] == item) { 
          newArr.splice(i, 1); 
        } 
      } 
      return newArr; 
    } 
    var arr = [1,2,3,4,2]; 
    var item = 2; 
    console.log(remove(arr, item)); 
    console.log(arr);

Method two: push() method

function remove(arr,item){ 
  var newarr = []; 
  for(var i=0;i<arr.length;i++){ 
    if(arr[i] != item){ 
      newarr.push(arr[i]); 
    } 
  } 
  return newarr; 
}