Ответы пользователя по тегу JavaScript
  • React JS. Почему fetch() делает два запроса?

    Alexandroppolus
    @Alexandroppolus
    кодир
    App рендерится дважды из-за React.StrictMode.

    Но вообще, делать вот так запросы противопоказано. Делай в useEffect
    Ответ написан
    2 комментария
  • Как понимать этот код, что здесь происходит?

    Alexandroppolus
    @Alexandroppolus
    кодир
    Напишите функцию replacer для JSON-преобразования, которая удалит свойства, ссылающиеся на meetup


    дурацкое условие.
    почему удалять только ссылки на meetup? кольцевых ссылок может быть сколько угодно и каких угодно, например room.self = room;, могут быть и более длинные произвольные цепочки

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

    код

    function makeReplacer() {
        const path = [];
    
        return (k, v) => {
            // простое значение не записываем в путь
            if (!v || typeof v !== 'object') {
                return v;
            }
    
            // находим родительский объект; всё что глубже, выкидываем
            for (let i = path.length - 1; i >= 0; --i) {
                const item = path[i];
                if (Object.prototype.hasOwnProperty.call(item.obj, k) && item.obj[k] === v && !item.handled.has(k)) {
                    item.handled.add(k);
                    break;
                } else {
                    path.pop();
                }
            }
    
            // если в парентах уже был текущий объект, то игнорируем его
            if (path.find((item) => item.obj === v)) {
                return undefined;
            }
    
            // записываем объект в путь и возвращаем
            path.push({
                obj: v,
                handled: new Set()
            });
            return v;
        };
    }
    
    // -----------------------------
    // пример использования
    
    let room = {
      number: 23
    };
    
    let obj1 = {a: {b: room, bb: 23}, c: 34};
     
    let meetup = {
      title: "Совещание",
      occupiedBy: [room, {name: "Иванов"}, {name: "Петров"}],
      place: room
    };
     
    room.occupiedBy = meetup;
    meetup.self = meetup;
    room.self = room;
    room.obj1 = obj1;
    
    console.log(JSON.stringify(meetup, makeReplacer(), 4))

    Ответ написан
    Комментировать
  • Как обновлять данные без перезагрузки страницы?

    Alexandroppolus
    @Alexandroppolus
    кодир
    если список должен обновляться по инициативе сервера, то WebSocket в помощь
    Ответ написан
    Комментировать
  • Почему не работает функция map?

    Alexandroppolus
    @Alexandroppolus
    кодир
    {operators && operators.map(element => (
            <OperatorCard nameImage={element.image} title={element.title}></OperatorCard>
          ))}
    Ответ написан
    1 комментарий
  • Как остановить бесконечный цикл рендеринга useEffect?

    Alexandroppolus
    @Alexandroppolus
    кодир
    немного переделал код

    const InnerBlock = ({blocks}) => {
        return blocks.filter(...).map(...)
    }
    
    const getBlocks = (statuses) => {
        if (statuses.length === 1) {
            const sid = statuses[0].id;
            return bigData.filter((a) => a.status === sid);
        } else {
            return bigData;
        }
    }
    
    const InnerContainer = ({statuses, ...props}) => {
        const [blocks, setBlocks] = useState(() => getBlocks(statuses));
    
        useEffect(() => {
            setBlocks(getBlocks(statuses));
        }, [statuses]);
    
        function sorting(){
            if(...){
                if(...){....setBlocks(sort)}else{setBlocks(sort)}
            }else{
                if(...){....setBlocks(sort)}else{setBlocks(sort)}
            }
        }
        
        return(
            {sorting} // где-то внутри пару раз вызывается 
            <InnerBlock blocks={blocks} />
        )
    }


    ещё не совсем понятно, как у тебя там "вызывается" sorting. Если напрямую, то надо бы тоже что-то поменять.
    useEffect нужен для случая, если statuses поменяется с обновлением компонента.
    ну и вынос InnerBlock наружу, ибо создавать компонент внутри другого компонента - содомия покруче многих других.
    Ответ написан
    Комментировать
  • Почему при открытии модалки у меня перерендеривается компонент, в котором я открываю модалку?

    Alexandroppolus
    @Alexandroppolus
    кодир
    Потому что useModal (и как следствие, компонент, использующий этот хук) использует значение из контекста, и если это значение меняется, будут ререндериться все компоненты, которые зависят от значения контекста (то есть, даже те компоненты, которые работают с другими модалками, ибо контекст общий для всех).
    Ответ написан
    3 комментария
  • Зачем нужна библиотека canvas?

    Alexandroppolus
    @Alexandroppolus
    кодир
    Для "изоморфного JavaScript"
    То есть один и тот же код сможет отработать и одинаково создать картинку и на клиенте (в браузере), и на сервере (node.js)
    Ответ написан
  • Как вставить файл в input?

    Alexandroppolus
    @Alexandroppolus
    кодир
    А что за "reader"? Ты читаешь блоб через FileReader?
    Всё это не нужно, просто отправляй через FormData
    Ответ написан
  • Как переместить вызываемую функцию в useEffect?

    Alexandroppolus
    @Alexandroppolus
    кодир
    если data просто импортируется, то выкинуть useEffect и написать
    const [users, setUsers] = useState(data);
    Ответ написан
    Комментировать
  • Почему в миксин нельзя передать экземпляр класса?

    Alexandroppolus
    @Alexandroppolus
    кодир
    Метод say лежит в прототипе экземпляра Sounds, а не в самом экземпляре.
    Object.assign копирует только содержимое непосредственно объекта, не заглядывая в его прототип. Так мир устроен.
    Ответ написан
    1 комментарий
  • Не понимаю, как это работает?

    Alexandroppolus
    @Alexandroppolus
    кодир
    С недавнего времени в массивах js используется реализация timsort.
    Соответственно, если массив уже отсортирован в ту или иную сторону, то это "хороший случай", отрабатывающий за время O(N). Если воткнуть console.log, как советовали умные люди в предыдущих ответах, то можно увидеть тот самый "первоначальный поиск упорядоченных в любую сторону подмассивов". Им оказывается весь массив, и далее сравнения не требуются.
    Ответ написан
    Комментировать
  • Как синхронно получить Data URL?

    Alexandroppolus
    @Alexandroppolus
    кодир
    Скачай файл как ArrayBuffer, потом закодируй как base64
    например, вот этим

    btoa немного с придурью - ей обязательно подавай массив байтов в виде строки, то есть например бинарный массив [208, 144, 208, 145], который символизирует строку "АБ" в кодировке utf8, надо перегнать в строку из 4х символов String.fromCharCode(208, 144, 208, 145). Но в принципе тоже можно.
    Ну а для скаченной строки btoa не подходит, потому что там текст уже в utf16
    Ответ написан
    2 комментария
  • [JS, react] EventListener с обращением к state?

    Alexandroppolus
    @Alexandroppolus
    кодир
    const handleClickRMB = useCallback((event) => {
        event.preventDefault();
    
        let index1 = Number(event.path[0].attributes.pos1.value);
        let index2 = Number(event.path[0].attributes.pos2.value);
        let pressedCell = board[index1][index2];
        setFlagsLeft(flagsLeft => {
            if ((!pressedCell.opened) && (flagsLeft !== 0)) {
                const marked = pressedCell.marked;
                pressedCell.mark();
                changeOneCell(index1, index2, pressedCell);
                return marked ? flagsLeft + 1 : flagsLeft - 1;
            }
            return flagsLeft;
        });
    }, [setFlagsLeft, changeOneCell]);
    
    useEffect(() => {
        document.addEventListener('contextmenu', handleClickRMB, false);
        return () => document.removeEventListener('contextmenu', handleClickRMB, false);
    }, [handleClickRMB]);
    Ответ написан
    Комментировать
  • Какой функцией декодировать эту строку - чтобы русские буквы получились?

    Alexandroppolus
    @Alexandroppolus
    кодир
    Если тебе посмотреть, что там - просто вбей строку (вместе с кавычками) в консоль браузера, нажми ентер.
    А использовать в коде можно как есть, это уже "декодированная" строка.
    Ответ написан
    Комментировать
  • Почему цикл работает неправильно?

    Alexandroppolus
    @Alexandroppolus
    кодир
    &&
    Ответ написан
    Комментировать
  • Ошибка codewars?

    Alexandroppolus
    @Alexandroppolus
    кодир
    function validatePIN(pin) {
         return /^\d{4}(\d\d)?$/.test(pin);
    }
    Ответ написан
    Комментировать
  • Как можно улучшить этот код?

    Alexandroppolus
    @Alexandroppolus
    кодир
    Да много чего можно улучшить. Например, выкинуть на помойку идиотский range() и вместо него использовать обычный цикл, причем в обратном направлении, чтобы заменить unshift на push.
    Вместо counter.$ просто добавит параметр в counter.get()
    Ответ написан
  • Как отфильтровать массив по цепочке?

    Alexandroppolus
    @Alexandroppolus
    кодир
    Задачу лучше разбить на два этапа:
    1) препроцессинг - построение карты
    2) фильтр уже по готовой карте
    это на случай, если массив один, а фильтроваться будет многократно - тогда карту можно переиспользовать
    function createMap(arr) {
        const map = new Map();
        
        arr.forEach(a => {
            let childs = map.get(a.parentId);
            if (!childs) {
                map.set(a.parentId, childs = []);
            }
            childs.push(a);
        });
    
        return map;
    }
    
    function filter(map, initial) {
        const result = (map.get(initial) || []).slice();
        for (let i = 0; i < result.length; ++i) {
            result.push(...(map.get(result[i].id) || []));
        }
    
        return result;
    }
    
    // использование
    const initial = 1
    const arr = [
                        { name: '1', parentId: 1, id: 2 },
                        { name: '2', parentId: 2, id: 3 },
                        { name: '3', parentId: 1, id: 4 },
                        { name: '3', parentId: 4, id: 5 }
                    ];
    
    var map = createMap(arr);
    console.log(filter(map, initial));
    console.log(filter(map, 2));
    Ответ написан
    Комментировать
  • Как дерево представить в видемассива?

    Alexandroppolus
    @Alexandroppolus
    кодир
    Что у тебя там за дерево?
    Например, если это сбалансированное двоичное дерево, то можно использовать подход как здесь
    Если что-то другое, то надо смотреть, что именно.
    Ответ написан
    Комментировать
  • Задача на циклы в JavaScript?

    Alexandroppolus
    @Alexandroppolus
    кодир
    Задачка действительно простая, но я бы попытался оптимизировать память с прицелом на "sliced strings" - просто как иллюстрация, потому что объемы крошечные.

    const full = '#'.repeat(7); // полная строка
    for (let i = 1; i <= 7; i++){
        console.log(full.substr(0, i));
    }


    Если верить некоторым статьям по v8, full.substr(0, i) внутри себя использует тот же строковый буфур, что и full, а не создает новый. Конкатенация тоже переиспользует, но через менее эффективную по памяти структуру. Честно говоря, замеры не проводил )
    Ответ написан