Javascript如何在新行上显示数组的每个元素

时间:2012-06-11 15:15:08

标签: javascript extjs4

我有一个字符串构建形式逗号分隔值我使用split来获取每个值,之后我想在新行上显示每个值,但实际发生的是我在新行上获取每个值除了最后两个一起显示在同一条线上。只是说清楚:

  

值1

     

,值2

     

,值3

     

,VALUE4,值5

这是我正在使用的功能:

_checkDates: function(dates) {
        if (dates != null)
        {
            var zzz = dates.split(',');
            var xxx = zzz.length;
            console.log(xxx);
            for (var i=0; i<=xxx; i++)
                {
                    zzz[i] = zzz[i] + '<br />';
                    return zzz;
                }
        }
        return dates;
    }

为了清楚这是用ExtJS 4编写的,我几乎可以肯定,在这种情况下,问题是纯JavaScript并且与ExtJS 4无关,但无论如何,也许我错了。

所以任何想法为什么会发生,以及我如何才能让最后的元素进入一个新线?

由于

Leron

3 个答案:

答案 0 :(得分:17)

我已经修改了你的功能位清洁器。因为已经stefan提到了你的错误。

function splitDate(dates) {
        if (dates != null)
        {
            var dates = dates.split(',');
            var xxx = dates.length;
            console.log(xxx);
            for (var i=0; i<xxx; i++)
                {
                    dates[i] = dates[i];                    
                }
        }
        console.log(dates.join('\r\n'));
        return dates.join('\r\n');        
    }

以上功能你可以在一行中完成:

如果是数组,您可以按以下方式拆分为新行:

var arr = ['apple','banana','mango'];
console.log(arr.join('\r\n'));

如果是字符串:

var str = "apple,banana,mango";
console.log(str.split(',').join("\r\n"));

答案 1 :(得分:10)

for循环是可疑的。首先,你不处理所有项目(最后一个项目缺失,正如@sarfraz指出的那样)。你在for循环体中返回结果(zzz):

for (var i=0; i<=xxx; i++)
{
  zzz[i] = zzz[i] + '<br />';
  return zzz; // for-loop will stop here! resulting in ["value1<br />", "Value2", etc...]
}

在Javscript中,您可以简单地“加入”数组:

return dates.split(',').join("<br />")

由于您只是替换字符串,因此可以使用replace方法:

return dates.replace(",", "<br />");

答案 2 :(得分:1)

对于React-Native

const your_array_name = [
{
    id: 1,
    text: 'Lorem ipsum is simple dummy text for printing the line',
    skills: ['javascript', 'java']
},
{
    id: 2,
    text: 'Lorem ipsum is simple dummy text.',
    skills: ['javascript', 'java']
} ]

`<Text style={{color:'#ff8500',fontSize:18}}>{your_array_name.skills.splice(',').join("\n")}</Text>`