2016-03-02 35 views
0

我想填充2个数组,我称之为'区域'和'asbos'。我想做到这一点使用ASBOs记录的每个刑事司法系统区域以下数据列表:JavaScript中的数组 - 排序数组中的文本和数字

Avon and Somerset 559, 
Bedfordshire   220, 
Cambridgeshire  285, 
Cheshire    387, 
Cleveland   489, 
Cumbria    275, 
Derbyshire   319, 
Devon and Cornwall 473, 
Dorset    197, 
Essex    361, 

我也想为每个区域创建一个loop,给它一个特定font size取决于数量在“tempText变量”格式文本ASBOs然后存储如下:

tempText += "<span style='font-size:" + asbos[i]/14 + "px';>" + regions[i] + "</span> "; 

这是我在我的HTML文件至今:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Javascript_Arrays</title> 
    </head> 
    <body> 
     <div id="wordCloud"></div> 

     <script> 
     //asbo word Cloud Generator 
     var regions = []; 
     var asbos = []; 
     var tempText = ""; 

     // add loop here to create text for printing 
     document.getElementById("wordCloud").innerHTML = tempText; 
     </script> 
    </body> 
</html> 
+0

JavaScript不是读取海量数据的最佳语言:数据来自哪里,您使用的是Windows™还是Linux? –

回答

1

var $body   = $('body'), 
 
    regions_asbos = $('#inputs').text().split(/,\s*/gm), // <== 1 
 
    asbos   = {};         // <== 2 
 

 
regions_asbos.forEach(function(line){     // <== 3 
 
    asbos[ line.replace(/(\d+)/,'').trim() ] = RegExp.$1; // <== 4 
 
}); 
 

 
var regions = Object.keys(asbos);      // <== 5 
 
regions.forEach(function(region){      // <== 6 
 
    if (!region)           // <== 7 
 
    return; 
 

 
    var $span = $('<span></span>',{      // <== 8 
 
    'style': 'font-size: ' + asbos[region]/14 + 'px', 
 
    'text': region 
 
    }); 
 
    
 
    $body.append($span);         // <== 9 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h4>Inputs</h4> 
 
<pre id="inputs">Avon and Somerset 559, 
 
Bedfordshire   220, 
 
Cambridgeshire  285, 
 
Cheshire    387, 
 
Cleveland   489, 
 
Cumbria    275, 
 
Derbyshire   319, 
 
Devon and Cornwall 473, 
 
Dorset    197, 
 
Essex    361, 
 
</pre>

  1. 让您的输入(我把它放在一个前)和他们分成数组,处理一个逗号和任何空白(换行等的文本)作为分隔符;这会为每个线或区域创建一个阵列/ asbos协会
  2. 创建一个占位符对象;而不是有两个单独的数组,你需要的是一个对象,它充当一个字典/哈希
  3. 遍历各行
  4. 使用正则表达式来捕捉线的编号(RegExp.$1举行)(假设你的区别在他们的名字中没有数字)并用空白字符串替换这些数字;这只留下了区域名称和一堆白色文本。然后,您可以修剪掉空白并将区域名称用作字典/散列/对象的关键字,并为其分配先前捕获的数字值。
  5. 您可以使用Object.keys()类函数获取对象的所有用户定义属性并将其存储在数组中(这是您的区域)。
  6. 然后,您可以遍历您的区域数组
  7. 如果该行没有区域(它是空的,未定义等;通常与后缀逗号相关)
  8. 创建您将在页面上发布的跨度(或任何元素);请注意使用asbos[region],其中区域是一个变量(您输入的区域之一)
  9. 将该值放在页面上的某个位置;在这种情况下,在身体的尽头
0

第一分割与,(逗号&空间一起)

然后使用以下正则表达式此劈裂阵列的每个成员中分离成两个阵列给定的文本; /([\w\s]+\w)\s+([\d]+)/首先捕获的是区域,第二次捕获的是ASBO阵列。

我希望这会有所帮助。

var str = "Avon and Somerset 559, Bedfordshire 220" 
var splitArr = str.split(", "); 
for (var i = 0; i < splitArr.length; i++) { 
    var matched = splitArr[i].match(/([\w\s]+\w)\s+([\d]+)/); 
    region.push(matched[1]); 
    asbo.push(matched[2]); 
} 

会导致;

region = {"Avon and Somerset", "Bedfordshire"} 
asbo = {"559", "220"} 
+1

请避免在数组中使用['for ... in ...](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in)。你在教坏习惯。 – Oka

+0

@OKA是啊,对此感到抱歉,只是发现了它。使用Java一段时间,所以习惯于..在 –

+0

@Oka,是这种情况,为什么for..in循环如此糟糕?根据文档:“for ... in不应该用于迭代索引顺序非常重要的数组。”这个指数在这里并不重要,还是它呢? – developer033