Алексей Уколов

IntersectionObserver нужен, чтобы следить за тем, что какой-то конкретный элемент пересёкся с каким-то другим элементом или видимой областью экрана. Соответственно, потребность следить за "всей страницей" - это нечто странное и это невозможно. Все элементы всегда пересекаются с body и body всегда пересекается с вьюпортом.

Браузерная консоль показывает содержимое объектов в том виде, в котором они находятся в данный момент, а не в момент логирования - такая вот у неё особенность в целях экономии памяти. Обратите внимание, что на вашем скриншоте изначально написано, что в массиве два элемента, как это было на момент логирования, а вот при разворачивании показывается уже текущее состояние.
Чтобы этого избежать, приходится делать так:
console.log({...names});

Но, если в объекте находятся другие объекты (как у вас) и они изменяются тоже, то простое копирование не поможет.
Поэтому используют вот такую конструкцию:
console.log(JSON.parse(JSON.stringify(data)));
Есть и другие способы сделать глубокую копию объекта, но я для этих целей предпочитаю такой.

Это делается не так. При смене таба вам просто нужно добавлять запись в History API и всё будет работать так, как вы хотите, автоматически.
Событием beforeunload злоупотребляют спамеры, поэтому полагаться на него не стоит (не говоря о том, что это костыль).

Даю удочку, не рыбу. Тут три составляющих:

• Итерация по ключам-значениям объекта. Способов несколько, все описаны на первых страницах любого учебника.
  
• Сохранение значения конкретного стиля. Тоже элементарно: element.style.backgroundColor = value.
  
• Использование переменной в качестве названия свойства. Тоже на первых страницах учебника.
  

Но перед этим нужно раз и навсегда уяснить разницу между массивом и объектом в js и использовать корректные термины.

Здесь можно даже и не заподозрить, что then что-то возвращает.

Все функции в js что-то возвращают. Если явного return нет или в нём не указано значение, то возвращается undefined.

Но поскольку там null, можно подумать, что исходный промис просто как-то передается дальше.

Так и есть - вы не передали никакой callback и весь этот вызов как бы игнорируется. Этот сценарий аналогичен предыдущему.

Еще интереснее - then возвращает простое значение, которое моментально попадает в следующий then.

Это ваш callback возвращает простое значение, которое then оборачивает в отрезолвленный промис.

Можете рассказать в общих чертах, если then возвращает промис, то как он его формирует?

Ну берёт и формирует... Примерно так:

then = (onFulfilledCallback, onRejectedCallback) => {
  try {
    let newValue;

    if (this.previousValue instanceof Error) {
      newValue = onRejectedCallback(this.previousValue);
    } else {
      newValue = onFulfilledCallback(this.previousValue);
    }

    if (newValue instanceof Promise) {
      return newValue;
    } else {
      return Promise.resolve(newValue);
    }
  } catch (error) {
    return Promise.reject(error);    
  }
}

Это псеводокод но общий смысл такой.

let makeItDouble = (text) => {
  let i = text + text;
  return i;
};

console.log(makeItDouble("I never look back"));

Return всё прекрасно возвращает. Но то, что он возвращает, нужно сохранять в переменную или использовать сразу. Переменная i находится внутри функции и снаружи недоступна. Если бы можно было делать так, как вы написали, то и смысла в return бы не было.

А как вы код написали, если не можете понять, как он работает?

Вы открывали документацию функции, читали, что она делает и какие аргументы принимает?
Ну, давайте я вам её сюда скопирую:

Parameters
indexStart
The index of the first character to include in the returned substring.
indexEnd Optional
The index of the first character to exclude from the returned substring.
Description
If indexStart < 0, the index is counted from the end of the string. More formally, in this case, the substring starts at max(indexStart + str.length, 0).
If indexEnd < 0, the index is counted from the end of the string. More formally, in this case, the substring ends at max(indexEnd + str.length, 0).

зачем нужен (-2, -1)

Для выполнения вот этого условия задачи: "если слово заканчивается на мягкий знак, то получите предпоследнюю букву". Я искренне не понимаю, что тут можно добавить...

Ошибка первая: вы в sliceHandler передаёте div-обёртку, а внутри функции думаете, что это какой-то его ребёнок.
Ошибка вторая: вы пытаетесь получить реактовское служебное свойство key через атрибут html-тега. Значение key даже через props нельзя получить, не говоря уже про html.

Давайте вы своими словами опишете, чего хотите добиться и зачем, а мы вам подскажем, как это сделать правильно.

А что, стрелочные функции не принимают аргументов или не возвращают результат? Или делают это как-то иначе? Или они не являются функциями?
Вопросы риторические.

"Говорите" про них ровно так же, как про обычные. Когда окажется важным, что это именно стрелочная функция (а это бывает довольно редко), так и уточняйте.

Самое простое и надёжное - проверять наличие элемента каждые N секунд (например, 5):

setInterval(function () {
  const $element = document.querySelector("#content > div > div.taskblackout");

  if ($element && $element.style.display === 'block') {
    document.location.reload()
  }
}, 5000);

Единственный минус этого решения - задержка. Элемент может появиться сразу после срабатывания и провисит эти N секунд.
Ещё, если вы часто уходите с этой вкладки, может накопиться очередь из интервалов - в этом случае лучше заменить на setTimeout, который внутри будет вызывать следующий setTimeout:

const check = () => {
  const $element = document.querySelector("#content > div > div.taskblackout");

  if ($element && $element.style.display === 'block') {
    document.location.reload()
  } else {
    setTimeout(check, 5000);
  }
};

setTimeout(check, 5000);

Почему бы не получать кнопку просто через event.target? А this прибить к вашему объекту.

Очевидно, что входящий --test и --test в объекте не равны. Пробелы там, спецсимволы, ещё что-то. Другого варианта просто нет.

Обработчиков у вас в любом случае 200 вешается.
Вся разница в том, что в первом случае они ссылаются на двести функций, а во втором на одну.
Создание функции требует определённых ресурсов, поэтому оверхед есть. Будет ли он заметным — это другой вопрос. Ответ на него зависит от того, что на самом деле в вашем коде происходит. На компьютере вы, скорее всего, разницы никогда не почувствуете, а вот на очень слабом телефоне при огромном количестве функций может начать тормозить.

P.S. Проще использовать делегирование в таких случаях.

Предполагаю, что есть какая-то возможность на этапе проверки IP-адреса в условии if-else прервать выполнение показа страницы и показать ее после прохождения капчи.

Нет такой возможности.

Вариантов развития событий два:

1. Вы используете неверное сравнение. Например, у вас в target.innerHTML есть пробелы по краям, или какие-то теги, или не совпадает регистр.
   
2. Условие срабатывает верно, но поскольку вы меняете стиль одного и того же элемента, вы не учитываете предыдущие или последующие итерации.
   

Сделайте пример в песочнице и мы вас скажем точно, в чём проблема.

Метода нет, но полно библиотек, которые это делают. Но можно и самостоятельно вот к такой простой конструкции привести исходную строку: +new Date('2024', +'02' - 1, '01') / 1000.

Никак, вы чего-то очень странного хотите. Квадратные скобки используются для работы с объектом (получение или изменение значений его свойств), через них никак нельзя изменить значение переменной, которую вы в скобках используете.
Если вы хотите получить «50», то это делается так: info['10']['5'][propName]

Вы пытаетесь в качестве имени свойства использовать объект, а JS разрешает там только строки.
Объект приводится к строке и ваш код превращается в итоге вот в это:

dwayne['[object Object]'] = 123;
dwayne['[object Object]'] = 456;

console.log(dwayne['[object Object]']);

Думаю, тут уже понятно, почему результат именно такой.

При этом, если бы вы использовали другой синтаксис, то и результат был бы другим:

dwayne.daniel = 123; // аналог dwayne['daniel']
dwayne.jason = 456; // аналог dwayne['jason']

console.log(dwayne.daniel);

Но эти daniel и jason никак не связаны с одноимёнными объектами выше.

Метод querySelectorAll возвращает коллекцию элементов и у неё нет свойства onclick, метода addEventListener и т.п.
По коллекции нужно итерировать и назначать обработчик события для каждого элемента в отдельности.
Как это сделать, написано в каждом первом учебнике JavaScript.

Не является. Массив используется на хранения списка значений, в нём нет никаких "имён".
Значения с "именами" можно хранить либо в объекте, либо в специальном типе Map.

Но при этом, если речь про значения примитивных типов, то при их добавлении в объект или Map теряется связь с изначальной переменной, откуда значение было взято.

let a = 3;
let b = 15;

let one = {};

one.a = a;
one.b = b;

a = 42;

console.log(one.a, one.b); // 3, 15
console.log(a, b); // 42, 15

let a = 3;
let b = 15;

let two = new Map();

two.set('a', a);
two.set('b', b);

a = 42;

console.log(two.get('a'), two.get('b')); // 3, 15
console.log(a, b); // 42, 15