JavaScript像数组添加元素并排序「建议收藏」

全栈程序员站长

发布于 2022-08-15 20:15:01

7830

发布于 2022-08-15 20:15:01

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

最近用jscharts做图

如上图，柱形排列是没有规律的，将它做出如下调整

因为jscharts做表，是使用数组存储数据

//准备数据
var myData = new Array(['Asia', 437, 520], ['Europe', 322, 390], ['North America', 233, 286], ['Latin America', 110, 162], ['Africa', 34, 49], ['Middle East', 20, 31], ['Aus/Oceania', 19, 22]);
//初始化JSChart
var myChart = new JSChart('graph', 'bar');
//注入数据
myChart.setDataArray(myData);

所以我们只需要对数组进行排序即可因为在使用中，我们的数据肯定是从后台生成传到前台来的，所有一起介绍动态向数组中添加数据

unshift：将参数添加到原数组开头，并返回数组的长度

var a = [1,2,3,4,5]; 
var b = a.unshift(-2,-1); //a：[-2,-1,1,2,3,4,5] b：7

push：将参数添加到原数组末尾，并返回数组的长度

var a = [1,2,3,4,5]; 
var b = a.push(6,7); //a：[1,2,3,4,5,6,7] b：7

数组排序(按首字母排序)

<script type="text/javascript"> var arr = new Array(6) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" arr[3] = "James" arr[4] = "Adrew" arr[5] = "Martin" document.write(arr + "<br />") document.write(arr.sort()) </script>
//输出
//George,John,Thomas,James,Adrew,Martin
//Adrew,George,James,John,Martin,Thomas

也可以自定义排序规则

<script type="text/javascript"> function sortNumber(a,b) { 
     return a - b } var arr = new Array(6) arr[0] = "10" arr[1] = "5" arr[2] = "40" arr[3] = "25" arr[4] = "1000" arr[5] = "1" document.write(arr + "<br />") document.write(arr.sort(sortNumber)) </script>
//输出
//10,5,40,25,1000,1
//1,5,10,25,40,1000

使用拍过序的数组，做出的图效果就会和第二张图一样了

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/134125.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年5月2，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法