如何通过 underscoreJS 遍历字母表答案

【问题标题】：How to loop through the alphabet via underscoreJS如何通过 underscoreJS 遍历字母表
【发布时间】：2013-05-23 05:48:44
【问题描述】：

我在 BackboneJS 视图中使用 Underscore 的 template() 方法。我想在视图中显示字母列表，以便按字母对集合进行排序。

因此，在我看来，我有一个包含 26 个链接的列表（一个链接 = 一个字母）。而不是复制粘贴每个链接（这对代码的可维护性非常不利），我想知道是否可以通过 underscoreJS 循环遍历字母表。

要显示的结果：

<li ><a href="#">a</a></li>
<li ><a href="#">b</a></li>
<li ><a href="#">c</a></li>
...
<li ><a href="#">z</a></li>

【问题讨论】：

标签： javascript list loops backbone.js underscore.js

【解决方案1】：

另一种带有下划线（或 loadash）的方法：

_.map(_.range(26), function(i) { return String.fromCharCode(97 + i) });

// returns ['a', 'b', ..., 'z']

【讨论】：

【解决方案2】：

使用 ES6 for-of:

for(let char of "abcdefghijklmnopqrstuvwxyz" )
  console.log(char); // prints 'a' to 'z'

在模板中很容易使用，您可以使用Babel 将其转换为不支持该语法的浏览器的代码。

【讨论】：

您没有直接回答关于主干或下划线的问题，但由于我在 ES6+ 中，因此帮助了我。谢谢。

【解决方案3】：

for(var letter=65;letter<91;letter++)
{
var _char = String.fromCharCode(letter);
console.log(_char);
}

或为小写字母使用 97 - 123 的 ascii 代码

【讨论】：

真的很简单！声明一个数组并将每个 _char 推送到该数组，您的数组已准备好字母！

【解决方案4】：

for (var i = 'a'.charCodeAt(0); i <= 'z'.charCodeAt(0); i++) {
  console.log(String.fromCharCode(i));
}

【讨论】：

charCodeAt(0) 连接到您的起始和结束索引有什么用？
好的，是的，现在重新看，这看起来不错；它可能比 Medo Medo 稍慢，但可读性稍强。

【解决方案5】：

这是@Medo Medo 的纯 JS 代码的改进*版本：

    var letters=[], letter_first = 'a', letter_last = 'z' // you can also use A and Z
    for (var letter=letter_first.charCodeAt(0);letter<=letter_last.charCodeAt(0);letter++)
      letters.push(String.fromCharCode(letter))
    document.write(letters.join(''))

修复了“var”声明
添加了直接字母检测
将结果收集到一个数组中以便只有一个输出
使代码在此处可运行

【讨论】：

【解决方案6】：

使用字符代码创建一个范围

var alphas = _.range(
    'a'.charCodeAt(0),
    'z'.charCodeAt(0)+1
); 
// [97 .. 122]

用字母创建一个数组

var letters = _.map(alphas, a => String.fromCharCode(a));
// see @deefour comment

// Non ES6 version
// var letters = _.map(alphas, function(a) {
//    return String.fromCharCode(a);
// });

// [a .. z]

注入你的模板

var tpl = 
'<ul>'+
    '<% _.each(letters, function(letter) { %>'+
        '<li><%= letter %></li>'+
    '<% }); %>'+
'</ul>';
var compiled = _.template(tpl);
var html = compiled({letters : letters});

还有一个演示http://jsfiddle.net/hPdSQ/17/

var alphas = _.range(
    'a'.charCodeAt(0),
    'z'.charCodeAt(0)+1
); 

var letters = _.map(alphas, a => String.fromCharCode(a));

var tpl = 
'<ul>'+
    '<% _.each(letters, function(letter) { %>'+
        '<li><%= letter %></li>'+
    '<% }); %>'+
'</ul>';
var compiled = _.template(tpl);

var html = compiled({letters : letters});

document.getElementById('res').innerHTML = html;

<script src="http://underscorejs.org/underscore-min.js"></script>
<div id='res'></div>

【讨论】：

请注意，此答案中alphas 上的地图不返回原始字符数组"a", "b", "c", ...。您将获得像 "a\u0001\u0000", "b\u0001\u0000", "c\u0001\u0000", ... 这样的 unicode 字符串。相反，您应该使用像 a => String.fromCharCode(a) 这样的箭头函数来仅传递第一个参数（fromCharCode 接受任意数量的参数，导致 lodash 传递给 map 回调的任何其他内容都被转换为上面显示的空值）。

【解决方案7】：

var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
_.each(alphabet, function(letter) {
  console.log(letter);
});

你可以这样做。

【讨论】：

【解决方案8】：

Underscore 没有这种能力，但你的案例可以在模板上做一些技巧。像这样更改您的模板：

<% for(var i=65; i<90; i++) { %>
<li ><a href="#"><% print(String.fromCharCode(i)); %></a></li>
<% } %>

这应该是你想要的。

【讨论】：

你错过了 Z ，var i = 65; i <= 90; i++ ，它需要

【解决方案9】：

结合使用underscore.js 和jQuery 将帮助您实现这一点（underscore.js 无法自行进行 DOM 插入/操作）。

var abc = ['a', 'b', 'c', 'd']; //i disregarded how you get the list of letters.

_.each(abc, function(letter){
    $('ul').append('<li><a href="#">'+letter+'</a></li>');
});

还发了fiddle for you

【讨论】：