Example of merging and sorting arrays in JavaScript_Basic knowledge-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Example of merging and sorting arrays in JavaScript_Basic knowledge

May 16, 2016 pm 03:35 PM

javascript array

Combine two arrays - concat()
Source code:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&#8203;
&lt;p id="demo"&gt;点击按钮合并数组。&lt;/p&gt;
&#8203;
&lt;button onclick="myFunction()"&gt;点我&lt;/button&gt;
&#8203;
&lt;script&gt;
function myFunction()
{
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = hege.concat(stale);
var x=document.getElementById("demo");
x.innerHTML=children;
}
&lt;/script&gt;
&#8203;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

Test results:

Cecilie,Lone,Emil,Tobias,Linus

Copy after login

Combine three arrays - concat()
Source code:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;

&lt;script&gt;

var parents = ["Jani", "Tove"];
var brothers = ["Stale", "Kai Jim", "Borge"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(brothers, children);
document.write(family);

&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

Copy after login

Test results:

Jani,Tove,Stale,Kai Jim,Borge,Cecilie,Lone

Copy after login

Array sorting (alphabetical ascending) - sort()
Source code:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&#8203;
&lt;p id="demo"&gt;Click the button to sort the array.&lt;/p&gt;
&#8203;
&lt;button onclick="myFunction()"&gt;Try it&lt;/button&gt;
&#8203;
&lt;script&gt;
function myFunction()
{
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
&lt;/script&gt;
&#8203;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

Test results:

Apple,Banana,Mango,Orange

Copy after login

Numerical sorting (ascending numerical order) - sort()
Source code:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&#8203;
&lt;p id="demo"&gt;Click the button to sort the array.&lt;/p&gt;
&#8203;
&lt;button onclick="myFunction()"&gt;Try it&lt;/button&gt;
&#8203;
&lt;script&gt;
function myFunction()
{
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
var x=document.getElementById("demo");
x.innerHTML=points;
}
&lt;/script&gt;
&#8203;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

Test results:

1,5,10,25,40,100

Copy after login

Numerical sorting (descending numerical order) - sort()
Source code:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&#8203;
&lt;p id="demo"&gt;Click the button to sort the array.&lt;/p&gt;
&#8203;
&lt;button onclick="myFunction()"&gt;Try it&lt;/button&gt;
&#8203;
&lt;script&gt;
function myFunction()
{
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a});
var x=document.getElementById("demo");
x.innerHTML=points;
}
&lt;/script&gt;
&#8203;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

Test results:

100,40,25,10,5,1

Copy after login

Reverse the order of elements in an array - reverse()
Source code:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&#8203;
&lt;p id="demo"&gt;Click the button to reverse the order of the elements in the array.&lt;/p&gt;
&#8203;
&lt;button onclick="myFunction()"&gt;Try it&lt;/button&gt;
&#8203;
&lt;script&gt;
var fruits = ["Banana", "Orange", "Apple", "Mango"];
&#8203;
function myFunction()
{
fruits.reverse();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
&lt;/script&gt;
&#8203;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

Test results:

Mango,Apple,Orange,Banana

Copy after login

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn