An array of JavaScript implements the queue and stack method

An array of JavaScript implements the queue and stack method

Today in the project to use JavaScript to implement the data structure of the queue and stack, here to summarize.

A simple introduction to queues and stacks

1.1, the basic concept of the queue

Queue: is a set that supports FIFO (first-in-first-out), that is, the data that is inserted before it is first taken out!

As shown in the following:

1.2, the basic concept of the stack

Stack: A collection that supports last-in, first-out (LIFO), which is the data that is inserted after it is first taken out!

As shown in the following:

Ii. implementing queues and stacks in JavaScript

Implementing queues and Arrays in JavaScript is primarily through arrays, and the following methods are available in the JS array to make it easy to implement queues and stacks:

Shift: Removes the first element from the array and returns the value of the element.

Unshift: Adds one or more elements to the beginning of the array and returns the new length

Push: Adds an element at the end of the array and returns the new length

Pop: Removes the last element from the array and returns the value of the element.

2.1. Implement the queue

<script type= "Text/javascript" >//create an array to simulate the queue        varA=NewArray ();        Console.log (a); //Unshift: Adds one or more elements to the beginning of the array and returns the new lengthConsole.log ("queue"); A.unshift (1) Console.log (a);//----->1A.unshift (2); Console.log (a);//----->2,1A.unshift (3); Console.log (a);//----->3,2,1A.unshift (4); Console.log (a);//----->4,3,2,1Console.log ("Out of Line, FIFO");        Console.log (a); //pop: Removes the last element from the array and returns the value of the elementA.pop ();//----->1Console.log (a); A.pop ();//----->2Console.log (a); A.pop ();//----->3Console.log (a); A.pop ();//----->4Console.log (a);</script>

The effect in the Google Chrome console output is as follows:

2.2. Implementing stacks

<script type= "Text/javascript" >//create an array to emulate the stack        varA=NewArray ();        Console.log (a); //push: Adds one or more elements to the end of the array and returns the new lengthConsole.log ("into the stack"); A.push (1) Console.log (a);//----->1A.push (2); Console.log (a);//----->1,2A.push (3); Console.log (a);//----->1,2,3A.push (4); Console.log (a);//----->1,2,3,4Console.log ("Out of Stack, LIFO");        Console.log (a); //pop: Removes the last element from the array and returns the value of the elementA.pop ();//----->4Console.log (a); A.pop ();//----->3Console.log (a); A.pop ();//----->2Console.log (a); A.pop ();//----->1Console.log (a);</script>

The effect in the Google Chrome console output is as follows:

2.3. Performance test of Push method and Unshift method

Both the push and unshift methods of the array can add elements to the current array, but the push is added at the end, and Unshift is added at the beginning, so the principle is that the unshift is less efficient. The reason is that every element it adds, it moves the existing element down one position. But how effective is the difference? Here's a quick test.

<script type= "Text/javascript" >/*about the code "var s=+newdate ();"    The technique explanation is as follows: =+ This operator does not exist;    + equivalent to. valueOf ();      +new date () is equivalent to the new date (). ValueOf ()//4 results same as the number of milliseconds to return the current time alert (+new Date ());      Alert (+new Date);      var s=new Date ();      Alert (s.valueof ());    Alert (S.gettime ()); */    vararr = [ ]; varStartTime = +NewDate ();//+new Date () is equivalent to new Date (). ValueOf (), the number of milliseconds to return the current time     //Push Performance Test      for(vari = 0; I < 100000; i++) {Arr.push (i); }     varEndTime = +NewDate (); Console.log ("Call the Push method to add 100,000 elements to the array time consuming" + (Endtime-starttime) + "milliseconds"); StartTime= +NewDate (); Arr= [ ]; //unshift Performance Test      for(vari = 0; I < 100000; i++) {arr.unshift (i); } endTime= +NewDate (); Console.log ("Call the Unshift method to add 100,000 elements to the array time consuming" + (Endtime-starttime) + "milliseconds"); </script>

This code performs 100,000 push and unshift operations, running in Google Chrome once, and the results are as follows:

As you can see, unshift is about 100 times times slower than push! Therefore, it is usually prudent to use unshift, especially for large arrays. If you must achieve the unshift effect, you can use the reverse method of the array, the reverse method of array can reverse an array. First, the element to be put into the array is added with push, and then once reverse is executed, the unshift effect is achieved. Like what:

<script type= "Text/javascript" >//create an array to emulate the stack        varA=NewArray (); //to add an element to the end of an array using the Push methodA.push (1) A.push (2); A.push (3); A.push (4); Console.log ("Array reverses the order of elements in the array before"); Console.log (a);//----->1,2,3,4        //the array has a method called reverse that can invert an array. First, the element to be put into the array is added with push, and then once reverse is executed, the unshift effect is achieved.A.reverse ();//To invert an array using the Reverse methodConsole.log ("Order of elements in an array after an array reversal"); Console.log (a);</script>

The effect in the Google Chrome console output is as follows:

From the running result, the order of the array elements has been reversed.

2.4. Performance test of Reverse method

The performance of reverse, and then to test:

<script type= "Text/javascript" >        var arr = [], s = +new  Date;           for (var i = 0; i < 100000; i++) {    arr.push (i);         }        　　 // call the reverse method to invert the order of the 100000 elements inside the array         arr.reverse ();         Console.log ("Call the reverse method to reverse the order of the 100000 elements inside the array is time consuming:" + (+new date-s) + "milliseconds"); </script>

The effect in the Google Chrome console output is as follows:

It can be seen from the running effect that the reverse method has high performance and can be used with confidence.

The above is a summary of the queues and stacks implemented in JavaScript using arrays, and simply tests the performance of Push, unshift, and reverse in manipulating large arrays.

An array of JavaScript implements the queue and stack method