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

<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()

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

Array sort

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

Array sort

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單