JavaScript 新手,我认为我需要一个循环来解决这个问题.....?

Posted

技术标签:

【中文标题】JavaScript 新手,我认为我需要一个循环来解决这个问题.....?【英文标题】:New to JavaScript and think I need a loop for this.....? 【发布时间】:2016-02-13 23:23:21 【问题描述】:

我有一个 180 字符的数字串,需要分成 6 组,分成 2 个字符数字,然后按升序排序。

我已经这样做了,但它看起来很脏,而且我很确定随着我对 javascript 理解的逐渐提高,一个整洁的小循环可以为我节省大量重复。

    <script type="text/javascript">

var ticketString =   "011722475204365360702637497481233455758302154058881928446789061241507324334876840738576186051132437816395663800818206590104559628214294664710935667287132130687703253151692742547985".match(/.1,2/g);

var groupa = ticketString.slice (0,15);

groupa.sort();

var groupb = ticketString.slice (15,30);

groupb.sort();

var groupc = ticketString.slice (30,45);

groupc.sort();

var groupd = ticketString.slice(45,60);

groupd.sort();

var groupe = ticketString.slice(60,75);

groupe.sort();

var groupf = ticketString.slice(75,90);

groupf.sort();

function displayArray () 

document.getElementById('ticketOne').innerhtml = groupa;

document.getElementById('ticketTwo').innerHTML = groupb;

document.getElementById('ticketThree').innerHTML = groupc;

document.getElementById('ticketFour').innerHTML = groupd;

document.getElementById('ticketFive').innerHTML = groupe;

document.getElementById('ticketSix').innerHTML = groupf;


现在将输出放入段落中,但我知道这比我拥有它的方式更容易完成。函数 displayArray 加载了 body 标签。

【问题讨论】:

所以您需要将 180 个字符分成 6 组 15 x 2 位数字,然后对这些组进行排序? @Ziki ticketString 是一个由两位数字组成的数组。对数组进行切片会返回一个数组,因此对任何组对象进行排序都不会导致问题。 你好,是的,180个字符分成6组2位数字,然后按升序排列。上面的代码真的很重,所以只需要推动我的逻辑正确。上面的工作可以分成 6 行数字,但它是基本的,我知道有更好的方法来做到这一点。谢谢大家。 【参考方案1】:

如果您可以将元素从 ticketOneticketTwo 等重命名为 ticket1ticket2 等:

<script type="text/javascript">

 var ticketString = "011722475204365360702637497481233455758302154058881928446789061241507324334876840738576186051132437816395663800818206590104559628214294664710935667287132130687703253151692742547985".match(/.1,2/g);
 for (var i=0; i<ticketString.length/15; i++) 
     var group = ticketString.slice(i*15, i*15+15);
     group.sort();
     document.getElementById('ticket'+(i+1)).innerHTML = group;
 
 </script>

【讨论】:

【参考方案2】:

所以这是我认为最好的解决方案:

var ticketString =   "011722475204365360702637497481233455758302154058881928446789061241507324334876840738576186051132437816395663800818206590104559628214294664710935667287132130687703253151692742547985".match(/.1,2/g);

var group = [];
for (var i = 0; i < 180 / 15 / 2; i++) 
    group[i] = ticketString.slice(i * 15, (i + 1) * 15);
    group[i].sort();

    document.getElementById('ticket[' + i + ']').innerHTML = group[i];

我在这里所做的是创建了一个名为 group 的本地数组,这反过来又比使用“group1”或“ticketFirst”之类的名称更容易在循环中处理。

在那之后我几乎做了和你一样的事情,但是由于我使用了 for 循环,我能够大大缩短它。

我之所以使用 i

for (var i = 0; i  你当然必须有这样的 HTML:

<body>
    <p id="ticket[0]"></p>
    <p id="ticket[1]"></p>
    <p id="ticket[2]"></p>
    <p id="ticket[3]"></p>
    <p id="ticket[4]"></p>
    <p id="ticket[5]"></p>
</body>

【讨论】:

您好,感谢您的建议,我已按照流程进行操作,但在 HTML 票证段落中没有收到任何信息。控制台正在读取“null”。你能提出什么建议? 您是否仔细检查了变量名?你是从我的复制粘贴还是调整到你的? 嗨,我已经将您的流程调整为我正在使用的变量,或者更适合我正在编程的变量。票据[i]的变量使用;没有被捡起。我检查控制台,它正在阅读:未捕获的类型错误:无法设置属性 'innerHTML' of null 我也把180 / 15 / 2调整为ticketString.length / 15 / 2 “我也有一个简短的问题,var group = []; 我假设变量首先被定义为一个数组?我在网上找不到太多关于这个的信息。” - 我刚刚在你的说明中看到了这一点。您已经创建了一个名为“组”的本地数组。现在知道了。【参考方案3】:

你可以把它简化为:

var groupArray = [];
    for(var i=0;i<100;i+=15)
    groupArray.push(ticketString.slice (i,15+i));
        groupArray[groupArray.length-1].sort();
    

【讨论】:

【参考方案4】:

如果您将“票证”ID 更改为通用“票证”类,您可以执行类似的操作;

var ticketString =   "011722475204365360702637497481233455758302154058881928446789061241507324334876840738576186051132437816395663800818206590104559628214294664710935667287132130687703253151692742547985".match(/.1,2/g);
var tickElem = document.querySelectorAll('.ticket');
var strPoint = 0;
for(var i in tickElem)

  var grp = ticketString.slice(strPoint, (strPoint += 15));
  grp.sort();
  tickElem[i].innerText = grp.join('');

【讨论】:

【参考方案5】:

这个compact版本怎么样:

var start = 0;
['ticketOne', 'ticketTwo', 'ticketThree', 'ticketFour', 'ticketFive', 'ticketSix']
.forEach(function (id)    
    document.getElementById(id).innerHTML = ticketString.slice(start, start += 15).sort();
);

【讨论】:

【参考方案6】:
 <script>

 var ticketString ="011722475204365360702637497481233455758302154058881928446789061241507324334876840738576186051132437816395663800818206590104559628214294664710935667287132130687703253151692742547985".match(/.1,2/g);

 function loadTickets () 

 var ticket = [];

 for (var i = 0; i < ticketString.length / 15; i++) 

 ticket[i] = ticketString.slice(i * 15, (i + 1) * 15).sort();

 var tableCre = document.createElement("TABLE");

 tableCre.setAttribute("id","ticketTable" + i)

 document.body.appendChild(tableCre);

 document.getElementById('ticketTable' + i).innerHTML = ticket[i];

 

 console.log(ticketString);

 console.log(ticket);

 ;

</script>

解决了,@Quikers - 给你竖起大拇指;因为这是我的想法 - 将 .sort() 函数带入 ticket[i] 变量中以稍微修剪它,并根据数组的数量,我动态创建了 6 个表来保存其中的字符串。我必须开发表格并设置它们,但我现在已经差不多了。感谢你的帮助。

【讨论】:

以上是关于JavaScript 新手,我认为我需要一个循环来解决这个问题.....?的主要内容,如果未能解决你的问题,请参考以下文章

Javascript For循环克隆thead的时间

如何使用 Plotly Javascript 显示循环进度图

循环画廊使用 next() 和 prev() 方法的问题 - javascript / jQuery

无限循环(动作脚本3)

JS是新手,请帮忙关于JavaScript循环的问题

再探Javascript事件循环及其与浏览器渲染的关系