Ответы пользователя по тегу JavaScript
  • Как проверить есть ли слово в строке?

    @dimoff66
    Кратко о себе: Я есть
    const check = (str, word) => 
      str.split(word).slice(1).some(v => !v || (v[0] >= 'А' && v[0] <= 'Я'))
       
    console.log(check('МоскваПитерВоронеж', 'Питер')) //true
    console.log(check('МоскваПитерВоронеж', 'Пите')) // false
    console.log(check('МоскваПитер-3Воронеж', 'Питер')) // false
    Ответ написан
    3 комментария
  • Как заставить fetch js делать несколько попыток запросов при получении ошибки?

    @dimoff66
    Кратко о себе: Я есть
    Второй параметр then - функция при ошибке, передаете в нее ссылку на функцию вызова фетча. Приблизительно так

    const fetchData = () => {
      fetch(url).then(
       response = > { 
         // код при успешном ответе
       }, fetchData)
    }
    
    fetchData()
    Ответ написан
    Комментировать
  • Как передать событие другому елементу?

    @dimoff66
    Кратко о себе: Я есть
    Здесь несколько моментов

    1) Вам нужно создать новый event, старый уже сдиспатчился и не может быть использован для другого элемента

    document.getElementById("target").dispatchEvent(new Event('keydown', { which: event.which }));


    Теперь евент будет срабатывать.

    2) Если вы хотите чтобы не просто срабатывало событие, а менялся текст, вам придется временно перевести фокус на target и установить курсор в конец текста

    const target = document.getElementById("target")
    target.focus()
    target.selectionStart = target.innerText.length
    target.dispatchEvent(
          new Event('keydown', { which: event.which })

    )

    Но разумнее просто самому менять текст таргета, добавляя полученный символ в конец свойства innerText

    target.innerText += event.key

    а не генерировать событие
    Ответ написан
    Комментировать
  • Как передать 2 массива в 2 переменные из json fetch?

    @dimoff66
    Кратко о себе: Я есть
    Promise
      .all(urls.map(url => fetch(url).then(response => status(response))))
      .then(data => data.map(v => v.json()))
      .then(data => Promise.all(data))
      .then(data => Arrays(...data))
      .catch(err => console.error(err));
    Ответ написан
    3 комментария
  • Где JavaScript работает быстрее: в браузере или в NodeJS?

    @dimoff66
    Кратко о себе: Я есть
    Браузеры разные. Работают на разных девайсах с разными техническими характеристиками, посему вопрос не имеет никакого смысла без конкретизации какой браузер имеется ввиду и на каком устройстве будет запускаться.

    Также не очень понятно выражение "сложные математические расчеты". Что имеется ввиду под "сложностью"? Они долго выполняются? Занимают много оперативки? Как часто они выполняются?
    Ответ написан
    2 комментария
  • Как по нажатой кнопке идентифицировать строку в таблице?

    @dimoff66
    Кратко о себе: Я есть
    По свойству parentElement
    Ответ написан
    Комментировать
  • Как проверить наличие метода в классе?

    @dimoff66
    Кратко о себе: Я есть
    В этом и смысл названия hasOwnProperty, что проверяется наличие свойства среди собственных свойств объекта, игнорируя объекты, от которых он наследован.

    class MyClass {
       method1 () { alert(1) }
       method2 () { alert(2) }
    }
    
    const obj = new MyClass
    obj.method3 = () => { alert(3) }
    
    console.log(obj.hasOwnProperty('method2')) 
    // false, потому что это свойство родителя, не собственное
    
    console.log(obj.hasOwnProperty('method3')) 
    // true, потому что это свойство не унаследовано а добавлено непосредственно к объекту
    
    console.log(Boolean(obj.__proto__.method2)) 
    // true, проверяется в наследованном от непосредственного родителя прототипе
    
    console.log(Boolean(obj.method2)) 
    // true, проверяется во всей цепочке прототипов, при длинной цепочке наследования может быть неоправданно затратной операцией
    Ответ написан
    2 комментария
  • Как отразить таблицу?

    @dimoff66
    Кратко о себе: Я есть
    st = (j + 1 > n2 - i)

    По хорошему код должен выглядеть так

    const length = 10
    const arr = Array.from({ length })
    document.write(`<table>
       ${arr.map((_, i) => `<tr>
          ${arr.map((_, j) => `<td class="${j < length - i - 2 ? 'r3' : 'r4'}">
          </td>`).join('')}
       </tr>
       `).join('')}
    </table>
    `)
    Ответ написан
  • Включение двух элементов одновременно?

    @dimoff66
    Кратко о себе: Я есть
    1)
    var img = document.getElementById('rotateImg');
    var img = document.getElementById('rotateImg2');


    Этот код не имеет смысла, второй строчкой вы перезаписываете первую. Измените второе присвоение на img2 =, и соответственно поправьте код функции rotate

    (И научитесь const вместо var, чтобы в подобных случаях получать ошибку от js компилятора)

    2) Создайте keyframes rotate2 с обратным вращением от 360deg до 0deg И укажите его в animation для rotateImg2
    Ответ написан
    2 комментария
  • Как проверять regexp?

    @dimoff66
    Кратко о себе: Я есть
    Когда мне надо написать regexp я захожу на regex101


    Когда мне надо написать regexp я читаю справочник по регулярным выражениям, ну например такой вот упрощенный и составляю регулярное выражение, а ПОТОМ УЖЕ могу пойти на regex101 или другую песочницу, дабы быстро проверить его на работоспособность для различных возможных строк.
    Ответ написан
    Комментировать
  • Как правильно выводить в state ответ от сервера react?

    @dimoff66
    Кратко о себе: Я есть
    Да. Все что влияет на отрисовку компонента и меняет значение за время жизненного цикла, должно быть внутри стейт
    Ответ написан
    Комментировать
  • Работа с substring. Как изменить текст внутри string?

    @dimoff66
    Кратко о себе: Я есть
    Вариант с поиском строковыми функциями

    function replaceSubstring(string, words, substring) {
      // Получаем слова между которыми искать замену
      const [word1, word2] = words.split(' ')
    
      // Находим индексы этих слов
      const [pos1, pos2] = [string.indexOf(word1), string.indexOf(word2)]
      if (pos1 < 0 || pos1 + word1.length >= pos2) return string 
    
      // Добавляем пробелы в строку замены, если отсутствуют
      if (!substring.startsWith(' ')) substring = ' ' + substring
      if (!substring.endsWith(' ')) substring += ' '
    
      // Возвращаем новую стрроку с итерационным вызовом, так как могут быть и другие вхождения
      return string.substring(0, pos1 + word1.length) + 
        substring + 
        word2 +
        replaceSubstring(string.substring(pos2 + word2.length), words, substring)  
    }


    Вариант с поиском через регулярные выражения

    function replaceSubstring2(string, words, substring) {
      if (!substring.startsWith(' ')) substring = ' ' + substring
      if (!substring.endsWith(' ')) substring += ' '
    
      const regex = words.replace(' ', '.+?')
      return string.replaceAll(new RegExp(regex, 'g'), words.replace(' ', substring))
    }
    Ответ написан
    Комментировать
  • Как понять что ты знаешь javascript и готов приступить к изучению фреймворков?

    @dimoff66
    Кратко о себе: Я есть
    Один мальчик не зная javascriipt-а приступил к фреймворкам, нашел себе работу, дорос до тимлида, создал свои курсы, так и не поняв, что он не знал javascript и совершенно не был готов к изучению фреймворка. А время то не вернешь.

    PS Если говорить серьезно, то доказательство существования пудинга в его вкусе. Если пишете работающий код на js - значит знаете на уровне, достаточном для фреймворка. Процесс познания почти бесконечен. Поэтому какой-то точки, где можете сказать "Да, теперь я знаю" не существует. просто получайте удовольствие от изучения и программирования и не парьтесь знаете вы что-то или нет.
    Ответ написан
    Комментировать
  • Какие проекты JavaScript отлично иметь в своём портфолио?

    @dimoff66
    Кратко о себе: Я есть
    Можно React или другое SPA выучить в качестве дополнения к своему резюме и для собственного развития и уже на них делать небольшие проекты, демонстрирующие навыки.
    Ответ написан
    Комментировать
  • Следующее наименьшее число. Как упростить нахождение второго индекса?

    @dimoff66
    Кратко о себе: Я есть
    Ну естественно. По логике нахождения первого числа можно понять, что все числа после него идут в порядке возрастания, поэтому из реверса находите индекс первого числа которое меньше forv[idx1] и все. Естественно с экранированием на нормальный порядок.

    По той же причине после перестановки сортировка чисел в обратном порядке не требуется, достаточно реверса.

    К тому же forv тут вообще не нужен, достаточно rev

    function nextSmaller(n){
      const rev = [...`${n}`].map(Number).reverse()
      const idx1 = rev.findIndex((v, i, a) => i && a[i-1] < v)
    
      if (idx1 < 0) return idx1
    
      const idx2 = rev.slice(0, idx1).findIndex(v => v < rev[idx1])
      if (idx2 < 0) return idx2;
    
      [rev[idx1], rev[idx2]] = [rev[idx2], rev[idx1]]
       
      const nn = +rev.slice(idx1).reverse().concat(rev.slice(0, idx1)).join('')
      return nn
    }
      
    console.log(nextSmaller(133232766512347)) //133232766475321
    Ответ написан
    2 комментария
  • Как сортировать с приоритетом массив?

    @dimoff66
    Кратко о себе: Я есть
    С гибкими правилами

    function getSortBy(arr, rules = ['10', '110', 220]) {
      const groupedMap = arr.reduce((agg, v) => {
        if (!agg[v.groupId]) agg[v.groupId] = []
        agg[v.groupId].push(v)
        return agg
      }, {})
    
      const groups = Object
        .values(groupedMap)
        .map(arr => arr.sort((a, b) => b.source - a.source))
    
      const indexedGroups =
        groups
          .map(arr => ({ 
            arr, 
            sortIndex: (rules.indexOf(arr.map(v => v.source).join('')) + 1) || 1000
          }))
    
      const sortedGroups =
        indexedGroups.sort((a, b) => a.sortIndex - b.sortIndex)
    
      const firstGroup = sortedGroups[0].arr
      const element = firstGroup.find(v => v.source === 0)
    
      return element
    }
    
    const arr = [
      {id: 1, groupId: 100, source: 1},
     {id: 2, groupId: 100, source: 2},
     {id: 3, groupId: 100, source: 1},
     {id: 4, groupId: 200, source: 1},
     {id: 5, groupId: 200, source: 0},
     {id: 6, groupId: 300, source: 1},
     {id: 7, groupId: 300, source: 0},
     {id: 8, groupId: 300, source: 1},
     {id: 9, groupId: 400, source: 1},
     {id: 10, groupId: 400, source: 0},
     {id: 11, groupId: 400, source: 0},
     {id: 12, groupId: 500, source: 2},
     {id: 13, groupId: 500, source: 1},
    ];
    
    console.log(getSortBy(arr))  // { groupId: 200, id: 5, source: 0 }
    
    const arr2 = [
       {id: 1, groupId: 100, source: 1},
      {id: 2, groupId: 100, source: 2},
      {id: 3, groupId: 100, source: 1},
      {id: 4, groupId: 200, source: 1},
      {id: 5, groupId: 200, source: 2},
      {id: 6, groupId: 300, source: 1},
      {id: 7, groupId: 300, source: 0},
      {id: 8, groupId: 300, source: 1},
      {id: 9, groupId: 400, source: 1},
      {id: 10, groupId: 400, source: 2},
      {id: 11, groupId: 400, source: 2},
      {id: 12, groupId: 500, source: 2},
      {id: 13, groupId: 500, source: 1},
    ];
    
    console.log(getSortBy(arr2)) // { groupId: 300, id: 7, source: 0 }
    Ответ написан
    3 комментария
  • Как извлечь объекты из массива в новый объект?

    @dimoff66
    Кратко о себе: Я есть
    let customKeys 
    const items = Array.from(['custom', 'default']).flatMap(group => {
      const scope = group + "Data"
    
      // Собираем элементы группы
      const items = (data[group] || []).flatMap(({ id, links }) => 
        links.map(link => ({...link, id, scope }))
      )
    
      const getKey = v => JSON.stringify([v.id, v.number])
    
      if (!customKeys) {
        // индексируем ключи кастомных элементов
        customKeys = items.reduce((agg, v) => 
          Object.assign(agg, {[getKey(v)]: v})
        , {})
    
        return items 
      } else {
        // Для ключей, найденных ранее, устанавливаем родителя и отфильтровываем
        const defaultIds = []
        const defaultItems = items.filter(v => {
          const child = customKeys[getKey(v)]
          if (child) {
            child.parent = v 
            defaultIds.push(v.id)
          } else {
            return true
          }    
        })
    
        // Оставляем в data.default лишь элементы с id, не найденные в custom
        if (defaultIds.length) {
          const idsSet = new Set(defaultIds)
          const copy = [...data.default]
          data.default.length = 0 
          data.default.push(...copy.filter(v => !idsSet.has(v.id)))
        }
    
        return defaultItems
      }
    })
    
    console.log(data) // Дата без кастомных ключей в дефолт скоуп
    console.log(items) // Результат
    Ответ написан
    1 комментарий
  • Какой алгоритм выбрать?

    @dimoff66
    Кратко о себе: Я есть
    const data = [
       "Пн 02:15 - Пн 07:40", 
       "Пн 04:20 - Пн 06:00", 
       "Пн 06:30 - Пн 09:15", 
       "Пн 09:50 - Пн 15:00", 
       "Пн 17:00 - Вт 23:20"];
    
    const weekDays = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"]
    
    const periods = data
      .map(v => 
           v
             .split(" - ")
             .map(v => 
              String(weekDays.indexOf(v.substring(0, 2))) + 
              v.substring(2)
            )
       )
      .sort((a, b) => {
        if (a[0] < b[0]) return -1 
        if (a[0] > b[0]) return 1
        return 0
      })
     .concat([["6 23:59", ""]]) 
    
    const freePeriods = periods.reduce((agg, period) => {
      if (period[0] > agg.lastOccupied) agg.freePeriods.push([agg.lastOccupied, period[0]])
      if (agg.lastOccupied < period[1]) agg.lastOccupied = period[1]
      return agg
    }, { freePeriods: [], lastOccupied: "0 00:00"} )
    .freePeriods 
    .map(v => 
         v.map(v => weekDays[v[0]] + v.substring(1)).join(" - ")
        ) 
    
    console.log(freePeriods) // ["Пн 00:00 - Пн 02:15", "Пн 09:15 - Пн 09:50", "Пн 15:00 - Пн 17:00", "Вт 23:20 - Вс 23:59"]
    Ответ написан
  • Почему массив глобальной переменной стал пустым вне функции?

    @dimoff66
    Кратко о себе: Я есть
    Потому что вы заполняете его внутри callback-а, который на момент вывода console.log(arrName)
    еще не был вызван.
    Поставьте вывод после строчки
    arrName.push(array_2);

    чтобы убедиться, что сначала выводится пустой массив, а потом уже он начинает заполняться
    Ответ написан
    Комментировать
  • Так что такое асинхронность?

    @dimoff66
    Кратко о себе: Я есть
    Как синхронный однопоточный язык вообще может асинхронно выполнять задачи ?


    В реальности он выполняет их поочередно, просто т.н. асинхронные операции, например промисы, выполняются не в общей очередности написанного кода, а ставятся в общую очередь и выполняются после того как выполнены синхронные операции.

    Например
    function fetchMe() {
      fetch("/api/get").then(response => console.log("Сервер ответил " + response))
      console.log("Ждем ответа сервера")
    }


    Первая строчка асинхронная, она не выполняется сразу а ставится в очередь. Вторая строчка выполняется сразу.

    То что делает fetch - просто регулярно проверяет(в порядке общей очереди событий) ответил ли сервер и когда сервер ответил - выполняется код в then. Причем поскольку js синхронный, то если перед получением ответа сервера будет какая-то затратная операция, fetch будет терпеливо ждать и ответ вы получите не тогда, когда он реально пришел, а когда выполняемая функцией fetch периодическая проверка дождется своей очереди. Это и есть асинхронность в js.
    Ответ написан
    Комментировать