これに対する答えは必ずあると思いますが、私が言いたいことを正確に説明するための用語に苦労しています。個々の DIV 内に多数の SVG を含むゲーム マップをループしていますが、JavaScript が 2 つの 9 文字列 svgString と svgString (短くて単純な比較のように見えます) を比較しているのか、それとも数千の文字を比較しているのかを知りたいです。変数内の配列内の何千もの文字への変換 (長い比較のようで、おそらく別の解決策を探すことになるでしょう)?
この JSFiddle は、私が言いたいことの例を示しています。これを定期的に実行していて、おそらく 500 個の異なるゲーム セルを連続して実行している場合、500 X 14 のキャラクター比較は耐えられるように感じます。しかし、何百万ものキャラクターを比較するのは簡単ではないように感じます遅いです。
以下にコードを複製します。わかりやすくするために、コードと Fiddle の両方でより単純な SVG を使用しました。
<div id="rocket">
</div>
<div id="clicker" onclick="numCheck()">
Click Me (if you want)
</div>
#rocket {
width: 256px;
height: 256px;
background: red;
}
#rocket svg {
width: 256px;
height: 256px;
}
#clicker {
width: 256px;
height: 50px;
background: blue;
}
let svgString = '<?xml version="1.0" encoding="utf-8"?>\
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\
width="256px" height="256px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">\
<g>\
<g>\
<g>\
<path fill="#020202" d="M204.192,62.194c14.147-20.472,29.339-41.613,50.963-54.72c21.323,12.782,36.366,33.547,50.311,53.656\
c32.847,49.754,52.929,109.515,48.878,169.578c10.615,8.898,21.537,17.441,31.994,26.521\
c15.011,13.797,22.02,35.319,18.406,55.327c-5.036,25.275-9.876,50.607-15.206,75.813c-2.963,12.968-20.508,18.905-30.823,10.62\
c-17.121-14.291-33.816-29.108-50.932-43.417c-12.95,12.462-30.153,20.772-48.214,21.773\
c-20.791,1.466-41.375-7.156-56.448-21.242c-12.28,9.401-23.666,20.686-35.664,30.755c-5.799,4.66-10.621,10.784-17.484,13.966\
c-10.64,4.565-24.342-2.248-26.747-13.685c-5.479-24.642-11.203-49.24-16.52-73.92c-4.321-20.878,3.332-43.61,19.419-57.607\
c9.313-7.822,18.756-15.487,28.243-23.096c2.643-1.39,1.315-4.596,1.465-6.951C153.005,167.614,172.8,110.333,204.192,62.194z\
M220.995,138.526c-12.424,15.994-10.921,40.768,3.488,55.052c15.255,16.809,44.15,17.422,60.106,1.29\
c12.317-11.253,16.482-30.146,10.603-45.671c-5.387-14.967-19.809-26.195-35.671-27.591\
C244.873,119.92,229.706,126.659,220.995,138.526z"/>\
</g>\
<path fill="#020202" d="M198.263,407.819c-0.213-7.266,8.83-12.262,14.942-8.417c25.87,13.32,58.027,13.314,83.896-0.007\
c5.937-3.645,14.736,0.733,14.955,7.803c0.087,15.432,0.105,30.88,0.024,46.317c0.119,7.533-9.832,12.337-15.681,7.626\
c-4.452-3.926-8.467-8.341-12.75-12.461c-6.776,13.201-13.163,26.602-19.995,39.772c-3.281,6.275-13.533,6.318-16.877,0.105\
c-6.87-13.195-13.213-26.676-20.121-39.858c-4.221,4.157-8.248,8.548-12.694,12.468c-5.824,4.734-15.756-0.162-15.675-7.647\
C198.163,438.291,198.244,423.055,198.263,407.819z"/>\
</g>\
<circle fill="#020202" cx="254.831" cy="164.509" r="20.812"/>\
</g>\
</svg>'
let array1 = [svgString, svgString, svgString, svgString, svgString];
function numCheck() {
if (array1[2] === svgString) {
document.getElementById('rocket').innerHTML = array1[2];
} else {
//do nout
}
}
変数識別子は考慮されません。文字列が比較されます。比較を高速化したい場合は、ハッシュを生成してそれらを比較することを検討してください。 SVG は安定しているため、ハッシュを事前計算します。
– ブレンデン
2020 年 9 月 4 日 22:26
------------------------
JavaScript の値はオブジェクトへの参照です (数値などのプリミティブ型を除く)。
=== テストを実行すると、まず両方の値が同じオブジェクトを参照しているかどうかがチェックされます。これは非常に簡単なテストであり、参照内のメモリ アドレスを比較するだけです。
同じオブジェクトを参照していない場合は、型固有の等価性チェックが実行されることがあります。文字列の場合、文字列を 1 文字ずつ比較します。
あなたの場合、比較対象と同じ変数から配列要素を割り当てているため、配列には同じ文字列オブジェクトへの参照が含まれています。したがって、オブジェクトの等価性の最初のテストは成功し、comp する必要はありません。文字列内のテキストです (オブジェクトが同じアドレスにある場合、それらは明らかに同じ内容を持ちます)。
4
それは素晴らしいですね。余談ですが...ロケットの innerHTML を次のように設定し、別の比較を行うとします。 if (document.getElementById('rocket').innerHTML === array1[2]) { ...オブジェクトから設定した innerHTML も同じメモリ位置を参照しますか?
– テイムエイム
2020 年 9 月 4 日 22:38
DOM 階層から新しい文字列を作成する必要があるため、内容を比較する必要があります。
– バルマー
2020 年 9 月 4 日 22:42
DOM には生の文字列が含まれていません。 innerHTML に割り当てると、HTML がオブジェクトの階層に解析されます。読むときinnerHTML では、すべての DOM 要素を調べて、新しい文字列表現を作成する必要があります。
– バルマー
2020 年 9 月 4 日 22:43
ありがとうございます。同じオブジェクトを指す変数と配列の位置に対するすべての比較を保持するようにします。
– テイムエイム
2020 年 9 月 4 日 22:45
