Оптимизация использования карты для выбора страны в JavaScript

1

Я пытаюсь понять, как я могу сделать это быстрее и умнее, вместо того, чтобы использовать две функции 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>
Теги:
optimization
arrays
performance

1 ответ

1

Я думаю, вы можете сделать это в одном для цикла вместо двух карт

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('');
  • 0
    Спасибо за предложение! Кажется, это работает намного быстрее, чем мое другое решение, отображающее элемент в массиве. store.forEach было только исправить небольшую опечатку из store.forEach в stores.forEach .
  • 0
    да мой плохой: D. это должно быть быстрее, так как вы будете зацикливаться на массиве только один раз, даже если функция карты работает быстрее, чем forEach
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню