Javascript和很长的字符串

Javascript和很长的字符串

本文介绍了Javascript和很长的字符串的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有以下code问题:

 函数showTableData()
{
    VAR tableArray;
    变种X = 0;
    VAR theHTML;    对于(i = 0; I< 7032;我++)
    {
        如果(X = 0)
        {
            theHTML ='< TR>' +
                百分位范围=行类=规范>' + partNum [I] +'&下; /第i' +
                '< TD>' + MSRP [I] +'< / TD>' +
                '< TD>' +等等[I] +'< / TD>' +
                '< TD>' +无聊症[I] +'< / TD>' +
            '< / TR>' + theHTML;
            X ++;
        }其他{
            theHTML ='< TR>' +
                百分位范围=行类=specalt>' + partNum [I] +'&下; /第i' +
                '< TD类=ALT>' + MSRP [I] +'< / TD>' +
                '< TD类=ALT>' +等等[I] +'< / TD>' +
                '< TD类=ALT>' +无聊症[I] +'< / TD>' +
            '< / TR>' + theHTML;
            X - ;
        }
    }
    theHTML ='<表ID =mytable的CELLSPACING =0>' +
    '< TR>' +
        百分位范围=山口简称=配置级=nobg>产品编号< /第i' +
        百分位范围=山口简称=双1.8> MSRP价格和LT; /第i' +
        百分位范围=山口简称=双2>无聊症了价格和LT; /第i' +
    百分位范围=山口简称=双2.5>低价格和LT; /第i' +
    '< / TR>' + theHTML +'< /表>';    $('#示例)追加(theHTML)。
}
 < / SCRIPT> < D​​IV ID =榜样>
 < / DIV>

问题在于在 $('#示例)追加(theHTML); 从来没有执行(或显示页)。我认为它是因为字符串是soooooo长!它有数组中的7000项目,以便即时通讯不知道如果多数民众赞成的原因或者其别的东西?

任何帮助将是巨大的!谢谢!

大卫


解决方案

除了如果(X = 0)这确实应该如果(我%2 == 0),你真应该在这里使用Array.join()方法,而不是连接字符串提高性能。这将有一个的在C#或Java类似的效果。

例如:

 函数showTableData()
{
    VAR tableArray;
    变种theHTML = [];
    theHTML.push('<表ID =mytable的CELLSPACING =0>,
    '&所述; TR>',
        百分位范围=山口简称=配置级=nobg>产品编号< /第i',
        百分位范围=山口简称=双1.8> MSRP价格和LT; /第i',
        百分位范围=山口简称=双2>无聊症了价格和LT; /第i',
    百分位范围=山口简称=双2.5>低价格和LT; /第i',
    '< / TR>');    对于(VAR I = 0; I< 7032;我++)
    {
        如果(我%2 == 0)
        {
             theHTML.push('&所述; TR>',
                 百分位范围=行类=规范>',partNum [我],'< /第i',
                 '&所述; TD>',MSRP [I]'&所述; / TD>',
                 '&所述; TD>',等等[I]'&所述; / TD>',
                 '&所述; TD>',无聊症[I]'&所述; / TD>',
             '< / TR>');
        }其他{
             theHTML.push('&所述; TR>',
                 百分位范围=行类=specalt>',partNum [我],'< /第i',
                 '&所述; TD类=替代>',MSRP [I]'&所述; / TD>',
                 '&所述; TD类=替代>',等等[I]'&所述; / TD>',
                 '&所述; TD类=替代>',无聊症[I]'&所述; / TD>',
             '< / TR>');
        }
    }
    theHTML.push('< /表>');    $('#示例)追加(theHTML.join(''));
}
 < / SCRIPT> < D​​IV ID =榜样>
 < / DIV>

为什么追加字符串'我'+'追加'+'串'比将字符串连接速度慢 ['我的','加盟的原因','串']。加入('')是因为JavaScript字符串是不可变,以便在前者的例子有在每2字符串连时间,这是一种非常昂贵的操作相比添加新条目到一个数组的第三串。

又见使用相同坚持的原则建成了的Javascript的StringBuilder项目的Array.push()和Array.join()的

在这个项目上的在IE万串联的性能改进是从1分钟下降至0.23秒。

更新:其他调用Array.join()加入到for循环内更换字符串连接,这是进一步提高客户端的渲染速度。 +添加了更好的链接StringBuilder的。

进一步更新:添加人铁杉建议:


  1. 定义不再使用全局范围变量 VAR I = 0 在for循环

  2. 使用的Array.push()的多个参数推几个字符串在同一时间。

i am having problems with the below code:

function showTableData()
{
    var tableArray;
    var x = 0;
    var theHTML;

    for (i = 0; i < 7032; i++)
    {
        if (x = 0)
        {
            theHTML = '<tr>' +
                '<th scope="row" class="spec">' + partNum[i] + '</th>' +
                '<td>' + Msrp[i] + '</td>' +
                '<td>' + blah[i] + '</td>' +
                '<td>' + blahs[i] + '</td>' +
            '</tr>' + theHTML;
            x++;
        }else{
            theHTML = '<tr>' +
                '<th scope="row" class="specalt">' + partNum[i] + '</th>' +
                '<td class="alt">' + Msrp[i] + '</td>' +
                '<td class="alt">' + blah[i] + '</td>' +
                '<td class="alt">' + blahs[i] + '</td>' +
            '</tr>' + theHTML;
            x--;
        }
    }
    theHTML = '<table id="mytable" cellspacing="0">' +
    '<tr>' +
        '<th scope="col" abbr="Configurations" class="nobg">Part Number</th>' +
        '<th scope="col" abbr="Dual 1.8">Msrp Price</th>' +
        '<th scope="col" abbr="Dual 2">blahs Price</th>' +
    '<th scope="col" abbr="Dual 2.5">Low Price</th>' +
    '</tr>' + theHTML + '</table>';

    $('#example').append(theHTML);
}
 </script>

 <div id="example">
 </div>

The problem being that the $('#example').append(theHTML); never executes (or shows on the page). I think its because the string is soooooo long! It has over 7,000 items in the array so im not sure if thats the reason or if its something else?

Any help would be great! Thanks!

David

Apart from the if (x = 0) that should really be if (i % 2 == 0), you really should improve performance here by using Array.join() method instead of concatenating strings. This will have a similar effect to a StringBuilder in C# or Java.

For example:

function showTableData()
{
    var tableArray;
    var theHTML = [];
    theHTML.push('<table id="mytable" cellspacing="0">',
    '<tr>',
        '<th scope="col" abbr="Configurations" class="nobg">Part Number</th>',
        '<th scope="col" abbr="Dual 1.8">Msrp Price</th>',
        '<th scope="col" abbr="Dual 2">blahs Price</th>',
    '<th scope="col" abbr="Dual 2.5">Low Price</th>',
    '</tr>');

    for (var i = 0; i < 7032; i++)
    {
        if (i % 2 == 0)
        {
             theHTML.push('<tr>',
                 '<th scope="row" class="spec">', partNum[i], '</th>',
                 '<td>', Msrp[i], '</td>',
                 '<td>', blah[i], '</td>',
                 '<td>', blahs[i], '</td>',
             '</tr>');
        } else {
             theHTML.push('<tr>',
                 '<th scope="row" class="specalt">', partNum[i], '</th>',
                 '<td class="alt">', Msrp[i], '</td>',
                 '<td class="alt">', blah[i], '</td>',
                 '<td class="alt">', blahs[i], '</td>',
             '</tr>');
        }
    }
    theHTML.push('</table>');

    $('#example').append(theHTML.join(''));
}
 </script>

 <div id="example">
 </div>

The reason why appending string 'my' + ' appended' + ' string' is slower than joining strings ['my', ' joined', ' string'].join('') is because JavaScript strings are immutable so in the former example there is a third string created every time 2 strings are concatenated, which is a very expensive operation compared to adding new entries into an array.

See also a Javascript StringBuilder project built using the same priciples of Array.push() and Array.join().

The performance improvement on this project for 10,000 concatenations in IE was down from over 1 minute to 0.23 seconds.

UPDATE: Additional calls to Array.join() added to replace string concatenation within the for-loop, this is to improve client rendering speeds further. + Added better link to StringBuilder.

FURTHER UPDATE: Added suggestions by Hemlock:

  1. Removed use of globally scoped variable by defining var i = 0 in for-loop
  2. Pushed several strings at a time using multiple parameters of Array.push().

这篇关于Javascript和很长的字符串的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-20 23:04