Ответы пользователя по тегу JavaScript
  • Как правильно отфильтровать массив - (native javascript)?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const lowered = str.toLowerCase();
    const filtered = data.filter(n => !n.name.toLowerCase().indexOf(lowered));

    или

    const filtered = data.filter(function(n) {
      return n.name.toLowerCase().startsWith(this);
    }, str.toLowerCase());

    или

    const filtered = data.filter(((reg, n) => reg.test(n.name)).bind(null, RegExp(`^${str}`, 'i')));
    Ответ написан
    Комментировать
  • Как реализовать генератор чисел?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const getRandomInt = (min, max) => (Math.random() * (max - min + 1) + min) | 0;
    setInterval($counter => $counter.text(getRandomInt(200, 300)), 500, $('.counter'));
    Ответ написан
    Комментировать
  • Как вырезать из url имя файла?

    0xD34F
    @0xD34F Куратор тега JavaScript
    str.match(/([^/]+)\.[^\.]+$/)[1]
    
    // или
    
    str.split('/').pop().split('.').shift()
    
    // или
    
    str.split(/[/.]/).slice(-2)[0]
    
    // или
    
    str.replace(/.*\//, '').replace(/\..*/, '')
    
    // или
    
    str.slice(str.lastIndexOf('/') + 1, str.lastIndexOf('.'))
    Ответ написан
    Комментировать
  • Как создать массив с рандомными повторяющимися числами?

    0xD34F
    @0xD34F Куратор тега JavaScript
    чтобы числа повторялись не более двух раз

    Ну, очевидно же - создать два массива со случайными числами и объединить их. Как создать массив со случайными не повторяющимися числами - недавно рассказывал.
    Ответ написан
    5 комментариев
  • Как сделать добавление/удаление активному input Jquery?

    0xD34F
    @0xD34F Куратор тега JavaScript
    $(document).on({
      focus() {
        $(this).addClass('active-amount-input');
      },
      blur() {
        $(this).removeClass('active-amount-input');
      },
    }, '.amount, .amount_1');

    или

    $(document).on('focusin focusout', '.amount, .amount_1', e => {
      $(e.currentTarget).toggleClass('active-amount-input', e.type === 'focusin');
    });
    Ответ написан
    2 комментария
  • Исключить повторяющиеся объекты?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const uniqueDocs = docs
      .filter((n, i, a) => n === a.find(m => m.date === n.date && m.type === n.type))
      .map(({ type, date }) => ({ type, date }));

    или

    const uniqueDocs = Object
      .entries(docs.reduce((acc, n) => ((acc[n.type] = acc[n.type] || new Set).add(n.date), acc), {}))
      .reduce((acc, n) => (acc.push(...Array.from(n[1], m => ({ type: n[0], date: m }))), acc), []);

    или

    const unique = (arr, keys) =>
      arr.filter((n, i, a) => i === a.findIndex(m => keys.every(k => n[k] === m[k])));
    
    const pick = (obj, keys) =>
      keys.reduce((acc, k) => (acc[k] = obj[k], acc), {});
    
    
    const keys = [ 'type', 'date' ];
    const uniqueDocs = unique(docs, keys).map(n => pick(n, keys));
    Ответ написан
  • Выборка внутри блока на jQuery скрипта по добавлению класса?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Проверяйте, где был клик:

    $('.shop-ellement-sidebar').on('click', function(e) {
      if ($(e.target).closest('.element-sidebar_content').length) {
        return;
      }
      // дальше проверка наличия класса active и т.д. - без изменений

    Или останавливайте всплытие события при клике на .element-sidebar_content:

    $('.element-sidebar_content').click(function(e) {
      e.stopPropagation();
    });
    Ответ написан
    3 комментария
  • Как еще можно оптимизировать js код?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Исправил синтаксические ошибки.

    Ага, на пять с плюсом.

    • Пропущен if или условие лишнее:

      } else (date.getDay() == 0) {

      } else (a < 1) {

    • Лишнее : после ?:

      this.updateTime.getMonth() > 9 ? : '0'

    • Перед методом renderItems стоит лишняя фигурная скобка, а после метода createPeriod такой скобки не хватает.


    И это только синтаксические. Есть ещё ворох иных.

    • Имена свойств, содержащих обработчики событий, состоят из букв только в нижнем регистре, тут должно было быть input.onchange:

      this.input.onChange = this.onChange;

    • Какое там первое слово в имени базового класса должно быть - date или data? Вы бы определились:

      class dateInput {

      class dateRange extends dataInput {

    • В конструкторе dateRange отсутствует вызов конструктора базового класса - не хватает super(); перед this.container = ...:

      constructor() {
       this.container = document.querySelector('.containerForLastUpdateRecordAndPeriodItems');

    • Это ещё что за на хрен:

      period = `${date.toLocaleDateString()} - {date.setHours(168).toLocaleDateString()}`;

      Во-первых - не указан индекс, и вместо собираемого массива используется объект, переданный в функцию, вместо period должно быть periods[i].
      Во-вторых- метод setHours возвращает число, а не объект даты, так вызвать toLocaleDateString не получится.
      В-третьих - отсутствует $ перед фигурной скобкой при подстановке второй даты.

    • Присваивание значений необъявленным переменным:

      b = false;

      element = document.createElement('div')

      Никогда так больше не делайте. Ну и бегом гуглить, почему это плохо.

    • Неправильно пытаетесь вызывать метод renderItems - не хватает this.:

      onChange() {
       renderItems(this.createItems(this.createPeriod(this.inputValue)));

      Кроме того, this тут будет вовсе не экземпляром класса - надо привязывать контекст при установке этого метода в качестве обработчика события (this.onChange.bind(this) - это в конструкторе dateInput). А ещё, поскольку метод переопределён, надо не забыть вызвать метод базового класса, иначе не будет установлено значение свойства inputValue:

      onChange(e) {
        super.onChange(e);
        this.renderItems(...

    • Можете хоть из кожи вон вылезти, но константа своего значения не изменит, а вот TypeError при попытке выполнить хотя бы одну итерацию подобного цикла получите обязательно:

      for (const i = 0; i < n-a; i++) {

    • Что принимает document.createElement в качестве параметров? Откройте документацию и разберитесь, чтобы такую чушь больше не сочинять:

      const element = document.createElement('div', {textContent: item});

    • Опять проблемы со значением this:

      this.container.appendChild(element);

      Поскольку данная строка находится внутри коллбека forEach, который представлен обычной функцией, то экземпляр класса оказывается недоступен. Или замените обычную функцию на стрелочную, или передайте this в forEach третьим параметром.

    • Это ещё что за на хрен №2:

      createPeriod(date) {
       var newDate = date;
        newDate.year = newDate.year + 1;

      Во-первых - в метод передаётся строка, а не дата.
      Во-вторых - будь там дата, скопировать с помощью оператора присваивания её бы не получилось, для объектов копируются ссылки, а не значения.
      В-третьих - год получается и устанавливается совсем не так, для этого есть методы:

      createPeriod(dateStr) {
        const start = new Date(dateStr);
        const end = new Date(dateStr);
        end.setFullYear(end.getFullYear() + 1);
        return { start, end };
      }

    • Это ещё что за на хрен №3:

      const range = Object.create(dateRange.prototype); 
      range.constructor = range.constructor.bind(range); 
      range.constructor();

      Во-первых, без new конструктор вызывать нельзя.
      Во-вторых - к чему такие сложности? - достаточно new dateRange;.


    А уж что касается общей логики данного кода и насколько он соответствует поставленной задаче (о которой вы почему-то решили умолчать, так что здесь можно было бы говорить только в предположительном ключе), то я даже пытаться думать в эту сторону не буду. Хотя несомненно, что и тут всё очень-очень плохо - раз уж вы при написании кода накосячили как только можно и как нельзя, то почему на этапе проектирования должно было быть что-то принципиально иное?

    Подскажите, как еще можно оптимизировать(зарефакторить) данный js код?

    А зачем? Лучшее, что тут можно сделать - выбросить всё на хрен и попробовать написать заново, предварительно подумав, на этот раз головой вместо задницы. Не стыдно подобный мусор показывать?

    Но окей, окей - метод createItems, например:

    • Странные непонятные числа, встречающиеся в коде - такого не надо, определяем константы, имена которых будут указывать, что это за значения:

      const MS_IN_HOUR = 3600000;
      const HOURS = 168;

    • Вместо двух циклов сделайте один - промежуточный массив dates не нужен:

      for (let i = +period.start; i < +period.end; i += MS_IN_HOUR * HOURS) {
        const date = new Date(i);

    • "Оптимизируйте" if-else-if-... - складываем нижние значения часов в массив (тоже бы неплохо определить его отдельно, дав осмысленное имя), извлекаем их используя день недели как индекс, верхнее значение получаем добавляя сколько там надо (я так понял, разница везде одинаковая между нижним и верхним):

      const hours = [ -120, 0, -24, -48, -48, -72, -96 ][date.getDay()];
      periods.push([ hours, hours + HOURS ]
        .map(n => (date.setHours(n), date.toLocaleDateString()))
        .join(' - ')
      );

    • Для обмена значениями дополнительная переменная не нужна:

      [ periods[i + a], periods[i] ] = [ periods[i], periods[i + a] ];



    Или, renderItems:

    Четыре обращения к свойству updateTime - как-то многовато, достаточно одного, чтобы запомнить значение под коротким именем:

    const ut = this.updateTime;

    Вместо отдельных элементов можно вставлять разметку:

    this.container.insertAdjacentHTML('beforeend',
      `<div>Последнее изменение: ${ut.getDate()}.${`${ut.getMonth()}`.padStart(2, 0)}</div>` +
      items.map(n => `<div>${n}</div>`).join('')
    );
    Ответ написан
    3 комментария
  • Как получить 2й элемент из списка дивов с одинаковыми классами?

    0xD34F
    @0xD34F Куратор тега JavaScript
    О каком классе идёт речь, и элемент с каким индексом надо получить:

    const className = 'class';
    const index = 1;

    Если у элементов общий родитель, то можно сразу схватить нужный:

    const element = document.querySelector(`.${className}:nth-child(${index + 1})`);

    В противном случае сперва придётся получить все элементы, имеющие класс:

    const element = document.querySelectorAll('.' + className)[index];
    // или
    const element = document.getElementsByClassName(className).item(index);
    Ответ написан
    Комментировать
  • Как передать в функцию первое и третье значение?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Если нужна возможность выборочной передачи параметров, объедините их в один - пусть это будут свойства объекта:

    function foo({ a, b, c }) {
      console.log(a, b, c);
    }
    
    foo({ b: 9, c: 5 }); // undefined 9 5
    Ответ написан
    Комментировать
  • Какое составить регулярное выражение для отбора из словаря слов по определенному шаблону?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Почему выдает фрагмент слова?

    Потому что разделение строки по словам - оно исключительно у вас в голове, в вашем регулярном выражении ничего про границы слов нет. Есть спецсимвол \b, обозначающий границы слов, но он в данном случае неприменим, поскольку у вас тут кириллические символы. Можно представить границу слова как начало строки или пробельный символ или конец строки. Типа так:

    str.match(/(^|\s)[бвгджзк][аяеэюуёоиы]+[бвгджзк][а-яё]*($|\s)*?/gi).map(n => n.trim())

    Но вообще - как-то не очень понятно, зачем такие сложности. Вы говорите, у вас какой-то словарь - ну так поместите слова в массив, и проверяйте на точное соответствие, волноваться о границах слов будет не нужно.
    Ответ написан
    Комментировать
  • Как сделать append строки скрипта и выполнить его?

    0xD34F
    @0xD34F Куратор тега JavaScript
    $('body').append('\<script\>alert(123);\</script\>');

    или

    var script = document.createElement('script');
    script.innerText = 'alert(123);';
    document.body.appendChild(script);
    Ответ написан
    Комментировать
  • Как вставлять элементы в список в определенное место, учитывая индекс элемента?

    0xD34F
    @0xD34F Куратор тега JavaScript
    function transfer(from, to) {
      $(from).on('click', 'button', function(e) {
        const $el = $(e.target).parent();
        const index = +$el.data('index');
        const indices = $('li', to).get().map(n => +n.dataset.index);
    
        if (index < indices[0] || !indices.length) {
          $(to).prepend($el);
        } else if (index > indices[indices.length - 1]) {
          $(to).append($el);
        } else {
          $(`${to} [data-index="${indices.filter(n => n < index).pop()}"]`).after($el);
        }
      });
    }
    
    transfer('#parent1', '#parent2');
    transfer('#parent2', '#parent1');
    Ответ написан
    4 комментария
  • Какая лучшая практика для фильтрации данных по нескольким значениям?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Как-то уж очень громоздко выглядит. Если я правильно понял, то то, что вам нужно, делается куда проще:

    const filterItems = () => items.filter(n => state[n.size]);
    Ответ написан
    Комментировать
  • Переключение между двумя атрибутами?

    0xD34F
    @0xD34F Куратор тега JavaScript
    this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'false');
    Ответ написан
  • Как добавить текст элементу в цикле?

    0xD34F
    @0xD34F Куратор тега JavaScript
    А смысл? Не лучше ли сначала сгенерировать весь текст, а потом его вставить - один раз? Типа так:

    $('#out').text([...Array(10).keys()].join(', '));
    Ответ написан
    2 комментария
  • Как заменить сиволы в тексте, используя JS?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const replaceTime = (str, newTime) => str.replace(/\d\d:\d\d(P|A)M/g, newTime);
    Ответ написан
    Комментировать
  • Как увеличить число внутри строки?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const ul = document.querySelector('ul');
    
    document.querySelector('a').addEventListener('click', () => {
      const id = ul.lastElementChild.id.replace(/\d+$/, m => +m + 1);
      ul.insertAdjacentHTML('beforeend', `<li id="${id}"></li>`);
    });
    Ответ написан
    Комментировать
  • PixyJs. Почему у объекта Graphics x и y =0?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Почему? Ну, наверное, потому что это дефолтное значение. Хотите, чтобы был не 0 - вместо рисования прямоугольников чёрт знает где делайте соответствующую трансформацию, а сам прямоугольник рисуйте в (0, 0). Т.е., вместо

    rectangle.drawRect(cur_x,cur_y,seg_size,seg_size);

    будет

    rectangle.drawRect(0, 0, seg_size, seg_size);
    rectangle.setTransform(cur_x, cur_y);
    Ответ написан
    Комментировать
  • Как в Jq найти input который идет после select, но они в разных блоках?

    0xD34F
    @0xD34F Куратор тега JavaScript
    $(this).parent().next().find('input').prop('disabled', this.value === 'No');
    Ответ написан
    1 комментарий