[{"data":1,"prerenderedAt":1092},["ShallowReactive",2],{"$f7WLsC97RohGIgxk5Ny4o1baiGrDnr4nhr_vETKrlp08":3,"$f-KhKwB8J0md5Q3U1oyqNCQbHxVpirjaanlJWCGo_ht4":91,"$fkVWEWXZHbLy86BhC78gDVDJ_00TY4k_DsdZD3Mz6ZO0":94,"$fqGwjmVbyPxmA5lnsLz9nF3m-ncS8WzLIlTsTA85cuZA":99,"$fVMSX_HWVzVkzv-u5ATHiOgClblPaIGZfXUn_Cq8LKn4":445,"$fw0tI3d-iV2W3zZtbRjyPNNRSgXGobrmwsMU7a1fynls":666,"mdc--8viboq-key":686,"mdc-m96ov0-key":755,"mdc-ei5b37-key":778,"mdc--8q56iz-key":836,"mdc--mow7qd-key":872,"mdc-fgq8fu-key":897,"mdc--qmxgek-key":1047},{"content":4,"livecodingContent":47,"type":79,"pageMeta":80},[5,9,13,16,20,23,27,30,34,37,41,44],{"id":6,"value":7,"isTypeH1":8},"1989","Дана строка: 'one.two.three.four.five'. Необходимо из строки сделать вложенный объект",true,{"id":10,"value":11,"anchor":12,"isTypeH2":8},"4630","Теория: как строится вложенность","theory-how-nesting-is-built",{"id":14,"value":15,"isTypeParagraph":8},"10665","Задача сводится к двум шагам: (1) преобразование строки в массив ключей, (2) последовательное построение объекта по этим ключам.  \nДля шага (1) применяется `split('.')`, который разбивает строку по разделителю и возвращает массив подстрок; при точке в начале/конце строки в массив попадают пустые элементы.",{"id":17,"value":18,"anchor":19,"isTypeH3":8},"4681","Шаг 1: разбиение строки на части","step-1-splitting",{"id":21,"value":22,"isTypeParagraph":8},"10666","Пример разбиения:\n```\n\"one.two.three\".split(\".\")  // [\"one\", \"two\", \"three\"]\n\".a..b.\".split(\".\")         // [\"\", \"a\", \"\", \"b\", \"\"]\n```\n\nПоэтому часто добавляются:\n- `trim()` для удаления пробелов вокруг сегментов (если строка могла содержать пробелы).\n- `filter(Boolean)` для удаления пустых сегментов (`\"\"`), чтобы не создавать ключи-пустые строки.",{"id":24,"value":25,"anchor":26,"isTypeH3":8},"4682","Шаг 2: построение объекта «оборачиванием»","step-2-wrapping",{"id":28,"value":29,"isTypeParagraph":8},"10667","Идея «оборачивания» справа налево особенно наглядна.\n\nСхема (ключи справа налево):\n```\nparts = [\"one\", \"two\", \"three\"]\n\nstart: acc = {}\nstep:  key = \"three\" => { \"three\": {} }\nstep:  key = \"two\"   => { \"two\": { \"three\": {} } }\nstep:  key = \"one\"   => { \"one\": { \"two\": { \"three\": {} } } }\n```\n\nИменно это делает `reduceRight()`: применяет функцию свёртки к элементам массива справа налево.",{"id":31,"value":32,"anchor":33,"isTypeH3":8},"4683","Почему не подходит «просто присвоить по пути» без цикла","why-not-without-loop",{"id":35,"value":36,"isTypeParagraph":8},"10668","Нельзя создать всю цепочку вложенности одним присваиванием, потому что перед записью `cursor[key]` должен существовать объект `cursor`, а перед ним — объект выше, и так далее. Поэтому обязательно требуется либо цикл, либо рекурсия, либо свёртка массива.",{"id":38,"value":39,"anchor":40,"isTypeH2":8},"4631","Сравнение подходов","approaches-comparison",{"id":42,"value":43,"isTypeParagraph":8},"10669","| Подход | Как читается | Плюсы | Минусы |\n|---|---|---|---|\n| `reduceRight` | «оборачивать» справа налево | Коротко, без мутаций | Требуется понимание свёртки справа налево |\n| Цикл `for` | шаг за шагом по массиву | Максимально наглядно | Мутация объекта (для задачи обычно нормально) |\n| Рекурсия | «ключ + остаток» | Хорошо объясняет вложенность | Возможны ограничения стека на очень больших входах |\n| `Object.create(null)` + фильтры | как цикл, но безопаснее | Снижение рисков от «опасных» ключей | Чуть больше кода |",{"id":45,"value":46,"isTypeParagraph":8},"10670","Кратко: строка с точками сначала превращается в массив ключей через `split('.')` (часто с очисткой `trim()` и удалением пустых сегментов `filter(Boolean)`), после чего вложенный объект строится либо циклом слева направо через «курсор», либо «оборачиванием» справа налево через `reduceRight`, начиная с пустого объекта `{}`.",{"id":48,"functionTestData":49,"functionName":75,"functionTemplateCode":76,"solution":77,"description":78},"430",[50,59,68],[51,53],[52],"one.two.three.four.five",{"one":54},{"two":55},{"three":56},{"four":57},{"five":58},{},[60,62],[61],"five.four.three.two.one",{"five":63},{"four":64},{"three":65},{"two":66},{"one":67},{},[69,71],[70],"five.four.three",{"five":72},{"four":73},{"three":74},{},"generateObject","function generateObject(str) {\n    // ваш код здесь\n}","**Вариант A** — через reduceRight (функционально и кратко)\n\n```\nfunction generateObject(path) {\n  const parts = String(path)\n    .split(\".\")\n    .map(s => s.trim())\n    .filter(Boolean);\n\n  return parts.reduceRight((acc, key) => ({ [key]: acc }), {});\n}\n```\n\nПояснение: `reduceRight()` сворачивает массив справа налево, поэтому удобно начинать с `{}` и «оборачивать» его ключами в обратном порядке.\n\n**Вариант B** — через цикл for\n\n```\nfunction generateObject(path) {\n  const parts = String(path)\n    .split(\".\")\n    .map(s => s.trim())\n    .filter(Boolean);\n\n  let result = {};\n  let cursor = result;\n\n  for (let i = 0; i \u003C parts.length; i += 1) {\n    const key = parts[i];\n    cursor[key] = {};\n    cursor = cursor[key];\n  }\n\n  return result;\n}\n```\n\nПлюс варианта: «курсор» (`cursor`) всегда указывает на текущий вложенный объект, и на каждом шаге добавляется следующий уровень.\n\n**Вариант C** — рекурсия (простой принцип «голова + хвост»)\n\n```\nfunction generateObject(path) {\n  const parts = String(path)\n    .split(\".\")\n    .map(s => s.trim())\n    .filter(Boolean);\n\n  function build(index) {\n    if (index >= parts.length) return {};\n    const key = parts[index];\n    return { [key]: build(index + 1) };\n  }\n\n  return build(0);\n}\n```\n\nРекурсивная версия хорошо показывает идею вложенности, но для очень длинных строк потенциально упирается в ограничение глубины стека.\n\n**Вариант D** — безопаснее для «опасных» ключей (защита от прототипного загрязнения)\n\nЕсли строка приходит извне (например, из URL/формы), ключи вроде `__proto__`, `prototype`, `constructor` могут привести к прототипному загрязнению при неосторожной записи в обычный объект; для снижения риска часто создаётся объект без прототипа через `Object.create(null)` и добавляется явная проверка ключей.\n\n```\nfunction generateObject(path) {\n  const forbidden = new Set([\"__proto__\", \"prototype\", \"constructor\"]);\n\n  const parts = String(path)\n    .split(\".\")\n    .map(s => s.trim())\n    .filter(Boolean);\n\n  const root = Object.create(null);\n  let cursor = root;\n\n  for (const key of parts) {\n    if (forbidden.has(key)) {\n      throw new Error(\"Forbidden key in path: \" + key);\n    }\n    cursor[key] = Object.create(null);\n    cursor = cursor[key];\n  }\n\n  return root;\n}\n```","Дана строка:\n\n```\nconst str = 'one.two.three.four.five';\n```\n\nНеобходимо написать функцию `generateObject`, которая аргументом принимает строку вида: `'one.two.three.four.five'` и возвращает вложенный объект из полей one, two, three, four, five.\n\n```\nconst obj = generateObject('one.two.three.four.five') \n\n// Возвращаемое значение функции:\n{\n  \"one\": {\n    \"two\": {\n      \"three\": {\n        \"four\": {\n          \"five\": {}\n        }\n      }\n    }\n  }\n} \n```\n\nПримеры:\n\n```\n// Параметр функции:\n\"one.two.three.four.five\"\n\n// Возвращаемое значение функции:\n{\n  \"one\": {\n    \"two\": {\n      \"three\": {\n        \"four\": {\n          \"five\": {}\n        }\n      }\n    }\n  }\n}\n\n// Параметр функции:\n\"five.four.three.two.one\"\n\n// Возвращаемое значение функции:\n{\n  \"five\": {\n    \"four\": {\n      \"three\": {\n        \"two\": {\n          \"one\": {}\n        }\n      }\n    }\n  }\n}\n\n// Параметр функции:\n\"five.four.three\"\n\n// Возвращаемое значение функции:\n{\n  \"five\": {\n    \"four\": {\n      \"three\": {}\n    }\n  }\n}\n```","livecoding",{"title":81,"description":82,"ogTitle":81,"ogDescription":82,"ogImageUrl":83,"canonical":84,"ogLocale":85,"ogSiteName":86,"ogImageType":87,"ogImageWidth":88,"ogImageHeight":89,"ogType":90,"ogUrl":84},"Дана строка и необходимо из строки сделать вложенный объект","Необходимо написать функцию generateObject, которая аргументом принимает строку и возвращает вложенный объект из полей one, two, three, four, five.","/og-image.png",null,"ru_RU","goodwebjob.ru","image_jpeg","1200","630","article",{"siteName":92,"siteUrl":93},"GOOD WEB JOB!","https://goodwebjob.ru",[95],{"label":96,"slug":97,"to":98},"Подготовка к тех.интервью","technical-interview","/technical-interview/where-to-begin",{"navigationList":100,"navigationSublist":109},[101,105],{"path":98,"isActive":102,"name":103,"icon":104,"isNavbarMobileDisabled":8},false,"С чего начать?","material-symbols:visibility-outline-rounded",{"path":106,"isActive":8,"name":107,"icon":108,"isNavbarMobileDisabled":102},"/technical-interview/tasks","Сборник задач","material-symbols:task-outline",[110,119,146,158,164,304,328,337,343,406,427,433],{"title":111,"list":112,"isOpened":102},"Bash",[113,116],{"name":114,"path":115,"isActive":102},"Дан фрагмент bash-скрипта: cd ~; mkdir foo... Что в нем происходит?","/technical-interview/tasks/here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":117,"path":118,"isActive":102},"Дан фрагмент bash-скрипта: target=$(ps -Af | grep $1 | head -n 1)...","/technical-interview/tasks/here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"title":120,"list":121,"isOpened":102},"CSS",[122,125,128,131,134,137,140,143],{"name":123,"path":124,"isActive":102},"Дан HTML-код. Какой будет цвет у текста «Some dummy text»?","/technical-interview/tasks/the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":126,"path":127,"isActive":102},"Есть шаблон HTML и CSS кода. Какой будет цвет у текста «Таким образом, постоянное»?","/technical-interview/tasks/there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":129,"path":130,"isActive":102},"Есть шаблон вложенного HTML кода. Какой будет цвет у текста «One more dummy text»?","/technical-interview/tasks/there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":132,"path":133,"isActive":102},"Есть шаблон вложенного HTML кода. Будет ли display:block у body влиять на span?","/technical-interview/tasks/there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":135,"path":136,"isActive":102},"Есть HTML код. Будет ли font-weight на span влиять?","/technical-interview/tasks/there-is-an-html-code-will-font-weight-affect-span",{"name":138,"path":139,"isActive":102},"Flexbox и Grid, чем отличаются друг от друга?","/technical-interview/tasks/what-are-the-differences-between-flexbox-and-grid",{"name":141,"path":142,"isActive":102},"Заменяют ли Flexbox и Grid друг друга?","/technical-interview/tasks/do-flexbox-and-grid-replace-each-other",{"name":144,"path":145,"isActive":102},"Есть CSS и JS анимация. Какая между ними разница, что быстрее, что более удобно?","/technical-interview/tasks/there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"title":147,"list":148,"isOpened":102},"Git",[149,152,155],{"name":150,"path":151,"isActive":102},"Разрабатывал, взял закоммитил, запушил. Оказалось, что запушил не в ту ветку, точнее, коммит не в ту ветку. Какие действия?","/technical-interview/tasks/developed-it-committed-it-and-launched-it-it-turned-out-that-i-had-pushed-it-to-the-wrong-branch-or-rather-the-commit-was-in-the-wrong-branch-what-actions",{"name":153,"path":154,"isActive":102},"В git есть несколько вариантов слияния веток, какие? Чем отличаются?","/technical-interview/tasks/git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":156,"path":157,"isActive":102},"Какие существуют стратегии ветвления для работы команды? Что это такое?","/technical-interview/tasks/what-are-the-branching-strategies-for-the-team-what-is-it",{"title":159,"list":160,"isOpened":102},"HTML",[161],{"name":162,"path":163,"isActive":102},"Что такое HTML?","/technical-interview/tasks/what-is-html",{"title":165,"list":166,"isOpened":102},"JavaScript",[167,170,173,176,179,182,185,188,191,194,197,200,203,206,209,212,215,218,221,224,227,230,233,236,239,242,245,248,251,254,256,259,262,265,268,271,274,277,280,283,286,289,292,295,298,301],{"name":168,"path":169,"isActive":102},"Какие логические значения в console.log будут получены?","/technical-interview/tasks/prototype-what-logical-values-will-be-received-in-console-log",{"name":171,"path":172,"isActive":102},"Почему опасно писать прямо в прототипы базовых типов?","/technical-interview/tasks/why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":174,"path":175,"isActive":102},"Что вернёт следующий код? Object.create(null).hasOwnProperty('toString')","/technical-interview/tasks/what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":177,"path":178,"isActive":102},"Какое значение выведет консоль с object.property?","/technical-interview/tasks/what-value-will-the-console-output-with-object-property",{"name":180,"path":181,"isActive":102},"Что выведется в console.log([arr[0](), arr[0]()])?","/technical-interview/tasks/what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":183,"path":184,"isActive":102},"Что выведет console.log в результате выполнения цикла while?","/technical-interview/tasks/what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":186,"path":187,"isActive":102},"Есть функция и объект. Напишите все известные вам способы, чтобы вывести в консоли значение x из объекта, используя функцию","/technical-interview/tasks/there-is-a-function-and-an-object-write-all-the-ways-you-know-to-output-the-value-of-x-from-an-object-in-the-console-using-the-function",{"name":189,"path":190,"isActive":102},"Что вернёт метод book.getUpperName()?","/technical-interview/tasks/what-will-the-book-get-upper-name-method-return",{"name":192,"path":193,"isActive":102},"Переменные объявлены следующим образом: a=3; b=«hello»;. Укажите правильное утверждение","/technical-interview/tasks/variables-are-declared-as-follows-specify-the-correct-statement",{"name":195,"path":196,"isActive":102},"Что выведет консоль в случае присвоения свойства массиву по строковому положительному индексу?","/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":198,"path":199,"isActive":102},"Что выведет консоль в случае присвоения свойства массиву по строковому отрицательному индексу?","/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":201,"path":202,"isActive":102},"Что выведет консоль в случае удаления элемента массива с помощью оператора delete?","/technical-interview/tasks/what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":204,"path":205,"isActive":102},"Что вернёт этот код: typeof (function(){})()","/technical-interview/tasks/what-this-code-will-return-typeof-function",{"name":207,"path":208,"isActive":102},"Что получится в результате передачи объекта как аргумента в функцию и выполнения кода?","/technical-interview/tasks/what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":210,"path":211,"isActive":102},"Какие способы объявления функции есть в JavaScript?","/technical-interview/tasks/what-are-the-ways-to-declare-a-function-in-javascript",{"name":213,"path":214,"isActive":102},"Что такое this в JavaScript?","/technical-interview/tasks/what-is-this-in-javascript",{"name":216,"path":217,"isActive":102},"Что такое Event Loop, как работает?","/technical-interview/tasks/what-is-an-event-loop-and-how-does-it-work",{"name":219,"path":220,"isActive":102},"Что будет, если вызвать typeof на необъявленной переменной?","/technical-interview/tasks/what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":222,"path":223,"isActive":102},"Что показывает оператор typeof в JavaScript?","/technical-interview/tasks/what-does-the-typeof-operator-show-in-javascript",{"name":225,"path":226,"isActive":102},"Какие типы данных существует в JavaScript?","/technical-interview/tasks/what-types-of-data-exist-in-javascript",{"name":228,"path":229,"isActive":102},"Какую структуру использовать для хранения упорядоченного списка строк в JavaScript?","/technical-interview/tasks/what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":231,"path":232,"isActive":102},"Что вернет typeof для массива?","/technical-interview/tasks/what-will-typeof-return-for-an-array",{"name":234,"path":235,"isActive":102},"Почему оператор typeof, применённый к массиву, возвращает объект?","/technical-interview/tasks/why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":237,"path":238,"isActive":102},"Если нужно хранить список уникальных строк, какую структуру данных выбрать?","/technical-interview/tasks/if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":240,"path":241,"isActive":102},"Что возвращает typeof для new Set в JavaScript?","/technical-interview/tasks/what-does-typeof-return-for-new-set-in-javascript",{"name":243,"path":244,"isActive":102},"Почему в JavaScript два объекта с одинаковым содержимым при сравнении возвращают false?","/technical-interview/tasks/why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":246,"path":247,"isActive":102},"В чем разница между микро- и макро-тасками в JavaScript?","/technical-interview/tasks/what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":249,"path":250,"isActive":102},"arr.push(0) повлияет на массив так же, как если бы мы выполнили...","/technical-interview/tasks/arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":252,"path":253,"isActive":102},"Вернуть массив от 1 до n, где числа, кратные 3, заменены на 'fizz', кратные 5 - на 'buzz', а кратные и 3, и 5 одновременно - на 'fizzbuzz'","/technical-interview/tasks/returns-an-array-from-1-to-n-replacing-numbers-that-are-multiples-of-3-with-fizz-numbers-that-are-multiples-of-5-with-buzz-and-numbers-that-are-multiples-of-both-3-and-5-with-fizzbuzz",{"name":7,"path":255,"isActive":102},"/technical-interview/tasks/the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":257,"path":258,"isActive":102},"Дано дерево (вложенный объект), надо найти сумму всех вершин","/technical-interview/tasks/given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":260,"path":261,"isActive":102},"Для каждого вложенного объекта нужно добавить свойство level, которое равняется числу - номер вложенности","/technical-interview/tasks/for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":263,"path":264,"isActive":102},"Для каждой ветви дерева записать номер вложенности данной ветви","/technical-interview/tasks/for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":266,"path":267,"isActive":102},"Есть массив, в котором лежат объекты с датами, необходимо отсортировать даты по возрастанию","/technical-interview/tasks/there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":269,"path":270,"isActive":102},"Есть слова в массиве, необходимо определить, состоят ли они из одних и тех же букв","/technical-interview/tasks/there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":272,"path":273,"isActive":102},"Есть строка, состоящая из разных скобок, необходимо проверить, закрыты ли все","/technical-interview/tasks/there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":275,"path":276,"isActive":102}," Найти в массиве неповторяющиеся числа","/technical-interview/tasks/find-non-repeating-numbers-in-an-array",{"name":278,"path":279,"isActive":102},"Напишите функцию, который сделает из массива объект","/technical-interview/tasks/write-a-function-that-will-make-an-object-out-of-an-array",{"name":281,"path":282,"isActive":102},"Необходимо проверить, являются ли две строки анаграммами друг друга","/technical-interview/tasks/checks-whether-two-strings-are-anagrams-of-each-other",{"name":284,"path":285,"isActive":102},"Нечётные числа должны отсортироваться по возрастанию, а чётные должны остаться на своих местах","/technical-interview/tasks/odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":287,"path":288,"isActive":102},"Определить, является ли слово палиндромом","/technical-interview/tasks/determines-whether-a-word-is-a-palindrome",{"name":290,"path":291,"isActive":102},"«Расплющивание» массива","/technical-interview/tasks/flattening-the-array",{"name":293,"path":294,"isActive":102},"Реализовать функцию, принимающую аргументы \"*\", \"1\", \"b\", \"1c\" и возвращающую строку \"1*b*1c\"","/technical-interview/tasks/implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":296,"path":297,"isActive":102},"Сжатие строк","/technical-interview/tasks/string-compression",{"name":299,"path":300,"isActive":102},"Уникализация значений в массиве","/technical-interview/tasks/unifying-values-in-an-array",{"name":302,"path":303,"isActive":102},"Числа от 1 до 100 находятся в массиве, они хаотично перемешанные, но в нём не хватает одного числа из этой последовательности. Необходимо найти его","/technical-interview/tasks/the-numbers-from-1-to-100-are-in-the-array-they-are-randomly-mixed-but-it-lacks-one-number-from-this-sequence-it-is-necessary-to-find-him",{"title":305,"list":306,"isOpened":102},"React",[307,310,313,316,319,322,325],{"name":308,"path":309,"isActive":102},"Для чего нужен React, какие он решает проблемы?","/technical-interview/tasks/what-is-react-used-for-and-what-problems-does-it-solve",{"name":311,"path":312,"isActive":102},"Какой механизм лежит в основе оптимизации обновлений DOM в React?","/technical-interview/tasks/what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":314,"path":315,"isActive":102},"Если убрать в React VDOM/Fiber, и вручную изменять DOM, разве это не оптимально?","/technical-interview/tasks/if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":317,"path":318,"isActive":102},"Есть блок кода. Что в реальном DOM изменится после нажатия на кнопку?","/technical-interview/tasks/there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":320,"path":321,"isActive":102},"Есть код, в котором список и кнопка. Что в реальном DOM изменится после нажатия на кнопку?","/technical-interview/tasks/there-is-a-code-in-which-there-is-a-list-and-a-button-what-will-change-in-the-real-dom-after-clicking-on-the-button",{"name":323,"path":324,"isActive":102},"Зачем нужен Redux (Mobx/Effector)? Зачем нужен менеджер состояния? Какие проблемы решает?","/technical-interview/tasks/why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":326,"path":327,"isActive":102},"Что мешает организовать централизованное состояние без менеджера состояния? Если организовать состояние механизмами реакта: контекстом, стейтом, в чем проблема? Что менеджеры состояния привносят?","/technical-interview/tasks/what-prevents-you-from-organizing-a-centralized-state-without-a-state-manager-if-you-organize-the-state-using-react-context-and-state-mechanisms-what-is-the-problem-what-do-state-managers-add",{"title":329,"list":330,"isOpened":102},"Алгоритмы",[331,334],{"name":332,"path":333,"isActive":102},"Что такое алгоритмическая сложность?","/technical-interview/tasks/what-is-algorithmic-complexity",{"name":335,"path":336,"isActive":102},"Какая алгоритмическая сложность у \"быстрой сортировки\"?","/technical-interview/tasks/what-is-the-algorithmic-complexity-of-quick-sort",{"title":338,"list":339,"isOpened":102},"Дебаггинг",[340],{"name":341,"path":342,"isActive":102},"Как диагностировать и исправить нежелательное изменение цвета фона по клику на кнопку, если исходный код сайта запутан и недоступен для прямого чтения?","/technical-interview/tasks/how-can-diagnose-and-fix-unwanted-background-color-changes-when-clicking-on-a-button-if-the-source-code-of-the-site-is-confusing-and-inaccessible-to-direct-reading",{"title":344,"list":345,"isOpened":102},"Компьютерные сети",[346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403],{"name":347,"path":348,"isActive":102},"Как браузер после ввода домена понимает, откуда брать сайт?","/technical-interview/tasks/how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":350,"path":351,"isActive":102},"Что такое DNS, как DNS находит нужный IP-адрес?","/technical-interview/tasks/what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":353,"path":354,"isActive":102},"Как домен попадает в DNS в таблицу соответствия: домен – ip","/technical-interview/tasks/how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":356,"path":357,"isActive":102},"Как браузер решает, какое соединение ему открывать, TCP или UDP?","/technical-interview/tasks/how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":359,"path":360,"isActive":102},"Ключевые отличия TCP и UDP","/technical-interview/tasks/key-differences-between-tcp-and-udp",{"name":362,"path":363,"isActive":102},"\"TCP/IP\" - кем является TCP, а кем IP в данном случае?","/technical-interview/tasks/tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":365,"path":366,"isActive":102},"Что такое HTTP и из чего состоит?","/technical-interview/tasks/what-is-http-and-what-does-it-consist-of",{"name":368,"path":369,"isActive":102},"Что такое заголовки в HTTP и зачем они нужны?","/technical-interview/tasks/what-are-http-headers-and-why-do-we-need-them",{"name":371,"path":372,"isActive":102},"Что такое параметры в HTTP?","/technical-interview/tasks/what-are-http-parameters",{"name":374,"path":375,"isActive":102},"Где находится HTML-код в структуре HTTP-ответа?","/technical-interview/tasks/where-is-the-html-code-located-in-the-http-response-structure",{"name":377,"path":378,"isActive":102},"Чем отличаются 1.0, 1.1, 2.0, 3.0 версии HTTP?","/technical-interview/tasks/what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":380,"path":381,"isActive":102},"Пользователь авторизован на сайте. Как сервер узнает об этом с последующими другими заходами, что «я – авторизованный пользователь»?","/technical-interview/tasks/the-user-is-logged-in-on-the-website-how-does-the-server-know-that-i-am-an-authorized-user-when-the-user-logs-in-again",{"name":383,"path":384,"isActive":102},"Что такое cookie?","/technical-interview/tasks/what-is-a-cookie",{"name":386,"path":387,"isActive":102},"Кто является инициатором записи cookie в браузере?","/technical-interview/tasks/who-initiates-the-cookie-recording-in-the-browser",{"name":389,"path":390,"isActive":102},"Есть ли возможность с клиента (с браузера) управлять cookie?","/technical-interview/tasks/is-it-possible-to-manage-cookies-from-the-client-browser",{"name":392,"path":393,"isActive":102},"Верно ли утверждение, что злоумышленник, контролирующий роутер и прослушивающий трафик, может получить логины и пароли от сайтов, на которые заходит клиент?","/technical-interview/tasks/is-it-true-that-an-attacker-who-controls-a-router-and-listens-to-traffic-can-obtain-logins-and-passwords-from-websites-that-a-client-visits",{"name":395,"path":396,"isActive":102},"Всё, что идет по HTTPS – оно защищено?","/technical-interview/tasks/is-everything-that-goes-through-https-secure",{"name":398,"path":399,"isActive":102},"Все данные зашифрованы, используется https. Хакер взламывает dns и делает подмену одного ip на другой, на фишинговый сайт. В этом случае, злоумышленник может получить данные (логин \\ пароль)?","/technical-interview/tasks/all-data-is-encrypted-https-is-used-let-s-assume-a-hacker-hacks-the-dns-and-makes-a-substitution-of-one-ip-for-another-a-phishing-site",{"name":401,"path":402,"isActive":102},"Есть веб-приложение. Помимо HTTP, какие протоколы того же уровня (Application Layer) можно дополнительно использовать в веб-приложении в браузере?","/technical-interview/tasks/there-is-a-web-application-in-addition-to-http-what-other-protocols-of-the-same-level-application-layer-can-be-used-in-the-web-application-in-browser",{"name":404,"path":405,"isActive":102},"Каким способом может выполняться авторизация пользователя на сайте?","/technical-interview/tasks/how-can-a-user-be-authorized-on-a-website",{"title":407,"list":408,"isOpened":102},"Отрисовка в браузере",[409,412,415,418,421,424],{"name":410,"path":411,"isActive":102},"Что происходит, когда HTTP прислал HTML? Что браузер дальше делает c HTML с учетом того, что она валидная?","/technical-interview/tasks/what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":413,"path":414,"isActive":102},"Как браузер парсит JavaScript и изображения при рендеринге?","/technical-interview/tasks/how-the-browser-parses-javascript-and-images-when-rendering",{"name":416,"path":417,"isActive":102},"Что в браузере блокирует рендеринг страницы?","/technical-interview/tasks/what-is-blocking-the-page-rendering-in-the-browser",{"name":419,"path":420,"isActive":102},"Что такое DOM в браузере? Что такое CSSOM?","/technical-interview/tasks/what-is-dom-in-a-browser-what-is-cssom",{"name":422,"path":423,"isActive":102},"Что является узлами в DOM?","/technical-interview/tasks/what-are-nodes-in-the-dom",{"name":425,"path":426,"isActive":102},"Из чего состоит CSSOM?","/technical-interview/tasks/what-does-cssom-consist-of",{"title":428,"list":429,"isOpened":102},"Ревью кода",[430],{"name":431,"path":432,"isActive":102},"По каким характеристикам, ревьюер понимает, что данный код - хороший, а этот код - плохой?","/technical-interview/tasks/how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"title":434,"list":435,"isOpened":102},"Теория вероятности",[436,439,442],{"name":437,"path":438,"isActive":102},"В комнате три человека. Какова вероятность того, что хотя бы двое из них одного пола? То есть два и более.","/technical-interview/tasks/there-are-three-people-in-the-room-what-is-the-probability-that-at-least-two-of-them-are-of-the-same-sex-that-is-two-or-more",{"name":440,"path":441,"isActive":102},"Есть монета. Ее подбрасывают пять раз подряд. Каждый раз записывается, что выпало - орел или решка. Сколько разных последовательностей орлов и решек может при этом получиться?","/technical-interview/tasks/there-is-a-coin-it-is-tossed-five-times-in-a-row-each-time-it-is-recorded-whether-it-lands-on-heads-or-tails-how-many-different-sequences-of-heads-and-tails-can-be-obtained",{"name":443,"path":444,"isActive":102},"Как гарантированно найти лёгкую фальшивую монету среди 8 за минимальное число взвешиваний на чашечных весах?","/technical-interview/tasks/how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"slugs":446},[447,450,452,454,456,459,462,464,466,468,470,472,475,477,479,481,483,485,487,489,491,493,495,497,499,501,503,505,507,509,511,513,515,517,519,521,523,525,527,529,531,533,535,537,539,541,543,545,547,549,551,553,555,557,559,561,563,565,567,569,571,573,575,577,579,581,583,585,587,589,591,593,595,597,599,601,603,605,607,609,611,613,615,617,619,621,623,625,627,629,631,633,635,637,639,641,643,645,647,649,651,653,655,656,658,660,662,664],{"name":448,"value":449},"Теоретические задания","theoretical-tasks",{"name":204,"value":451},"what-this-code-will-return-typeof-function",{"name":103,"value":453},"where-to-begin",{"name":171,"value":455},"why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":457,"value":458},"Backend","backend",{"name":460,"value":461},"Frontend","frontend",{"name":168,"value":463},"prototype-what-logical-values-will-be-received-in-console-log",{"name":284,"value":465},"odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":275,"value":467},"find-non-repeating-numbers-in-an-array",{"name":249,"value":469},"arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":7,"value":471},"the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":473,"value":474},"Реализовать функцию, похоже как в Jquery","implement-a-function-similar-to-jquery",{"name":260,"value":476},"for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":177,"value":478},"what-value-will-the-console-output-with-object-property",{"name":180,"value":480},"what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":252,"value":482},"returns-an-array-from-1-to-n-replacing-numbers-that-are-multiples-of-3-with-fizz-numbers-that-are-multiples-of-5-with-buzz-and-numbers-that-are-multiples-of-both-3-and-5-with-fizzbuzz",{"name":281,"value":484},"checks-whether-two-strings-are-anagrams-of-each-other",{"name":287,"value":486},"determines-whether-a-word-is-a-palindrome",{"name":266,"value":488},"there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":293,"value":490},"implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":257,"value":492},"given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":263,"value":494},"for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":269,"value":496},"there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":302,"value":498},"the-numbers-from-1-to-100-are-in-the-array-they-are-randomly-mixed-but-it-lacks-one-number-from-this-sequence-it-is-necessary-to-find-him",{"name":272,"value":500},"there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":278,"value":502},"write-a-function-that-will-make-an-object-out-of-an-array",{"name":183,"value":504},"what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":186,"value":506},"there-is-a-function-and-an-object-write-all-the-ways-you-know-to-output-the-value-of-x-from-an-object-in-the-console-using-the-function",{"name":198,"value":508},"what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":201,"value":510},"what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":299,"value":512},"unifying-values-in-an-array",{"name":290,"value":514},"flattening-the-array",{"name":189,"value":516},"what-will-the-book-get-upper-name-method-return",{"name":296,"value":518},"string-compression",{"name":195,"value":520},"what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":207,"value":522},"what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":347,"value":524},"how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":353,"value":526},"how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":356,"value":528},"how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":359,"value":530},"key-differences-between-tcp-and-udp",{"name":362,"value":532},"tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":365,"value":534},"what-is-http-and-what-does-it-consist-of",{"name":368,"value":536},"what-are-http-headers-and-why-do-we-need-them",{"name":371,"value":538},"what-are-http-parameters",{"name":374,"value":540},"where-is-the-html-code-located-in-the-http-response-structure",{"name":162,"value":542},"what-is-html",{"name":377,"value":544},"what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":380,"value":546},"the-user-is-logged-in-on-the-website-how-does-the-server-know-that-i-am-an-authorized-user-when-the-user-logs-in-again",{"name":383,"value":548},"what-is-a-cookie",{"name":386,"value":550},"who-initiates-the-cookie-recording-in-the-browser",{"name":389,"value":552},"is-it-possible-to-manage-cookies-from-the-client-browser",{"name":554,"value":79},"Лайвкодинг",{"name":174,"value":556},"what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":395,"value":558},"is-everything-that-goes-through-https-secure",{"name":398,"value":560},"all-data-is-encrypted-https-is-used-let-s-assume-a-hacker-hacks-the-dns-and-makes-a-substitution-of-one-ip-for-another-a-phishing-site",{"name":401,"value":562},"there-is-a-web-application-in-addition-to-http-what-other-protocols-of-the-same-level-application-layer-can-be-used-in-the-web-application-in-browser",{"name":413,"value":564},"how-the-browser-parses-javascript-and-images-when-rendering",{"name":410,"value":566},"what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":416,"value":568},"what-is-blocking-the-page-rendering-in-the-browser",{"name":419,"value":570},"what-is-dom-in-a-browser-what-is-cssom",{"name":422,"value":572},"what-are-nodes-in-the-dom",{"name":425,"value":574},"what-does-cssom-consist-of",{"name":123,"value":576},"the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":126,"value":578},"there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":129,"value":580},"there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":132,"value":582},"there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":135,"value":584},"there-is-an-html-code-will-font-weight-affect-span",{"name":138,"value":586},"what-are-the-differences-between-flexbox-and-grid",{"name":141,"value":588},"do-flexbox-and-grid-replace-each-other",{"name":144,"value":590},"there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"name":107,"value":592},"tasks",{"name":210,"value":594},"what-are-the-ways-to-declare-a-function-in-javascript",{"name":213,"value":596},"what-is-this-in-javascript",{"name":216,"value":598},"what-is-an-event-loop-and-how-does-it-work",{"name":219,"value":600},"what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":222,"value":602},"what-does-the-typeof-operator-show-in-javascript",{"name":225,"value":604},"what-types-of-data-exist-in-javascript",{"name":228,"value":606},"what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":231,"value":608},"what-will-typeof-return-for-an-array",{"name":234,"value":610},"why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":237,"value":612},"if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":240,"value":614},"what-does-typeof-return-for-new-set-in-javascript",{"name":308,"value":616},"what-is-react-used-for-and-what-problems-does-it-solve",{"name":314,"value":618},"if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":317,"value":620},"there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":320,"value":622},"there-is-a-code-in-which-there-is-a-list-and-a-button-what-will-change-in-the-real-dom-after-clicking-on-the-button",{"name":323,"value":624},"why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":341,"value":626},"how-can-diagnose-and-fix-unwanted-background-color-changes-when-clicking-on-a-button-if-the-source-code-of-the-site-is-confusing-and-inaccessible-to-direct-reading",{"name":150,"value":628},"developed-it-committed-it-and-launched-it-it-turned-out-that-i-had-pushed-it-to-the-wrong-branch-or-rather-the-commit-was-in-the-wrong-branch-what-actions",{"name":153,"value":630},"git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":156,"value":632},"what-are-the-branching-strategies-for-the-team-what-is-it",{"name":431,"value":634},"how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"name":114,"value":636},"here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":117,"value":638},"here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"name":332,"value":640},"what-is-algorithmic-complexity",{"name":335,"value":642},"what-is-the-algorithmic-complexity-of-quick-sort",{"name":243,"value":644},"why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":404,"value":646},"how-can-a-user-be-authorized-on-a-website",{"name":246,"value":648},"what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":437,"value":650},"there-are-three-people-in-the-room-what-is-the-probability-that-at-least-two-of-them-are-of-the-same-sex-that-is-two-or-more",{"name":440,"value":652},"there-is-a-coin-it-is-tossed-five-times-in-a-row-each-time-it-is-recorded-whether-it-lands-on-heads-or-tails-how-many-different-sequences-of-heads-and-tails-can-be-obtained",{"name":443,"value":654},"how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"name":96,"value":97},{"name":392,"value":657},"is-it-true-that-an-attacker-who-controls-a-router-and-listens-to-traffic-can-obtain-logins-and-passwords-from-websites-that-a-client-visits",{"name":350,"value":659},"what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":192,"value":661},"variables-are-declared-as-follows-specify-the-correct-statement",{"name":311,"value":663},"what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":326,"value":665},"what-prevents-you-from-organizing-a-centralized-state-without-a-state-manager-if-you-organize-the-state-using-react-context-and-state-mechanisms-what-is-the-problem-what-do-state-managers-add",{"cooperation":667,"copyright":670,"reportError":671,"socialNetwork":673},{"link":668,"title":669},"https://t.me/baurinanton","Сотрудничество","© “GOOD WEB JOB!”",{"label":672,"link":668},"Сообщить об ошибке",{"label":674,"socialNetworkList":675},"Мы в соцсетях:",[676,679,682],{"icon":84,"link":677,"title":678},"https://max.ru/u/f9LHodD0cOKMaukdnnahTeL5pwvjrPfUaZ4S8_1rsNy9I9qsmc9Ar3kP_y8","Max",{"icon":680,"link":668,"title":681},"ic:baseline-telegram","Telegram",{"icon":683,"link":684,"title":685},"ri:vk-fill","https://vk.com/baurinanton","VK",{"data":687,"body":688},{},{"type":689,"children":690},"root",[691,699,712,732,741,746],{"type":692,"tag":693,"props":694,"children":695},"element","p",{},[696],{"type":697,"value":698},"text","Дана строка:",{"type":692,"tag":700,"props":701,"children":705},"pre",{"className":702,"code":704,"language":697},[703],"language-text","const str = 'one.two.three.four.five';\n",[706],{"type":692,"tag":707,"props":708,"children":710},"code",{"__ignoreMap":709},"",[711],{"type":697,"value":704},{"type":692,"tag":693,"props":713,"children":714},{},[715,717,722,724,730],{"type":697,"value":716},"Необходимо написать функцию ",{"type":692,"tag":707,"props":718,"children":720},{"className":719},[],[721],{"type":697,"value":75},{"type":697,"value":723},", которая аргументом принимает строку вида: ",{"type":692,"tag":707,"props":725,"children":727},{"className":726},[],[728],{"type":697,"value":729},"'one.two.three.four.five'",{"type":697,"value":731}," и возвращает вложенный объект из полей one, two, three, four, five.",{"type":692,"tag":700,"props":733,"children":736},{"className":734,"code":735,"language":697},[703],"const obj = generateObject('one.two.three.four.five') \n\n// Возвращаемое значение функции:\n{\n  \"one\": {\n    \"two\": {\n      \"three\": {\n        \"four\": {\n          \"five\": {}\n        }\n      }\n    }\n  }\n} \n",[737],{"type":692,"tag":707,"props":738,"children":739},{"__ignoreMap":709},[740],{"type":697,"value":735},{"type":692,"tag":693,"props":742,"children":743},{},[744],{"type":697,"value":745},"Примеры:",{"type":692,"tag":700,"props":747,"children":750},{"className":748,"code":749,"language":697},[703],"// Параметр функции:\n\"one.two.three.four.five\"\n\n// Возвращаемое значение функции:\n{\n  \"one\": {\n    \"two\": {\n      \"three\": {\n        \"four\": {\n          \"five\": {}\n        }\n      }\n    }\n  }\n}\n\n// Параметр функции:\n\"five.four.three.two.one\"\n\n// Возвращаемое значение функции:\n{\n  \"five\": {\n    \"four\": {\n      \"three\": {\n        \"two\": {\n          \"one\": {}\n        }\n      }\n    }\n  }\n}\n\n// Параметр функции:\n\"five.four.three\"\n\n// Возвращаемое значение функции:\n{\n  \"five\": {\n    \"four\": {\n      \"three\": {}\n    }\n  }\n}\n",[751],{"type":692,"tag":707,"props":752,"children":753},{"__ignoreMap":709},[754],{"type":697,"value":749},{"data":756,"body":757},{},{"type":689,"children":758},[759],{"type":692,"tag":693,"props":760,"children":761},{},[762,764,768,770,776],{"type":697,"value":763},"Задача сводится к двум шагам: (1) преобразование строки в массив ключей, (2) последовательное построение объекта по этим ключам.",{"type":692,"tag":765,"props":766,"children":767},"br",{},[],{"type":697,"value":769},"\nДля шага (1) применяется ",{"type":692,"tag":707,"props":771,"children":773},{"className":772},[],[774],{"type":697,"value":775},"split('.')",{"type":697,"value":777},", который разбивает строку по разделителю и возвращает массив подстрок; при точке в начале/конце строки в массив попадают пустые элементы.",{"data":779,"body":780},{},{"type":689,"children":781},[782,787,796,801],{"type":692,"tag":693,"props":783,"children":784},{},[785],{"type":697,"value":786},"Пример разбиения:",{"type":692,"tag":700,"props":788,"children":791},{"className":789,"code":790,"language":697},[703],"\"one.two.three\".split(\".\")  // [\"one\", \"two\", \"three\"]\n\".a..b.\".split(\".\")         // [\"\", \"a\", \"\", \"b\", \"\"]\n",[792],{"type":692,"tag":707,"props":793,"children":794},{"__ignoreMap":709},[795],{"type":697,"value":790},{"type":692,"tag":693,"props":797,"children":798},{},[799],{"type":697,"value":800},"Поэтому часто добавляются:",{"type":692,"tag":802,"props":803,"children":804},"ul",{},[805,817],{"type":692,"tag":806,"props":807,"children":808},"li",{},[809,815],{"type":692,"tag":707,"props":810,"children":812},{"className":811},[],[813],{"type":697,"value":814},"trim()",{"type":697,"value":816}," для удаления пробелов вокруг сегментов (если строка могла содержать пробелы).",{"type":692,"tag":806,"props":818,"children":819},{},[820,826,828,834],{"type":692,"tag":707,"props":821,"children":823},{"className":822},[],[824],{"type":697,"value":825},"filter(Boolean)",{"type":697,"value":827}," для удаления пустых сегментов (",{"type":692,"tag":707,"props":829,"children":831},{"className":830},[],[832],{"type":697,"value":833},"\"\"",{"type":697,"value":835},"), чтобы не создавать ключи-пустые строки.",{"data":837,"body":838},{},{"type":689,"children":839},[840,845,850,859],{"type":692,"tag":693,"props":841,"children":842},{},[843],{"type":697,"value":844},"Идея «оборачивания» справа налево особенно наглядна.",{"type":692,"tag":693,"props":846,"children":847},{},[848],{"type":697,"value":849},"Схема (ключи справа налево):",{"type":692,"tag":700,"props":851,"children":854},{"className":852,"code":853,"language":697},[703],"parts = [\"one\", \"two\", \"three\"]\n\nstart: acc = {}\nstep:  key = \"three\" => { \"three\": {} }\nstep:  key = \"two\"   => { \"two\": { \"three\": {} } }\nstep:  key = \"one\"   => { \"one\": { \"two\": { \"three\": {} } } }\n",[855],{"type":692,"tag":707,"props":856,"children":857},{"__ignoreMap":709},[858],{"type":697,"value":853},{"type":692,"tag":693,"props":860,"children":861},{},[862,864,870],{"type":697,"value":863},"Именно это делает ",{"type":692,"tag":707,"props":865,"children":867},{"className":866},[],[868],{"type":697,"value":869},"reduceRight()",{"type":697,"value":871},": применяет функцию свёртки к элементам массива справа налево.",{"data":873,"body":874},{},{"type":689,"children":875},[876],{"type":692,"tag":693,"props":877,"children":878},{},[879,881,887,889,895],{"type":697,"value":880},"Нельзя создать всю цепочку вложенности одним присваиванием, потому что перед записью ",{"type":692,"tag":707,"props":882,"children":884},{"className":883},[],[885],{"type":697,"value":886},"cursor[key]",{"type":697,"value":888}," должен существовать объект ",{"type":692,"tag":707,"props":890,"children":892},{"className":891},[],[893],{"type":697,"value":894},"cursor",{"type":697,"value":896},", а перед ним — объект выше, и так далее. Поэтому обязательно требуется либо цикл, либо рекурсия, либо свёртка массива.",{"data":898,"body":899},{},{"type":689,"children":900},[901],{"type":692,"tag":902,"props":903,"children":904},"table",{},[905,934],{"type":692,"tag":906,"props":907,"children":908},"thead",{},[909],{"type":692,"tag":910,"props":911,"children":912},"tr",{},[913,919,924,929],{"type":692,"tag":914,"props":915,"children":916},"th",{},[917],{"type":697,"value":918},"Подход",{"type":692,"tag":914,"props":920,"children":921},{},[922],{"type":697,"value":923},"Как читается",{"type":692,"tag":914,"props":925,"children":926},{},[927],{"type":697,"value":928},"Плюсы",{"type":692,"tag":914,"props":930,"children":931},{},[932],{"type":697,"value":933},"Минусы",{"type":692,"tag":935,"props":936,"children":937},"tbody",{},[938,966,995,1018],{"type":692,"tag":910,"props":939,"children":940},{},[941,951,956,961],{"type":692,"tag":942,"props":943,"children":944},"td",{},[945],{"type":692,"tag":707,"props":946,"children":948},{"className":947},[],[949],{"type":697,"value":950},"reduceRight",{"type":692,"tag":942,"props":952,"children":953},{},[954],{"type":697,"value":955},"«оборачивать» справа налево",{"type":692,"tag":942,"props":957,"children":958},{},[959],{"type":697,"value":960},"Коротко, без мутаций",{"type":692,"tag":942,"props":962,"children":963},{},[964],{"type":697,"value":965},"Требуется понимание свёртки справа налево",{"type":692,"tag":910,"props":967,"children":968},{},[969,980,985,990],{"type":692,"tag":942,"props":970,"children":971},{},[972,974],{"type":697,"value":973},"Цикл ",{"type":692,"tag":707,"props":975,"children":977},{"className":976},[],[978],{"type":697,"value":979},"for",{"type":692,"tag":942,"props":981,"children":982},{},[983],{"type":697,"value":984},"шаг за шагом по массиву",{"type":692,"tag":942,"props":986,"children":987},{},[988],{"type":697,"value":989},"Максимально наглядно",{"type":692,"tag":942,"props":991,"children":992},{},[993],{"type":697,"value":994},"Мутация объекта (для задачи обычно нормально)",{"type":692,"tag":910,"props":996,"children":997},{},[998,1003,1008,1013],{"type":692,"tag":942,"props":999,"children":1000},{},[1001],{"type":697,"value":1002},"Рекурсия",{"type":692,"tag":942,"props":1004,"children":1005},{},[1006],{"type":697,"value":1007},"«ключ + остаток»",{"type":692,"tag":942,"props":1009,"children":1010},{},[1011],{"type":697,"value":1012},"Хорошо объясняет вложенность",{"type":692,"tag":942,"props":1014,"children":1015},{},[1016],{"type":697,"value":1017},"Возможны ограничения стека на очень больших входах",{"type":692,"tag":910,"props":1019,"children":1020},{},[1021,1032,1037,1042],{"type":692,"tag":942,"props":1022,"children":1023},{},[1024,1030],{"type":692,"tag":707,"props":1025,"children":1027},{"className":1026},[],[1028],{"type":697,"value":1029},"Object.create(null)",{"type":697,"value":1031}," + фильтры",{"type":692,"tag":942,"props":1033,"children":1034},{},[1035],{"type":697,"value":1036},"как цикл, но безопаснее",{"type":692,"tag":942,"props":1038,"children":1039},{},[1040],{"type":697,"value":1041},"Снижение рисков от «опасных» ключей",{"type":692,"tag":942,"props":1043,"children":1044},{},[1045],{"type":697,"value":1046},"Чуть больше кода",{"data":1048,"body":1049},{},{"type":689,"children":1050},[1051],{"type":692,"tag":693,"props":1052,"children":1053},{},[1054,1056,1061,1063,1068,1070,1075,1077,1082,1084,1090],{"type":697,"value":1055},"Кратко: строка с точками сначала превращается в массив ключей через ",{"type":692,"tag":707,"props":1057,"children":1059},{"className":1058},[],[1060],{"type":697,"value":775},{"type":697,"value":1062}," (часто с очисткой ",{"type":692,"tag":707,"props":1064,"children":1066},{"className":1065},[],[1067],{"type":697,"value":814},{"type":697,"value":1069}," и удалением пустых сегментов ",{"type":692,"tag":707,"props":1071,"children":1073},{"className":1072},[],[1074],{"type":697,"value":825},{"type":697,"value":1076},"), после чего вложенный объект строится либо циклом слева направо через «курсор», либо «оборачиванием» справа налево через ",{"type":692,"tag":707,"props":1078,"children":1080},{"className":1079},[],[1081],{"type":697,"value":950},{"type":697,"value":1083},", начиная с пустого объекта ",{"type":692,"tag":707,"props":1085,"children":1087},{"className":1086},[],[1088],{"type":697,"value":1089},"{}",{"type":697,"value":1091},".",1775575822690]