时间戳

首页 > 解决方案 > 如果数组位置是从变量填充的，那么后续比较是否会导致与变量名称或变量内容的比较

javascript - 如果数组位置是从变量填充的，那么后续比较是否会导致与变量名称或变量内容的比较

问题描述

我确信这个问题的答案就在那里，但我正在努力用术语来准确描述我的意思。我正在遍历一个在单个 DIV 中包含大量 SVG 的游戏地图，我想知道 Javascript 是在比较两个 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
  }
}

标签： javascriptarrays

解决方案

JavaScript 中的值是对对象的引用（除了像数字这样的基本类型）。

执行===测试时，它首先检查两个值是否引用同一个对象。这是一个非常快速的测试，它只是比较引用中的内存地址。

如果它们不引用相同的对象，它可能会执行特定类型的相等检查；在字符串的情况下，这将逐个字符地比较字符串。

在您的情况下，由于您从要比较的同一变量中分配了数组元素，因此该数组包含对相同字符串对象的引用。所以第一次对象相等性测试会成功，并且不需要比较字符串中的文本（如果对象在同一个地址，它们显然具有相同的内容）。

推荐阅读