Question

我试图弄清楚如何更快，更聪明地执行此操作，而不是使用两个map函数来遍历我的商店数组并找到要输出的活动商店我的页面，但还会在我的下拉菜单中输出所有其他商店的列表（活动的输出除外）。

使用map似乎会增加下拉菜单的加载时间。

出于安全原因，下面的代码中显示的功能(function() { some code }仍必须自行执行。因此，对代码进行的任何优化或优化思路都将非常棒！

<div class="dropdown">
     <button type="button" class="dropbtn" id="active-store">
     </button>
     <ul id="country-list" class="dropdown-content">
     </ul>
</div>

<script type="text/javascript">
const $ = {
  getJSON(url, callback) {
    callback([{
      NAME: 'China',
      URL: 'example.org',
      FLAG_CODE: 'cn',
    }, {
      NAME: 'Denmark',
      URL: 'example.org',
      FLAG_CODE: 'dk',
    }, {
      NAME: 'Germany',
      URL: 'example.org',
      FLAG_CODE: 'de',
    }, {
      NAME: 'Global',
      URL: 'example.org',
      FLAG_CODE: 'eu',
    }, {
      NAME: 'Hong Kong',
      URL: 'example.org',
      FLAG_CODE: 'hk',
    }, {
      NAME: 'India',
      URL: 'example.org',
      FLAG_CODE: 'in',
    }, {
      NAME: 'Japan',
      URL: 'example.org',
      FLAG_CODE: 'jp',
    }, {
      NAME: 'Portugal',
      URL: 'example.org',
      FLAG_CODE: 'pt',
    }, {
      NAME: 'Singapore',
      URL: 'example.org',
      FLAG_CODE: 'sg',
    }, {
      NAME: 'South Korea',
      URL: 'example.org',
      FLAG_CODE: 'kr',
    }, {
      NAME: 'UAE',
      URL: 'example.org',
      FLAG_CODE: 'ae',
    } {
      NAME: 'United Kingdom',
      URL: 'example.org',
      FLAG_CODE: 'gb',
    }, {
      NAME: 'Development',
      URL: 'example.org',
      FLAG_CODE: 'eu',
    }]);
  }
};

(function() {
    var output = document.getElementById('country-list'); // element to append country list to
    var active = document.getElementById('active-store'); // element to append active store to
    var active_store = "{{- host -}}"; // current active store url
    var storesArray = []; // stores array

    $.getJSON('/stores', function(stores){
        storesArray = stores;

        active.innerHTML = stores.map(store => {
            if (store.URL === active_store ) {
                return `<img src="{{ 'blank.gif' | asset_url }}" class="flag flag-${ store.FLAG_CODE }"/>
                        <span class="active-store">${ store.NAME }</span>
                        <span id="arrow"></span>`
            }
        }).join('');

        output.innerHTML = stores.map(store => {
            if (store.URL != active_store ) {
                return `<li>
                            <a href="${ store.URL }" alt="${ store.NAME }">
                                <img src="{{ 'blank.gif' | asset_url }}" class="flag flag-${ store.FLAG_CODE }"/>
                                <span>${ store.NAME }</span>
                            </a>
                        </li>`
            }
        }).join('');

    });
})();

</script>

Answer 1

我认为您可以在一个for循环中执行此操作，而不是在两个map中进行操作

let activeArray=[];
let outputArray =[];
stores.forEach((store)=>{
    if (store.URL === active_store ) {
            activeArray.push(
                  `<img src="{{ 'blank.gif' | asset_url }}" 
                        class="flag flag-${ store.FLAG_CODE }"/>
                    <span class="active-store">${ store.NAME }</span>
                    <span id="arrow"></span>`);
     }else {

       outputArray.push(
          `<li>
                <a href="${ store.URL }" alt="${ store.NAME }">
                    <img src="{{ 'blank.gif' | asset_url }}" class="flag flag-${ store.FLAG_CODE }"/>
                            <span>${ store.NAME }</span>
                </a>
          </li>`
       );
    }
});
active.innerHTML = activeArray.join('');
output.innerHTML = outputArray.join('');

针对JavaScript国家/地区选择器优化地图的使用

1 个答案: