首页 > 语言 > JavaScript > 正文

JavaScript中数组的合并以及排序实现示例

2024-05-06 16:24:51
字体:
来源:转载
供稿:网友

这篇文章主要介绍了JavaScript中数组的合并以及排序实现示例,是JavaScript入门学习中的基础知识,需要的朋友可以参考下

合并两个数组 - concat()

源代码:

 

 
  1. <!DOCTYPE html> 
  2. <html> 
  3. <body> 
  4. ​ 
  5. <p id="demo">点击按钮合并数组。</p> 
  6. ​ 
  7. <button onclick="myFunction()">点我</button> 
  8. ​ 
  9. <script> 
  10. function myFunction() 
  11. var hege = ["Cecilie""Lone"]; 
  12. var stale = ["Emil""Tobias""Linus"]; 
  13. var children = hege.concat(stale); 
  14. var x=document.getElementById("demo"); 
  15. x.innerHTML=children; 
  16. </script> 
  17. ​ 
  18. </body> 
  19. </html> 

测试结果:

 

 
  1. Cecilie,Lone,Emil,Tobias,Linus 

合并三个数组 - concat()

源代码:

 

 
  1. <!DOCTYPE html> 
  2. <html> 
  3. <body> 
  4.  
  5. <script> 
  6.  
  7. var parents = ["Jani""Tove"]; 
  8. var brothers = ["Stale""Kai Jim""Borge"]; 
  9. var children = ["Cecilie""Lone"]; 
  10. var family = parents.concat(brothers, children); 
  11. document.write(family); 
  12.  
  13. </script> 
  14.  
  15. </body> 
  16. </html> 

测试结果:

 

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

数组排序(按字母顺序升序)- sort()

源代码:

 

  1. <!DOCTYPE html> 
  2. <html> 
  3. <body> 
  4. ​ 
  5. <p id="demo">Click the button to sort the array.</p> 
  6. ​ 
  7. <button onclick="myFunction()">Try it</button> 
  8. ​ 
  9. <script> 
  10. function myFunction() 
  11. var fruits = ["Banana""Orange""Apple""Mango"]; 
  12. fruits.sort(); 
  13. var x=document.getElementById("demo"); 
  14. x.innerHTML=fruits; 
  15. </script> 
  16. ​ 
  17. </body> 
  18. </html>  

测试结果:

 

 
  1. Apple,Banana,Mango,Orange 

数字排序(按数字顺序升序)- sort()

源代码:

 

 
  1. <!DOCTYPE html> 
  2. <html> 
  3. <body> 
  4. ​ 
  5. <p id="demo">Click the button to sort the array.</p> 
  6. ​ 
  7. <button onclick="myFunction()">Try it</button> 
  8. ​ 
  9. <script> 
  10. function myFunction() 
  11. var points = [40,100,1,5,25,10]; 
  12. points.sort(function(a,b){return a-b}); 
  13. var x=document.getElementById("demo"); 
  14. x.innerHTML=points; 
  15. </script> 
  16. ​ 
  17. </body> 
  18. </html>  

测试结果:

 

 
  1. 1,5,10,25,40,100 

数字排序(按数字顺序降序)- sort()

源代码:

 

 
  1. <!DOCTYPE html> 
  2. <html> 
  3. <body> 
  4. ​ 
  5. <p id="demo">Click the button to sort the array.</p> 
  6. ​ 
  7. <button onclick="myFunction()">Try it</button> 
  8. ​ 
  9. <script> 
  10. function myFunction() 
  11. var points = [40,100,1,5,25,10]; 
  12. points.sort(function(a,b){return b-a}); 
  13. var x=document.getElementById("demo"); 
  14. x.innerHTML=points; 
  15. </script> 
  16. ​ 
  17. </body> 
  18. </html> 

测试结果:

 

 
  1. 100,40,25,10,5,1 

将一个数组中的元素的顺序反转排序 - reverse()

源代码:

 

 
  1. <!DOCTYPE html> 
  2. <html> 
  3. <body> 
  4. ​ 
  5. <p id="demo">Click the button to reverse the order of the elements in the array.</p> 
  6. ​ 
  7. <button onclick="myFunction()">Try it</button> 
  8. ​ 
  9. <script> 
  10. var fruits = ["Banana""Orange""Apple""Mango"]; 
  11. ​ 
  12. function myFunction() 
  13. fruits.reverse(); 
  14. var x=document.getElementById("demo"); 
  15. x.innerHTML=fruits; 
  16. </script> 
  17. ​ 
  18. </body> 
  19. </html>  

测试结果:

 

 
  1. Mango,Apple,Orange,Banana 

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选