• Не могу найти ошибку в условии, в консоли выводит 0, что делать?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Пара ошибок:
    1. for .. in перебирает имена свойств объекта ('a', 'b', 'c', ...)
      а тут требуются значения (10, 20, 30, ...) – значения перебирает for .. of
    2. значения — числа. Чтобы забрать первую букву (цифру) нужна строка. Поэтому надо каждое значение сначала сделать строкой. Например, методом toString():
      const num = 10; // число
      num.toString() // результат "10" – строка текста
    Поправьте эти два момента и всё наладится.

    Можно и в одну нечитабельную строку:
    Object.values(obj).reduce((acc, c) => acc + c.toString().match(/^[12]/), 0) // 2
    но здесь используется тяжёлый механизм регулярных выражений, хотя вполне можно без него; и неочевидное приведение типа Boolean к Number ради краткой записи.
    Ответ написан
    Комментировать
  • Как добраться до вложенного объекта в массиве?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Буквально в лоб добраться до пола первой подруги или друга первого юзера можно так:
    users[0].friends[0].gender

    Для решения задачи сначала нужно вытащить из каждого элемента массива (из каждого user) только его свойство friends (массив). Был объект user, стал только его массив friends. Методом map()

    Причём, в массиве friends методом filter() надо оставить только тех, где gender === 'female'

    Так из начального массива users получится массив массивов – иногда пустых, иногда с девушками.
    Массив массивов сделать просто-массивом, без пустышек, можно методом flat()

    Ну а потом можно эти два последовательных метода map(fn).flat() заменить на один, делающий то же самое, flatMap(fn)

    spoiler
    users.flatMap(({ friends }) => friends.filter(({ gender }) => gender === 'female'));
    
    // [ {"name":"Mira","gender":"female"}, {"name":"Aria","gender":"female"}, {"name":"Keit","gender":"female"} ]
    Ответ написан
    1 комментарий
  • Как улучшить производительность данного кода?

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

    Заполнили окно в самой левой позции. Посчитали его "кардинальность" (число уникальных).

    Далее на каждом шаге удаляется 1 элемент слева и добавляется 1 элемент справа. Смотрим, изменилась ли кардинальность:
    - удаляемый элемент ещё есть в оставшихся? Нет – значит мы уменьшили кардинальность на 1.
    - то же с добавляемым: уже есть такой в середине окна? Нет – значит, увеличили кардинальность на 1.

    Такое решение прокатило и по перформансу, хотя там есть вложенные мини-циклы для поиска удаляемого/добавляемого значений в остающемся огрызке. Наверняка, есть более элегантные решения.
    spoiler
    function countContiguousDistinct(k, arr) {
      let cardinality = 0;
      for (let i = 0; i < k; i++) {
        if (i === arr.indexOf(arr[i])) cardinality++;
      }
      const result = [cardinality];
      
      const isNotInWindow = (value, arr, start, finish) => {
        for (let j = start; j < finish; j++) {
          if (arr[j] === value) return false;
        }
        return true;
      }
      
      for (let i = 0; i < arr.length - k; i++) {
        const L = arr[i];
        const R = arr[i + k];
        if (L !== R) {
          if (isNotInWindow(L, arr, i + 1, i + k)) cardinality--;
          if (isNotInWindow(R, arr, i + 1, i + k)) cardinality++;
        }
        result.push(cardinality);
      }
      
      return result;
    }
    Ответ написан
    Комментировать
  • Ноутбук для JavaScript?

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

    На первых порах, пока не начали работать с каким-нибудь старым тяжеленным проектом на React с 1000 компонентов, предложенного конфига ноута вполне достаточно.

    Ещё важно, насколько удобно работать с текстом: какой дисплей у ноута. Тут чем больше тем лучше. Скажем, 15" скорее мало, чем достаточно. Хорошо бы подключить внешний монитор (и держать его подальше от глаз, пусть и сделав шрифт крупнее). Внешнюю клавиатуру и мышь.
    Ответ написан
  • Как спарсить HTML таблицу в массив объектов?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно создать элемент template, вставить в него HTML строку, и забрать из него DocumentFragment.

    Там уже найти строки-ячейки как в обычном документе:
    const htmlString = `<table>
      <tr><td>Apple</td><td>12</td></tr>
      <tr><td>Banana</td><td>34</td></tr>
    </table>`;
    
    const tmpl = document.createElement('template');
    tmpl.innerHTML = htmlString;
    const df = tmpl.content;
    
    const rows = df.querySelectorAll('tr');
    const result = [];
    rows.forEach(row => {
      result.push([...row.children].map(td => td.textContent));
    });
    
    result // [["Apple","12"],["Banana","34"]]
    Ответ написан
    Комментировать
  • Как разбить текст на теги?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    можно создать временный элемент <template>, вставить в него этот HTML,
    и забрать из него DocumentFragment

    Фрагмент — это примерно как DOM-документ, его можно рекурсивно обойти через свойство children

    Например, в строке содержится такой HTML:
    <div>
      <p>Text</p>
      <ul>
        <li>Apple</li>
        <li>Banana</li>
      </ul>
    </div>
    И примерно такой код:
    const tmpl = document.createElement('template');
    tmpl.innerHTML = msg; // строка с HTML
    const df = tmpl.content; // DocumentFragment
    
    df.children // массив из одного элемента: наружний div
    df.children[0].children // массив с двумя эл.: параграфом и списком
    df.children[0].children[1].children[1].textContent // "Banana"
    Ответ написан
    2 комментария
  • Как заменить каждый из символов подстроки на звездочку?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Если с минимумом изменений, то так:
    -        field = field.replace(badWords[i], '*');
    +        field = field.replaceAll(badWords[i], '*'.repeat(badWords[i].length));
    звёздочку повторить столько раз, сколько букв в заменяемом слове.
    Ответ написан
    6 комментариев
  • Приемы рендера компонентов вместо плейсхолдеров внутри строки во Vue?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Наверное, есть более разумные решения, но попробуйте использовать динамические компоненты Vue.

    Строку разбить на узлы: текстовые и компоненты. Сделать какой-то минимальный компонент для просто-текстовых кусков.

    Например, из строки 'lorem ipsum dolor [placeholder|1] sit amet [placeholder|2]'
    сделать массив
    [
      ['text', 'lorem ipsum dolor'],
      ['copy', 1],
      ['text', 'sit amet'],
      ['copy', 2],
    ]
    если я правильно понял, что каждый из плейсхолдеров копирует значение после вертикальной черты – первый копирует 1, второй 2.

    В темплейте перебрать этот массив примерно так
    <template v-for="item in items">
      <component :is="text" v-if="item[0] === 'text'">{ item[1] }</component>
      <component :is="copy" v-if="item[0] === 'copy'" :value="item[1]" />
    </template>
    Ответ написан
  • Как заработать 14летнему дизайнеру?

    поначалу демпинговать – предлагать логотипы по цене ниже рынка.
    Попробуйте поперехватывать заказы на KWork.ru например.
    Посмотрите других лого-дизайнеров там, их оформление предложений, портфолио – и предложите за 0.5—0.7 цены от их. Цель – получить несколько выполненных именно через платформу (с оплатой через платформу, а не мимо) заказов и отзывов.

    После этого можно понемногу поднимать цену.

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

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    в рендере во время обхода массива при каком-то текущем значении index
    удаляете этот же элемент в deleteEl()
    После удаления, выходит, index уже указывает на следующий элемент и не отрисовывает его.

    TL&DR не изменять массив изнутри forEach()

    Ну и вообще, render() не место для изменения данных. Пусть каждый занимается своим делом: render() только рисует что есть. delete() только удаляет элемент из массива (и вызывает render())
    Ответ написан
    3 комментария
  • Не работате .on('change') на добавленный через append input?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Надо «делегировать» — слушать события на общем родителе. Тогда свеже-созданные элементы тоже попадут в обработку – события на них «пузырьком» поднимаются вверх, там-то их и поймают.

    $('.table_body').on('change', '.input_ptp_tema', function() {


    См. Direct and delegated event handlers в документации к .on()
    Ответ написан
    1 комментарий
  • Как модифицировать прелоадер на jQuery?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    с обработчике события change добавьте проверку на число выбранных файлов:
    if (event.target.files.length !== 3) {
      // как-то сообщить, что ждём именно 3 файла
      return;
    }
    а когда всё ок, то либо сразу в разметке создать вместо 1 целых 3 тега с img, у каждого свой уникальный id. Либо генерить разметку трёх img на лету и заменять HTML у div.profile-images
    Ответ написан
    Комментировать
  • Как написать по простому данную строку кода?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    function findWord() {
      const text = document.getElementById('text_34').value;
      const word = document.getElementById('word_34').value;
      const outputElement = document.getElementById('output_34');
    
      const re = new RegExp(word, 'gi'); // в word хорошо бы экранировать спец-символы RegExp'ов
      function wrapInSpan(match) {
        return '<span>' + match + '</span>';
      }
    
      outputElement.innerHTML = text.replace(re, wrapInSpan);
    }
    Ответ написан
    Комментировать
  • Как из HTML передать массив в JS?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    value текстового поля ввода это просто строка текста, что бы там ни вводили.

    Я бы не ждал от пользователя знания синтаксиса JSON массивов JavaScript со всеми этими квадратными скобками, и позволил вводить числа через запятую и, может, ещё пробел.

    Строку текста можно разбить в массив методом split():
    const str = '1,2, 3,   4'; // то, что забрали из value инпута
    const separator = /,\s*/; // рег. выражение: запятая и потом 0 или больше пробелов
    const arr = str.split(separator); // [ "1", "2", "3", "4" ]
    тут ешё один подвох: элементы массива по-прежнему строки. Не число 1, а строка "1".

    Перевести элементы массива в числа можно, например, функцией Number(). Нужно каждый элемент получившегося массива прогнать через эту функцию. Для этого есть метод массива map():
    const arr = str
      .split(separator)
      .map(Number); // [ 1, 2, 3, 4 ]
    вот теперь больше похоже на желаемый, наверное, результат?
    Ответ написан
    1 комментарий
  • Почему при глубоком копировании объектов переполняется стек вызовов?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Вероятно, клонируемый объект содержит циклические ссылки, типа
    const a = {};
    const b = {};
    a.b = b;
    b.a = a;
    
    cloneDeep(a); // бесконечный цикл

    Попробуйте подсмотреть реализацию cloneDeep() в loDash. В реале там вызывается baseClone()

    Можно сохранять каждый обработанный ранее объект в Map – и проверять, не имели ли с ним уже дела ранее – тогда вместо изготовления ещё одной копии просто вставлять ранее сделанный клон.
    Ответ написан
    1 комментарий
  • Как испраить sed: illegal option -- r?

    Мне помогло временное решение, описанное в комментарии к issue:

    В файле
    /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/contrib/terminal/browser/media/shellIntegration-bash.sh
    в строке 125
    заменить флаг -r на -E
    (оба делают одно и то же, но на маке нет -r, он только на Linux)

    - __vsc_current_command="$(builtin history 1 | sed -r 's/ *[0-9]+ +//')"
    + __vsc_current_command="$(builtin history 1 | sed -E 's/ *[0-9]+ +//')"
    Ответ написан
    1 комментарий
  • Как сделать count+1 при использовании updateOrCreate?

    попробуйте обернуть в DB::raw()

    $revCount = ReviewUserCount::updateOrCreate(
      ['user_id' => $user->id, 'review_id' => $request->reviews], //здесь нахожу нужную строку
      ['count' => DB::raw('count + 1')]
    );

    Или посмотрите на метод upsert() в 8-м Laravel. Что-то типа
    ReviewUserCount::upsert(
      ['user_id' => $user->id, 'review_id' => $request->reviews, 'count' => 1],
      ['user_id', 'review_id'], 
      ['count' => DB::raw('count + 1')]
    );
    но что он возвращает – надо уточнять.
    Ответ написан
    4 комментария
  • Расчет скидки в зависимости от суммы?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    поменяйте условия местами:
    сначала проверяйте if (x >= 200)
    потом уже else if (x >= 100)
    Ответ написан
    1 комментарий
  • Почему выделяется только одно слово?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    - 		var zamenaSlova = textArea.replace(resStr,`<span>${resStr}</span>`);
    + 		var zamenaSlova = textArea.replaceAll(resStr,`<span>${resStr}</span>`);
    Ответ написан
    7 комментариев
  • В какой программе удобно нарезать видео на фрагменты?

    ffmpeg

    разрезать можно и без перекодирования, это много быстрее:
    ffmpeg \
      -ss 15 \
      -i input.mp4 \
      -t 75 \
      -c copy \
      output_15_90.mp4
    пропустить 15 секунд от начала, взять фрагмент длиной 75 сек, сохранить без перекодирования в файл output_15_90.mp4

    Для нескольких фрагментов надо будет написать bash-скриптик (или на какой там платформе дело происходит?)

    Можно добавить и уменьшение и пережатие:
    ffmpeg \
      -ss 15 \
      -i input.mp4 \
      -vf scale=854:-2 \
      -t 75 \
      -c:v libx264 \
      -c:a aac \
      output_15_90.mp4
    сделать ширину кадра 854 точки, высоту пропорционально но кратно 2 (требование кодека), видео сжать софтверным h264, аудио кодеком AAC.
    Видео сжатие можно и ускорить с GPU если поддерживается - напр. на Маке это вместо libx264h264_videotoolbox
    Ответ написан
    1 комментарий