JS _javascript tips for various operations of array

Source: Internet
Author: User
Tags arrays shallow copy

Array should be in peacetime we write JS code, the use of the highest frequency, in peacetime projects, a lot of data can be stored through the array, operations and other tasks. In addition to object, the array type should be the most commonly used type in JS.

Today, summarize some of the simple and basic operations of array, but also to consolidate their own basic knowledge.

How to create an array (say the array directly below)

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

1. Using Array constructors

such as: var arr = new Array ();

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

such as: var arr = new Array (20);

If you know the items that should be included in the array, you can pass the items that should be included in the array directly at the time of construction.

such as: var arr = new Array (1,2,3);

2. Using array literal notation

such as: var arr = [1,2,3,4];

var arr2 = [];

Two, the operation of the array

1, Stack method and queue method

1 stack operation mode: Advanced after the principle----add data items through the tail of a heavy array, and then get the trailing data items from the tail of the array

Push ();----is to add the data item at the end of the array, the number of parameters of the method can be customized;

Pop ();---This method is to get the most tail of an array of data items that do not need to pass any arguments;

Such as:

var colors = new Array ();//create array 
var count = Colors.push ("Red", "green");/Push two 
console.log (count); 
 
var color = ["Red", "Black"]; 
Color.push ("Brown");/push another 
color[3]= "yellow";//Add a 
console.log (color) 
; Console.log (Color.push ("Blue")); 
Console.log (Color.pop ());/Get the last one 

2 Queue operation mode: Advanced First Out principle---simulate the implementation by inserting data from the head of an array and acquiring data items

Push ();--Add data items to the end of the array;

Shift ();---Get the data information of the header of an array;

Unshift ();--in contrast to shift, is to insert data item information into the head of an array;

var Colorarr = new Array ();//create array 
colorarr.push ("Red", "yellow"), or push two 
console.log (Colorarr) 
; var length = Colorarr.push ("blue"); 
Console.log (length); 
 
var item = Colorarr.shift ();//Get the first 
Console.log (item); 
Console.log (colorarr.length); 

2, detection and verification of the array

In peacetime project development, we often encounter, to determine whether an object is an array (the function of the parameter pass), then if you judge whether an object is an array, there are two ways

1) The first method

if (value instanseof Array) {

}

2) The second method

if (Array.isarray (value)) {

}//This method only uses the browser with the newer version: ie9+, firefox4+/chrome

3, the specific programming example
1 add Element (add element at end of array)

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

Method One: Slice () combined with push ()

 function Append (arr, item) { 
  var newArr = arr.slice (0);//Slice (start, end) shallow copy array 
  Newarr.push (item); 
  return NEWARR; 
}; 

Method Two: 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 Three: Use Concat

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

2 Add elements (add elements of any position)
Add the element item to the index at the arr of the array. Do not modify the array arr directly, the result returns the new array.

Method One: Use normal 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 Two: Slice () and splice () combined

function Insert (arr, item, index) { 
  var newarr=arr.slice (0); 
  Newarr.splice (Index,0,item); 
  return NEWARR; 
} 

Method Three: Concat () and splice () combined

function Insert (arr, item, index) { 
  var newarr=arr.concat (); 
  Newarr.splice (Index,0,item); 
  return NEWARR; 
} 

3, delete the element (delete the last element of the array)
Deletes an array arr the last element. Do not modify the array arr directly, the result returns the new array.

Method One: Use normal iterative copy

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

Method Two: Concat () and pop () combined

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

4, delete elements (delete the first element of the array)
Deletes an array arr the first element. Do not modify the array arr directly, the result returns the new array.

Method One: Use normal iterative copy

function Curtail (arr) { 
  var newarr=[]; 
  for (Var i=1;i<arr.length;i++) { 
    newarr.push (arr[i]); 
  } 
  return NEWARR; 
} 

Method Two: Concat () and shift () combined

function Curtail (arr) { 
  var newArr = Arr.concat (); 
  Newarr.shift (); 
  return NEWARR; 
} 

Method Three: Slice ()

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

5. Merging arrays
merges array arr1 and Arrays arr2. Do not modify the array arr directly, the result returns the new array.

Method One: Use normal 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: Slice () combined with 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, move the elements in the divisor group
The element that moves all the values in the divisor group arr equal to the item. Do not modify the array arr directly, the result returns the 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; 
} 

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.