Ответы пользователя по тегу JavaScript
  • Как в JS сложить два числа, прописать их в классе?

    @dimoff66
    Кратко о себе: Я есть
    Потому что
    а) Зачем вы вызываете super() если у вас нет родительского класса? В этом нет смысла.
    б) Посмотрите внимательно на
    this.second = document.getElementById('inp_2').value;//второе число

    Ничего в ней не смущает?
    в) this.button.onclick = evaluate

    переменная evaluate не определена, а если хотите присвоить функцию класса, то обращайтесь к ней через this
    Ответ написан
  • Как правильно сравнить десятичные числа в JS?

    @dimoff66
    Кратко о себе: Я есть
    Определяем количество знаков после запятой и разницу между числами умножаем
    и округляем до целого (все эти операции, чтобы избавиться от js-ных неточностей)
    Если целое не больше единицы, значит равно.

    Если количество знаков после запятой определяется по первому переданному числу, то код следующий

    const compare= (v, v2) => {
       const parts = String(v).split('.')
       const pow = parts.length > 1 ? parts.pop().length : 0     
       return Math.round(Math.abs(v - v2) * Math.pow(10, pow)) <= 1
    }
    
    console.log(compare(7.98, 7.99)) // true
    console.log(compare(7.98, 7.97)) // true
    console.log(compare(7.98, 8)) // false
    console.log(compare(0.1, 0.15)) // true


    если по числу с наибольшим количеством знаков после запятой, то такой

    const compare= (v, v2) => {
       const parts = [v, v2].map(v => String(v).split('.'))
       const pow = Math.max(...parts.map(v => v.length > 1 ? v.pop().length : 0))
       return Math.round(Math.abs(v - v2) * Math.pow(10, pow)) <= 1
    }
    
    console.log(compare(7.98, 7.99)) // true
    console.log(compare(7.98, 7.97)) // true
    console.log(compare(7.98, 8)) // false
    console.log(compare(0.1, 0.15)) // false
    Ответ написан
    4 комментария
  • Как получить всех родителя и родителей родителя?

    @dimoff66
    Кратко о себе: Я есть
    function convertToTree (elems, idField, parentIdField) {
        const tree = []
        const elemsMap = {}
    
        elems.forEach(item => { 
          elemsMap[item[idField]] = {
            ...item, 
            parent: null, 
            children: [] 
          } 
        })
    
        for(let id in elemsMap) {
          const item = elemsMap[id]
          if (!item[parentIdField]) {
            tree.push(item)
          } else {
            const parent = elemsMap[item[parentIdField]]
            parent.children.push(item)
            item.parent = parent
          }
        }
        
        return tree
      }
    
    const tree = convertToTree(yourArray, 'structureId', 'parentId')
    Ответ написан
    Комментировать
  • Как отфильтровать по инпутам-чекбоксам массив элементов с помощью метода filter?

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

    var arr = [
    	{ country: 'Italy', capital: "rome"},
      { country: 'usa', capital: 'Washington'},
      { country: 'france', capital: 'Paris'},
      { country: 'spain', capital: 'Madrid'},
    ]
    
    const onClick = () => {
    	const countriesChecked = Array.from(document.querySelectorAll('.btn') )
        .filter(item => item.checked)
        .map(item => item.value)
        
      const cities = arr
      	.filter(elem => countriesChecked.includes(elem.country))
        .map(elem => elem.capital)  
        
        alert(cities)
    }
    
    [...document.querySelectorAll('.btn')].forEach(item => {
    	item.addEventListener('click', onClick)
    })
    Ответ написан
    7 комментариев
  • Выборка товаров в диапазоне цен с галочками акции?

    @dimoff66
    Кратко о себе: Я есть
    Проверьте скобки в данной конструкции
    visible (elem, checkPrice(min, max, res)) && (elem, checkSale(elem))
    Ответ написан
  • Не понимаю условия условия задачи. Что необходимо сделать?

    @dimoff66
    Кратко о себе: Я есть
    module.exports = function (start, end, fetchFlights) {
        let fetchPromise, route
        
        const routes = [[start]]
        const last = arr => arr[arr.length - 1]
    
        // функция обработки ответа
        const responseExecution = response => {
          let result
          // Если респонс включает конечную точку, 
          // то составляем маршрут из последних элементов routes
          if (response.includes(end)) {
            route = [...routes.map(list => last(list)), end]
          } else if (response.length) {
            // если респонс содержит города, добавляем его в конец списка
            routes.push(response)
          } else { // если массив пустой
            // если это был последний город на текущем уровне графа
            // удаляем весь уровень и т.д. в цикле
            while (routes.length && last(routes).length === 1) {
              routes.pop()
            }
            // если массив routes опустел, значит вариантов нет
            if (!routes.length) {
              route = 'no way'
            } else { // удаляем последний город последнего уровня
              last(routes).pop()
            }
          }
    
          // если маршрут еще не определен, добавляем then и запрашиваем
          // полеты для последнего города последнего уровня
          if (!route) {
            fetchPromise = fetchPromise.then(responseExecution)
            return fetchFlights(last(last(routes)))
          }
        }
    
        // стартуем промис получения полетов
        fetchPromise = fetchFlights(start).then(responseExecution)
    
        // Возвращаем промис, в котором запускаем интервал и резолвим,
        // когда route не пустой
        return new Promise((resolve, reject) => {
          const id = setInterval(() => {
            if (route) {
              clearInterval(id)
              resolve(route)
            }
          }, 1000)
        })
      }


    fetchFlights для проверки

    const fetchFlights = city => {
        const flights = [
          ['A', 'B'],
          ['A', 'C'],
          ['A', 'D'],
          ['D', 'K'],
          ['D', 'L'],
          ['D', 'M'],
          ['M', 'Q'],
          ['M', 'Z'],
          ['L', 'G'],
          ['L', 'F'],
          ['F', 'Y']
        ]
    
        return Promise.resolve(flights.filter(item => item[0] === city).map(item => item[1]))
      }
    Ответ написан
  • Почему не работает код с циклом forEach?

    @dimoff66
    Кратко о себе: Я есть
    Array.from(images).forEach

    так как Images - HTML коллекция, а не массив, а у HTML коллекций нет метода forEach
    Ответ написан
    Комментировать
  • Как добавить пробел (между тысячами) в строке input?

    @dimoff66
    Кратко о себе: Я есть
    1) Перед проверкой паттерна тоже удалите из него пробел, будет давать ввести больше 4 цифр
    if (!(value..replace(/\s/g, '').match(pattern))

    onkeyup перепишите в виде
    document.getElementById('input').onkeyup = function() {
      val_input = document.getElementById('input').value;
      val_input = val_input.replace(/\s/g, '');
    
      if (!val_input) return;
      var hasDotAtTheEnd = val_input.endsWith('.');
      
      val_input = Number.parseFloat(val_input)
      if (isNaN(val_input)) return  
      
      document.getElementById('input').value = val_input.toLocaleString('ru').replace(',', '.') + (hasDotAtTheEnd ? '.' : '');
    }
    Ответ написан
  • Как не отображать таблицу если в ней нет столбцов на JQuery или JS?

    @dimoff66
    Кратко о себе: Я есть
    Поставить этот код в тэг "script" перед закрывающим тэгом body

    const table = document.querySelector("#news")
    if (!table.querySelector("tbody tr")) {
      table.style.display = "none"
    } else {
      table.style.display = ""
    }
    Ответ написан
    Комментировать
  • Как организовать MVC на клиенте?

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

    Другое дело, что если на клиенте с ней сотворяется CRUD и при сотворении CRUD-а применяется какая-то логика, то да, появляются модель и контроллер. (например список работников, который выводится, создается новый работник и редактируются существующие)
    Ответ написан
    Комментировать
  • Как заменить цвет фона блока по нажатию на него?

    @dimoff66
    Кратко о себе: Я есть
    const blocks = document.querySelectorAll('.block')
    const colors = ['grey', 'red', 'green', 'transparent']
    
    blocks.forEach((el, ind) => {
      el.addEventListener('click', () => {
        let currentColor = el.dataset.colorIndex
        if (isNaN(currentColor)) currentColor = -1
    
        let nextColor = 1 + Number(currentColor)
        if (nextColor === colors.length) nextColor = 0
        el.dataset.colorIndex = nextColor
    
        el.style.background = colors[nextColor]
    })
    Ответ написан
  • Оценить простое задание на react?

    @dimoff66
    Кратко о себе: Я есть
    Filters также можно реорганизовать элегантней. Во-первых вывести все фильтры в цикле, чтобы не плодить кода

    const allFilters = [
      { id: 'all', title: 'Все' },
      { id: 'noStop', title: 'Без пересадок' },
      { id: 'oneStop', title: '1 пересадка' },
      // и т.д.
    ]
    
    return <div className="filters">
      <h3 className="filters__title"> Количество пересадок </h3>
      {allFilters.map(({id, title}) => (
        <div className="filters__item" key={id}>
          <input type="checkbox" id={id} hidden
                 defaultChecked={props.sortStops[id]}
          />
          <label htmlFor={id} onClick={() => props.onClick(id)}>
            {title}
          </label>
        </div>)
      )}
    </div>


    Во вторых обратите внимание вместо
    onClick={props.onClick}

    можно сразу передать id в функцию-обработчик, а не выковыривать ее через e.target
    onClick={() => props.onClick(id)}

    И обработчик нажатия тогда будет выглядеть
    const onClickStops = chosenOption => {
      // обработчик нажатия на фильтры выбора количества остановок
      setSortStops({
        ...sortStops,
        chosenOption: !sortStops[chosenOption]
      })
    }
    Ответ написан
    Комментировать
  • Что здесь изменить чтобы работало закрытие окна при клике на любое пустое место на странице?

    @dimoff66
    Кратко о себе: Я есть
    var changeBoxVisibility = show => {
    	 box.style.display = show ? 'block' : 'none'	
    }
    
    var showBox = () => changeBoxVisibility(true)
    var hideBox = () => changeBoxVisibility(false)
    
    var open = document.querySelector("#open");
    var close = document.querySelector(".close");
    
    open.onclick = showBox
    close.onclick = hideBox
    
    Array.from([open, box]).forEach(el => {
    	el.addEventListener('click', e => e.stopPropagation())	
    })
    
    document.addEventListener('click', hideBox)
    Ответ написан
    3 комментария
  • Что такое коллекция в JavaScript?

    @dimoff66
    Кратко о себе: Я есть
    Можно. По сути любой итерируемый объект, хранящий множество элементов, будь то массив, объект со свойствами или Set является коллекцией, хотя именно в джава скрипт такое понятие почти не используется, кроме как в типе объектов, возвращаемых методами наподобие getElementsByClassname, возвращающего итерируемый объект с типом HTMLCollection
    Ответ написан
    Комментировать
  • Ответьте, пожалуйста, на вопросы по ES6?

    @dimoff66
    Кратко о себе: Я есть
    1. Да, кроме того, что var использовать просто незачем.

    2. const на реальном примере - любая переменная, которая не будет менять своего значения.

    const date1 = '01/02/2019'
    const date2 = '07/02/2019
    const params = { dateFrom, dateTo )
    const diff = getDatesDiff(date1, date2)
    return diff


    3. Да, почти весь es6 это синтаксический сахар, чтобы код выглядел яснее, логичнее и писать его было проще и приятнее. Это убыстряет разработку и делает js полноценным современным языком, а не скриптовой недоделкой.

    4. Стрелочные функции запоминают контекст в котором они создаются, для обычных функций, если они используются вне модуля где созданы, контекст придется указывать явно. То есть у стрелочных функций нет своего this, у обычных есть.

    5. -

    6.
    Зачем это нужно, если я могу написать так
    let user = 'Кевин';
    console.log('Привет' user!); // Привет, Кевин!


    Вы можете написать как угодно, но этот код даже не скомпилируется. Вы видимо не знаете основ синтаксиса Js

    7.
    Может пару советов от вас, что действительно нужно знать из es6, если уровень js не очень высокий?


    Знать вообще ничего не надо, надо понимать как это работает. Если нет понимания по поводу всех моментов js, то думать о es6 смысла нет
    Ответ написан
    Комментировать
  • Как Сделать из скрипта строку?

    @dimoff66
    Кратко о себе: Я есть
    Так скопируйте сюда любую строку, на которую жалуется интерпретатор. Скорее всего ругается на обратные слэши, их надо перед записью экранировать, то есть сделать replace('\\', '\\\\')
    Ответ написан
    Комментировать
  • React + redux какую структуру стейта выбрать для формы и компонента?

    @dimoff66
    Кратко о себе: Я есть
    const initialState = {
      isLoading: false,
      errorMessage: ""
    };

    Этого достаточно, чтобы рассчитать isSuccess и isError
    Ответ написан
    3 комментария
  • Использование операторов rest/spread и деструктуризации при передачи параметров в функцию?

    @dimoff66
    Кратко о себе: Я есть
    const { path, file, data } = Object.assign(options, defaultOptions, options)
    const format = Object.assign({space: '; '}, defaultOptions.format, options.format)


    Также можно подключить библиотеку lodash И использовать функцию merge
    https://lodash.com/docs/4.17.11#merge

    UPD Если предпочитаете деструктуризацию и не нравится упомянутый код, то вместо
    options||{}

    в параметрах функции сделайте значение по умолчанию
    anyFunc(options = {}){
    Ответ написан
    6 комментариев
  • Как на основе одной функции сделать другую?

    @dimoff66
    Кратко о себе: Я есть
    let func1Body = func1.toString(); 
    func1Body = func1Body.slice(func1Body.indexOf("{") + 1, func1Body.lastIndexOf("}"));
    
    const func2 = new function('', func1Body.replace('return', 
    "var c = a + ',' + b;  console.log(c);" + "return"));
    Ответ написан
    Комментировать
  • Как проверить, какой option выбран в select?

    @dimoff66
    Кратко о себе: Я есть
    <select onchange='findOption(this)'>
       <option value='one'>1</option>
       <option value='two'>2</option>
       <option value='three'>3</option>
    </select>

    function findOption(select) {
       const option = select.querySelector(`option[value="${select.value}"]`)
       // Действия над option
    }
    Ответ написан
    Комментировать