Задать вопрос
Ответы пользователя по тегу JavaScript
  • Что лучше использовать elem.firstChild.nodeValue, или elem.innerHtml или elem.textContent???

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    elem.innerHTML при установке значения отрендерит строку как html код, предыдущее содержимое элемента будет удалено, не работает на текстовых нодах и нодах комментария
    elem.innerText при установке значения заменит содержимое строкой, как текстом, спецсимволы выведутся корректно, не работает на текстовых нодах и нодах комментария
    2 этих свойства нестандартные, но поддерживаются всеми браузерами
    elem.textContent установит содержимое любой ноды (неуверен насчет ноды документа), при установке работает как innerText, различия есть при чтении
    elem.firstChild.nodeValue устанавливает текстовое содержимое только для текстовых нод, нод комментария и нод CDATA, не будет иметь эффекта, если первая нода другого типа, не затронит остальные дочерние ноды, выкинет ошибку, если элемент пустой (т.к. elem.firstChild будет null)
    Ответ написан
    Комментировать
  • Как найти значение обекта зная ключ, который храниться в строке?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    function getValueFromKey(key, obj) {
      const keys = key.split('.');
      let curObj = obj;
      for(let k of keys) {
        if(typeof curObj !== 'object') { return; }
        curObj = curObj[k];
      }
      return curObj;
    }
    Ответ написан
    Комментировать
  • Как разобрать объект?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    2 рабочих решения уже предложены c O(3n) и O(2n), но для сторонников оптимизации решение с O(n):
    const checkedValues = Object.getOwnPropertyNames(checkboxGroup).reduce((result, key) => {
      const {checked, value} = checkboxGroup[key];
      if(checked) {
        result.push(value);
      }
      return result;
    }, []);
    Ответ написан
    3 комментария
  • Полезно ли изучать React/Redux, если хочешь работать с VueJS?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Начать следует с JS и встроенного в браузер api
    Фреймворк/библиотека - лишь инструмент, который лишь решает определенный круг массовых задач. Без знания основ, настанет момент, когда у библиотеки не будет готового решения/плагина - и Ваша работа встанет из-за этого.
    Имея же хотя бы базовые принципы, как библиотека/фреймворк работают внутри, изучить его станет гораздо более простым делом.

    По сабжу:
    Зная React+Redux освоить Vue+Vuex - дело 2-3 дней
    Работая с Vue возвращаться на React уже не хочется
    Выводы делайте сами
    Ответ написан
    2 комментария
  • History API вернуться назад?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    В обработчике события popstate нужно восстанавливать состояние приложения
    Для этого и существует объект состояния, передаваемый первым аргументом в history.pushState и передаваемый в событие
    Так же полезно сохранить начальное состояние при загрузке страницы через history.replaceState
    Ответ написан
  • Как пушить несколько рандомных чисел кроме одного?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    допустим что уже есть в переменной currentID текущий айдишник, который надо пропустить, притом приведенный к числу, тогда найти случайное целое от 0 до 8 кроме currentID можно так:
    var newID;
    do {
      newID = Math.floor(Math.random() * 9);
    } while(currentID === newID)
    Ответ написан
    Комментировать
  • Какой самый адекватный вариант инкапсуляции в JS?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    1. Просто переменные в замыкании, как в Вашем примере. Из плюсов - работает везде, из минусов - переменные общие для всех инстансов
    2. Просто соглашение, что определенные имена считать приватными и не трогать, общепринятым таким соглашением являются имена начинающиеся с подчеркивания _ - работает везде, но по факту ничего не делает, все на совести кодера
    3. Поля символы (Symbol()) - нужен es2015+, по факту тоже не совсем приватные, из вне к ним можно доступ получить если есть доступ к символу (или сами его отдадите, или есть возможность получить все символы объекта), но уникальность символа дает достаточную приватность. Я лично предпочитаю именно этот вариант
    4. объект в WeakMap с текущим this в качестве ключа - es2015+, полная приватность, но достаточно громоздко, суть в том, что в конструкторе мы создаем новый объект для хранения приватных свойств и сохраняем его в WeakMap с ключом this, а там где нужно извлекаем по this
    Ответ написан
    3 комментария
  • Как функция получает доступ к себе при рекурсивном вызове?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    в текущей области видимости 'func' не объявлена

    как раз таки объявлена. В любой именованной функции ее имя создается в момент вызова (наравне с arguments и this) и ссылается на саму функцию. Наиболее наглядно это показывают именованные функциональные выражения:
    var f = function func() {
      console.log(func.name); // 'func'
    };
    console.log(f.name); // 'func'
    console.log(func.name); // Reference error так как func нет в этой области видимости
    Ответ написан
    Комментировать
  • Почему файлы не загружаются на сервер посредством AJAX?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Вы отдаете заголовок xhr.setRequestHeader('Content-Type', 'multipart/form-data')
    а отдаете просто файл
    Так понимаю на сервере php, так что буду основываться на этом, хоть и не помню его толком
    вариант 1: оборачивать файл в FormData и отправлять его, читаем про него тут https://developer.mozilla.org/ru/docs/Web/API/FormData
    вариант 2: если отдаем как есть, то читаем файл из php://input если передавать только файл, там будет только он
    Ответ написан
    Комментировать
  • Как сгруппировать объекты из массива по определенному полю объекта, используя метод Reduce?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    function groupByDate(arr) {
      //свертка массива во временный объект, с датами в качестве ключей
      const temp = arr.reduce((acc, elem) => {
        // делим строку по пробелу и извлекаем 0й элемент '2018-03-05 12:00' -> '2018-03-05'
        const date = elem.date.split(' ')[0];
        //если ключа-даты еще нет в объекте, записываем туда пустой массив
        if(!acc[date]) {
          acc[date] = [];
        }
        // ложим текущий элемент в соответствующий массив
        acc[date].push(elem);
        return acc;
      }, {});
      // извлекаем все ключи получившегося объекта в массив
      // и преобразуем массив ключей в массив значений
      return Object.getOwnPropertyNames(temp).map(k => temp[k]);
    }
    Ответ написан
    5 комментариев
  • Чем отличаются эти две записи?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    в 1 случае Вы сразу создали новый объект на основе прототипа AllElemetsParent и присвоили его в переменную CreateNewElement
    во 2 случае, вы присвоили свойству prototype объекта CreateNewElement ссылку на то что хранится в AllElemetsParent, если CreateNewElement - функция, то при вызове ее с оператором new будет создаваться новый объект на основе прототипа AllElemetsParent, он поступит в функцию как объект this и будет возвращен оператором new
    Ответ написан
    Комментировать
  • Как вызвать два setTimeout в цикле?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    function delay(t) {
      return new Promise(resolve => setTimeout(resolve, t));
    }
    //...
    clients.reduce((p, {person, city, sum}, i) => p.then(() => delay(10000 * (i + 1))).then(() => {
      //show code
    }).then(() => delay(15000 * (i + 1))).then(() => {
      //hide code
    }), Promise.resolve());
    Ответ написан
    Комментировать
  • Как написать функцию выбора и возврата рандомного цвета?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    function randColor() {
      var c = Math.floor(Math.random() * 0xffffff).toString(16);
      if(c.length < 6) {
        c = '0'.repeat(6 - c.length) + c;
      }
      return '#' + c;
    }
    Ответ написан
    Комментировать
  • Не работают свойства добавленного класса?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    в css перед is-active пропущена точка
    Ответ написан
    Комментировать
  • Что за ошибка "unexpected token: result"?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    В комментах нашли с топикстартером решение, в виде указания версии ecma линтеру:
    "parserOptions": {
            "ecmaVersion": 2015,
            "sourceType": "script"
    }
    Ответ написан
  • Как быть, если отключен javascript на клиенте?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Как показывает практика, юзеры с отключенным js денег через сайт не приносят, а следовательно тратить на них человекочасы просто не рационально с точки зрения бизнеса
    Посмотреть контент или предложение такой юзер вполне сможет за счет ssr, захочет пользоваться сервисами - js включит, онлайн покупки... ну... опять же как показывает практика, такие люди предпочитают сделать телефонный звонок, чем по кнопочкам тыкать
    Ответ написан
    Комментировать
  • Функция обработки ответов?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    server.use((req, res, next) => {
      res.sendError = function(type, code) {
        return this.send({status: 'error', type, code});
      };
      next();
    });
    
    server.get('/', (req, res, next) => {
      res.sendError('auth', 'no_login');
    });
    Ответ написан
    Комментировать
  • Можете объяснить пару строк кода?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    С первой строкой Вы разобрались правильно

    Во второй строке используется метод массива reduce, предназначенный для свертки массива
    Этот метод принимает 2 аргумента, функцию и инициализирующее значение, притом 2й аргумент не обязателен, если он отсутствует, то в качестве инициализирующего значения будет взят 0й элемент массива, а массив будет обрабатываться начиная с элемента с индексом 1.
    Важно! для пустого массива метод reduce просто вернет инициализирующее значение, а если оно опущено - выкинет ошибку. Но здесь это не критично, так как метод строки split никогда не вернет пустой массив, а метод массива map всегда вернет массив той же размерности, что и исходный.
    Функция переданная первым аргументом будет вызываться для каждого элемента массива, в нее передается 4 аргумента (в Вашем примере 2 последних опущены за ненадобностью):
    1. Результат предыдущего вычисления (или инициализирующее значение для первого вызова)
    2. Текущий элемент массива
    3. Индекс текущего элемента
    4. Исходный массив
    Функция должна вернуть результат вычисления для текущего элемента, последний результат будет возвращен методом reduce

    В третьей строке используется тернарный оператор, формат которого:
    <условие> ? <результат при истине условия> : <результат при лжи>
    То есть, если sum > 1 - в target запишем 0, иначе 1

    Метод массива indexOf производит поиск в массиве по точному совпадению (проверяет оператором ===) с переданным аргументом и возвращает индекс первого найденного элемента или -1 если ничего не нашел

    P.S. я бы решил так:
    function iqTest(numbers) {
      return numbers
        .split(' ')
        .map((v, i) => ({v: v % 2, i: i + 1}))
        .find(({v}, i, arr) => i !== 0 && v !== arr[i - 1].v)
        .i;
    }
    Ответ написан
    3 комментария
  • Можно ли NodeJs'ом заменить всю основную функциональность PHP, при этом работать с SQL?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Можно
    Ответ написан
    Комментировать