Ответы пользователя по тегу JavaScript
  • Javascript - как перевести объект в число?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    jQuery не нужна.
    Ответ написан
    Комментировать
  • Как работает этот код?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    В JavaScript любую функцию можно «класть в переменную», передавать аргументом в другую функцию – поступать с ней, как, например, с обычным числом или строкой.
    const f1 = function() {
      console.log("I am F 1");
    };
    
    const f2 = f1;
    f2(); // I am F 1

    Так и в этом примере: три функции передают как аргументы в основную.

    Логика кода в вопросе: сложить два числа.
    И вызвать одну из трёх функций, в зависимости от сравнения результата с числом 3.

    Бытовая аналогия: вам на стол поставили три телефона: красный, чёрный и зелёный. Каждый настроен звонить на какой-то свой фикс. номер. Вы не знаете, на какой именно. Но у вас инструкция: если число меньше 3, поднять трубку на красном аппарате. Если равно, то на чёрном. Если больше, то на зелёном.

    Вот упрощённый пример:
    function call_if_true(value, func) {
      if (value) {
        func();
      }
    }
    
    call_if_true(
      1,
      function() { console.log("It's true!"); }
    );
    Ответ написан
    Комментировать
  • Как сократить JS код?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно вытаскивать из input'ов атрибуты min и max,
    и на основе их значений делать и проверку и сообщение об ошибке:
    Ответ написан
    1 комментарий
  • Найти учеников с максимальной и минимальной средней оценкой?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    const students = [
      { name: 'One', marks: [8, 10, 7, 5, 4] },
      { name: 'Two', marks: [5, 2, 8, 5, 3] },
      { name: 'Three', marks: [6, 9, 3, 6, 7] },
      { name: 'Fore', marks: [1, 7, 8, 4, 10] },
      { name: 'Five', marks: [5, 8, 6, 9, 3] },
    ];
    
    const min = { student: null, avg: Number.POSITIVE_INFINITY };
    const max = { student: null, avg: Number.NEGATIVE_INFINITY };
    
    students.forEach(student => {
      const { marks } = student;
      const avg = marks.reduce((acc, c) => acc + c) / marks.length;
      if (avg > max.avg) {
        max.avg = avg;
        max.student = student;
      } else if (avg < min.avg) {
        min.avg = avg;
        min.student = student;
      }
    });
    
    console.log('Student with mininal average mark', min.student);
    console.log('Student with best average mark', max.student);
    Ответ написан
    Комментировать
  • Как сделать Якорь из GET запроса?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    смотреть, есть ли GET-параметр "news" (использовать для этого URL)
    и дописывать в location.hash соотв. хэш.

    Примерно так:
    const news = (new URL(document.location)).searchParams.get('news');
    if (news) document.location.hash = news;
    Ответ написан
    Комментировать
  • Как вывести квадраты чисел от 10 до 20?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    в цикле у вас меняется переменная step,
    но она нигде не используется.

    Попробуйте внутри цикла возводить в квадрат **2 очередное значение переменной step

    Хорошо бы в цикле использовать те же числа, что в задании: 10 и 20.
    for (let step = 10; step <= 20; step++)
    Ответ написан
    Комментировать
  • Почему два разных ответа?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Посмотрите на том же learn.javascript про погружение и всплытие событий.

    Вот песочница вашего вопроса:

    Если в первом кликать не на вложенном поле input, а сбоку от него, именно на div'е, то порядок событий такой же как во втором. Как вешали обработчики, в том же порядке отрабатывают: 1, 2.

    Если же кликнуть именно на поле ввода, которое вложено в div со слушателями, то 2-й сработает первым, ещё на фазе «погружения» события, т.к. у второго слушателя третьим аргументом true.
    Ответ написан
    5 комментариев
  • Как из массива целых чисел найти все возможные комбинации (не только двух чисел, а и более) дающие искомую сумму?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    задача NP-полная = нужен полный перебор всех возможных комбинаций

    Если числа точно неотрицательные, можно сразу исключить превосходящие искомую сумму.

    Разбор проблемы (на англ.)
    Ответ написан
    Комментировать
  • Работа с объектом и массивом?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    for (let key in objectEmployee) {
    что будет в key?

    objectEmployee.key['age']
    есть ли у objectEmployee свойство key? (нет)

    spoiler
    const filters = {
      age: v => v >= 25,
      education: v => v === 'higher',
      experience: v => v >= 1,
    };
    
    const employee = {};
    const defaultDescriptor = { writable: true, enumerable: true, configurable: true };
    Object.defineProperties(employee, {
      name: { ...defaultDescriptor, value: 'Dmitriy', writable: false },
      age: { ...defaultDescriptor, value: 21 },
      education: { ...defaultDescriptor, value: 'higher' },
      experience: { ...defaultDescriptor, value: 0 },
    });
    
    const hireNewEmployee = (employee, filters) => {
      const errors = [];
      Object.entries(filters).forEach(([name, func]) => {
        if (!func(employee[name])) {
          errors.push(name);
        }
      });
    
      return errors.length
        ? `Not hired: sorry we cannot hire you. Here is why: ${errors.join(', ')}`
        : 'You are Hired! Congrats!';
    };
    
    hireNewEmployee(employee, filters);
    // "Not hired: sorry we cannot hire you. Here is why: age, experience"
    Ответ написан
  • Почему axios не работает с AbortController?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    При остановке запроса Promise отреджектится,
    что в сахаре async..await равносильно throw

    Т.е. попадёт в блок catch.

    Ну и проверьте версию axios – поддержка AbortController там с v.0.22.0
    Ответ написан
    1 комментарий
  • Как понять какой элемент был нажат, без использования id и аттрибутов?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно слушать события клика выше в дереве, на общем родителе. Да хоть на document, как в примере.
    Это называется «делегирование событий» — мы поручаем обработку событий не каждой кнопке по отдельности, а общему предку.

    Из события клика сразу вытаскивать event.target – это кликнутый элемент.
    Проверять, кнопка ли это вообще, и есть ли нужный класс. Т.к. ловиться будут вообще все клики в документе.
    document.addEventListener('click', ({ target }) => {
      if (!target.classList.contains('button')) return; // не тот клик
      target.classList.toggle('active');
    });


    Ответ написан
    Комментировать
  • Работа с объектами?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Object.keys(obj) возвращает массив собственных итерируемых строковых свойств. Как раз то, что хочется пересчитать в задаче.
    Из названия функции "isEmpty" следует, что она возвращает Булево значение (true / false).

    const isEmpty = obj => Object.keys(obj).length <= 2;

    Использование:
    console.log( isEmpty({ a: "AAA" }) ? 'object is empty' : 'object is full of properties' );
    // выведет "object is empty"
    
    console.log( isEmpty({ a: "AAA", b: "BB", c: "C" }) ? 'object is empty' : 'object is full of properties' );
    // выведет "object is full of properties"
    Ответ написан
    2 комментария
  • Как с помощью js получить данные из переменной php?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Попросите изменить шаблон примерно так:
    <span class="animals" data-allowed="{{$cabin->HasAnimals}}">
      {{$cabin->HasAnimals?Translate::GetTranslation('Animals Allowed'):Translate::GetTranslation('Animals Not Allowed')}}
    </span>

    Так сможете найти этот span и взять из него
    const span = document.querySelector('span.animals');
    const isAnimalsAllowed = !!span.dataset.allowed;


    Сейчас в этот span бэк отрисовывает
    перевод на один из языков заготовленных фраз
    на один из случаев,
    и работать с ними не удобно, если вообще возможно.

    В целом, хорошо бы от бэка получить чистые данные, безо всяких оформлений в разметку и переводов.
    И заниматься отрисовкой целиком на фронте.
    Ответ написан
    3 комментария
  • Как метод массива sort, сортирует элементы массива?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Как устроена сортировка массивов (на англ.) в разных движках.

    Часто используется алгоритм "QuickSort" (быстрая сортировка).
    Ответ написан
    Комментировать
  • Что значит этот код в js?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    id – видимо, массив.
    id.length – длина массива. Например, для массива [7, 7, 7] длина 3.
    id.length - 1 – индекс последнего элемента в массиве. Индексы считаются от 0.

    Берется последний элемент массива id. И из него вытаскивают его свойство default.

    ` text ${ js_expression } ` почитайте про строки в обратных кавычках и интерполяцию выражений в них.
    const word = "мир";
    `Привет, ${ word }!` // "Привет, мир!"
    Ответ написан
  • Почему response.json( ) после fetch асинхронен?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Посмотрите, как выглядит «текстовый чат» по протоколу HTTP, когда клиент запрашивает у сервера что-то, и получает ответ.

    Примерная очерёдность:
    Код на клиенте вызывает fetch(). Устанавливается соединение, передаётся запрос «дай /api/method» и передаются заголовки, типа «готов принять json».

    Сервер обрабатывает, думает и «пишет в чат»:
    1) Строку со статусом HTTP/1.1 200 OK – мол, норм, ща всё будет.
    2) Несколько строк HTTP-заголовков ответа: размер, тип и пр.
    Пустую строку – мол, заголовки всё.

    Вот в этот момент fetch уже понимает, как у него дела с этим запросом. И ресолвит первый промис. Уже ясно, что вроде всё ок, ща польют данные, и это надолго. Дальше вступает в работу объект Response.

    3) После пустой строки после заголовков ответа, сервер начинает лить данные тела ответа. Может пару букв, а может гигабайт дампа. Представьте медленный интернет, зарезанную скорость «недружественного» сайта и т.п.

    Данные медленно ползут... И наконец, полностью переданы-получены.

    Вот тут у объекта Response ресолвится его .json() промис. Посмотрите по ссылке — у того же объекта (мы его получаем после первого ресолва fetch()) есть и свойства, доступные сразу же, синхронно: например, объект с заголовками: свойство headers. Или свойство ok, значение которого следует из самой первой строки ответа сервера.

    В общем, понять асинхронность помогает (мысленное) замедление всего и вся. Как будто интернет медленный, вычисления выполняются вручную на бумажке с калькулятором. Становится ясно, что какие-то потенциально долгие делишки ждать невесело, поэтому их делают асинхронными: сразу возвращают Promise, который отресолвится когда там всё доделается. А пока ждём, можно и салат оливье нарезать )
    Ответ написан
    Комментировать
  • Почему стрелочная функция не берет контекст родителя?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Перечитайте про стрелочные функции

    У стрелочных нет своего this.

    На момент создания функции logger() в вашем примере, this === window.
    И так и останется, как ни вызывай её.
    Ответ написан
    Комментировать
  • Почему выходит undefined?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    1. randNum содержит число.
    2. questFunc() возвращает строку с текстом вопроса.
    3. people[`${questFunc()}`] это, например, people["Это девушка?"] – будет undefined.
      Массив people не имеет строкового ключа. В нём два элемента с индексами 0 и 1.

    Я бы предложил не дублировать текст вопросов, а работать с их индексами. Так лаконичнее:
    spoiler
    const questions = [
      'Это самец?',
      'Это девушка?',
      'Носит очки?',
      'Занимается спортом?',
      'У этого человека смуглая кожа?',
    ];
    const people = [
      { name: 'Егор', profile: [1, 0, 1, 1, 1] },
      { name: 'Залина', profile: [0, 1, 1, 1, 0] },
    ];
    
    const questionElement = document.querySelector('.question');
    
    let questionIndex; // индекс текущего вопроса
    function askQustion() {
      questionIndex = Math.floor(Math.random() * questions.length);
      questionElement.innerHTML = questions[questionIndex];
      return questions[questionIndex];
    }
    
    askQustion();
    
    // TODO: принять ответ пользователя (true/false)
    const answer = true; // допустим, ответил "да"
    
    const candidates = people
      .filter(({ profile }) => !!profile[questionIndex] === answer)
      .map(({ name }) => name)
      .join(', ');
    
    console.log('Кандидаты:', candidates);
    Ответ написан
    Комментировать
  • Как отследить дозагрузку страницы?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Использовать MutationObserver. Он может «наблюдать» за всем документом или какой-то его частью, и реагировать на изменения в дереве.
    Вот простой пример, где по таймеру добавляются div'ы в #container, а MutationObserver это замечает и пишет в #log:
    Ответ написан
    Комментировать
  • Как в данном случае составить регулярное выражение?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Если дело в браузере, где доступен DOM API, можно так:
    const tr = document.createElement('tr');
    tr.innerHTML = '<td>Продукт</td><td>24</td><td>A</td>' 
    tr.querySelector('td:nth-child(2)').textContent // "24"
    Ответ написан
    5 комментариев