✍ 📁 🙈 🙉 🙊 : script sort() / reverse() 陣列排序

2022年4月30日星期六

Array sort

<t> JavaScript Array sort() / reverse() 數組排序</t>
<pre><div id="DP"></pre>
</n>

Tx+='<br>Array = ["Banana", "Orange", "Apple", "Mango"]<br>';
Tx+="Array.sort() = " +Array.sort() + "<br>";
Tx+="Array.reverse() = " +Array.reverse() ;

Tx+= "\n\n\n   <t>數字 digital</t> ";

var numbers = [4, 2, 5, 1, 3];
Tx+="<br>var numbers = [4, 2, 5, 1, 3];" ;
Tx+="<br>numbers.sort(function(a, b) { return a - b;}); = " ; "<br>";
Tx+=numbers.sort(function(a, b) { return a - b;});

var numbers = [4, 2, 5, 1, 3];
Tx+="<br><br>var numbers = [4, 2, 5, 1, 3];" ;
Tx+="<br>numbers.sort(function(b , a) { return a - b;}); = " ; "<br>";
Tx+=numbers.sort(function(b, a) { return a - b;});

numbers = [45, 24, 57, 1, 73];
Tx+="<br><br>var numbers = [45, 24, 57, 1, 73];" ;
Tx+="<br>numbers.sort(function(a, b) { return a - b;}); = " ; "<br>";
Tx+=numbers.sort(function(a, b) { return a - b;});

DP.innerHTML=Tx;
</script>
  
<style>
pre,n {font-size:20px;}
t  {font-size:30px;color:blue;font-weight : bold; }
r  {color:red;}

table {font-size:20px;
       width: 100%;
       border: 1px solid;}

</style>

<pre><t> JavaScript Array sort() / reverse()數組排序</t>
<div id="DP"></div>
</pre>

Tx+="<pre>var Int = [ {It: 'mango' , Price: 14},\n"  ; 
Tx+="            {It: 'apple' , Price:  5},\n";  
Tx+="            {It: 'orange', Price:  8},\n";
Tx+="            {It: 'lemon' , Price:  7}, \n";
Tx+="            {It: 'litchi', Price: 35}  ];\n\n";
Tx+="Int = Int.sort(function(<r>a , b</r>){return a.Price > b.Price? -1 : 1;})\n"
var FruitA= Int.sort(function(a, b){return a.Price > b.Price? -1 : 1;});
for (var i = 0, l = FruitA.length; i < l; ++i) {
    Tx+=(FruitA[i].It+ ", " +
         FruitA[i].Price+ "<br/>"); }
Tx+="\n\n";
Tx+="Int = Int.sort(function(<r>b , a</r>){return a.Price > b.Price? -1 :  1;})\n"
var FruitB= Int.sort(function(b , a){return a.Price > b.Price? -1 : 1;});
for (var i = 0, l = FruitB.length; i < l; ++i) {
    Tx+=(FruitB[i].It+ ", " +
         FruitB[i].Price+ "<br/>"); }

DP.innerHTML=Tx;
</script>

table {font-size:20px;
       width: 100%;
       border: 1px solid;}

</style>

<t> JavaScript Array sort() / reverse() 數組排序</t>
<pre><div id="DP"></div>
sort by It :
Int.sort(function(a,b){return a.It< b.It? -1 : 1;})

sort by Origin:
Int.sort(function(a,b){return a.Origin< b.Origin? -1 : 1;})

sort by Price:
Int.sort(function(a,b){return a.Price< b.Price? -1 : 1;})
</pre>
<script>
function Ttt (x ){
var Int= [ {It: 'mango'  , Origin:'us'        , Price: 14.2}, 
           {It: 'apple'  , Origin:'hk'        , Price:  15.6},    
           {It: 'orange' , Origin:'China'     , Price:  8.5},
           {It: 'lemon'  , Origin:'Japan'     , Price:  7.3},
           {It: 'litchi' , Origin:'Australia' , Price: 35.9} ];

var Tb= '<table border="1"><tbody><tr>';
Tb+= '<th><button onclick="Ttt (1)" >sort by It</button>'    ;
Tb+= '<th><button onclick="Ttt (2)" >sort by Origin</button>'    ;
Tb+= '<th><button onclick="Ttt (3)" >sort by Price</button>' ;
Tb+= '</tr><tr>' ;

if(x==1){
Int=Int.sort(function(a,b){return a.It< b.It? -1 : 1;}) }

if(x==2){
Int=Int.sort(function(a,b){return a.Origin< b.Origin? -1 : 1;}) }

if(x==3){
Int=Int.sort(function(a,b){return a.Price< b.Price? -1 : 1;}) }

for(var i=0; i<Int.length ;i++){
Tb+='<td>' + Int[i].It + '</td>';
Tb+='<td>' + Int[i].Origin+ '</td>';
Tb+='<td>' + Int[i].Price+ '</td>';
Tb+='</tr><tr>' ;
}

Tb+= '</tbody></table> ';

DP.innerHTML =Tb;
}
Ttt(1);
</script>
  
<style>
pre,n ,button {font-size:20px;}
t  {font-size:30px;color:blue;font-weight : bold; }
r  {color:red;}

table {font-size:20px;
       width: 100%;
       border: 1px solid;}

</style>

Edit

#html #style #script #javascript #css #Array sort() #Array reverse() #reverse() #數組排序 #sort()

2022年4月30日 星期六

Array sort

2022年4月30日星期六