JS文字列接続性能

W 3 SCHOOLにおいて、js文字列接続方法の性能比較を議論するページがあります.
対象に興味があるのは、問題を解決する方法を使うことです.ECMAScriptで最も一般的な問題は文字列接続の性能です.他の言語と似ていますが、ECMAScriptの文字列は可変ではありません.つまり、その値は変えられません.下記のコードを考慮してください.

var str = "hello ";
str += "world";

実際、このコードは舞台裏で実行されるステップは以下の通りです.

は、「ハロー」を格納する文字列を作成する.

は、「world」を格納する文字列を作成する.

は、接続結果を格納する文字列を作成する.

は、strの現在のコンテンツを結果にコピーする.

は結果に「world」をコピーします.

は、結果を指すようにstrを更新する.

文字列接続が完了するたびに、ステップ2〜6が実行され、このような動作はリソースを非常に消費する.このプロセスを何百回も繰り返すと、何千回も性能に問題が生じます.解決策は、Arayオブジェクトで文字列を格納し、join()メソッド(パラメータが空の文字列)で最後の文字列を作成します.想像は前のコードの代わりに下のコードを使います.

var arr = new Array();
arr[0] = "hello ";
arr[1] = "world";
var str = arr.join("");

このように、配列中にどれだけの文字列を導入しても問題になりません.ジョイン()メソッドを呼び出した時だけ接続動作が発生します.このとき実行するステップは以下の通りです.

は、結果を格納する文字列

を作成する.

は、各文字列を結果の適切な位置にコピーする

.
この解決策はいいですが、もっといい方法があります.問題は、このコードは正確にその意図を反映することができません.より分かりやすくするためには、この機能をStringBuffer類で包装することができます.

function StringBuffer () {
  this._strings_ = new Array();
}

StringBuffer.prototype.append = function(str) {
  this._strings_.push(str);
};

StringBuffer.prototype.toString = function() {
  return this._strings_.join("");
};

このコードはまず注意しなければならないのはstrigs属性で、本来は私有属性です.それは二つの方法しかありません.つまり、apped()とtoString()の方法です.apped()メソッドは、文字列配列にパラメータを付加し、toString()メソッドは配列のjinメソッドを呼び出して、本当に接続された文字列を返します.StringBufferオブジェクトを使って文字列のセットを接続するには、次のコードが使えます.

var buffer = new StringBuffer ();
buffer.append("hello ");
buffer.append("world");
var result = buffer.toString();
          StringBuffer                 ：
var d1 = new Date();
var str = "";
for (var i=0; i < 10000; i++) {
    str += "text";
}
var d2 = new Date();

document.write("Concatenation with plus: "
 + (d2.getTime() - d1.getTime()) + " milliseconds");

var buffer = new StringBuffer();
d1 = new Date();
for (var i=0; i < 10000; i++) {
    buffer.append("text");
}
var result = buffer.toString();
d2 = new Date();

document.write("<br />Concatenation with StringBuffer: "
 + (d2.getTime() - d1.getTime()) + " milliseconds");
このコードは     に して つのテストを います.  はプラス  を い、 つ はStringBuffer を います.   は10000   に  されています.   d 1とd 2は、    に する  を  するために  される.Dateオブジェクトを  する  、パラメータがない  、オブジェクトに  するのは  の  と  です.    にどれぐらいの  がかかったかを  するには、  のミリ を(getTime()メソッドの り で  すればいいです.これはJavaScriptの  を  する   な  です.このテストの  は、SteringBufferクラス を  してプラス  を  すると50%から66%の  が  されるということを すべきである.
  が  のIE 8で  をしましたが、  10 は   を りました.
Concatension with plus: 23.5 miliseconds Concation with StringBuffer:42 miliseconds
    を10   した  、
Concatension with plus: 145.5 milisecondsContation with StringBuffer: 282.8 miliseconds
IE 8は くから   ＋  を   したように えますが、ここでは    をカスタマイズされたSteringBuffer にパッケージ し、その  を び して    をしていますが、    の    はどうですか?  のコードを    します.
var buffer=new Aray()d 1=new Date();for(var i=0;i＜10000;i＋)｛    buffer[i]=“text”;var reult=buffer.jun(");d 2=new Date();
document.write(\
Concatension with StrigBurer:) + (d 2.getTime()-d 1.getTime()+「miliseconds」)  は  の りです
Concatension with plus: 23.4 miliseconds Concation with StringBuffer:17.3 miliseconds
    を10   した  、
Concatension with plus: 126.4 milisecondsContation with StringBuffer: 98.5 miliseconds
 の  から ても、IE 8の  の  はやはり   に  を ったことがないようです. たところ、コール  の    も れないです.また、この から れば、  にいくつかの  を  する 、  にテストしなければならないです. の  はいつも   れです.
この  をする  で、インターネットで    を  しました.Heeroの「Javascript の     の  について」には、IEの  バージョンのブラウザと のブラウザで った    が  されています.ブラウザの  は えず  しています.フロントエンドエンジニアとして、Javascriptプログラムの     を  に  して、  な  を  します.