0xD34F

Запрос данных асинхронен, так что рендеринг с lists равным null будет выполнен в любом случае. И вот там, где вы пытаетесь lists перебирать, проверяйте, что он не null - тогда вызывать map можно. Или устанавливайте в качестве дефолтного значения вместо null пустой массив.

Вырезаете обработчики mouseover и mouseout, динамическое назначение классов, свойство isShipHovered и метод chooseShipOnBoard.

Заменяете .hover на .square:hover - всё, больше ничего не надо. Если есть возможность что-то сделать только через css - делайте это что-то только через css.

UPD. Вынесено из комментариев:

мне нужно было использовать именно через script, потому,что я потом буду манипулировать этим методом chhoseShipOnBoard, например ещё добавлять классы к соседним блокам, чтобы при наведении выделялся не только текущий блок, но и несколько рядом находящихся блоков

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

data: () => ({
  hovered: null,
  ...
}),
methods: {
  getClasses(index) {
    return что-то, в зависимости от index и this.hovered;
  },
},

<span
  v-for="(n, i) in squares"
  @mouseover="hovered = i"
  @mouseout="hovered = null"
  :class="getClasses(i)"
>

https://jsfiddle.net/arw16jtf/

[^\/]+(?=\/$)

Я так понимаю надо какой-то фильтр применить для отображения?

Можно и фильтр:

filters: {
  numberOnly: val => /^\d+$/.test(val) ? val : '',
},

<div v-for="n in squares">
  {{ n | numberOnly }}
</div>

Но не обязательно:

<div v-for="n in squares">
  {{ Number.isNaN(+n) ? '' : n }}
</div>

Если знаете, в каких местах находятся нужные элементы, то

<div v-for="(n, i) in squares">
  {{ i % 11 ? '' : n }}
</div>

Или, если знаете сами элементы:

data: () => ({
  itemsToShow: [...Array(10)].map((n, i) => `${i + 1}`),
  ...
}),

<div v-for="n in squares">
  {{ itemsToShow.includes(n) ? n : '' }}
</div>

str.replace(/(?<!^)\+|[^\d+]/g, '')

$('.btn-show').on('click', function() {
  $(this).toggleClass('.flip');
});

Во-первых, строка, передаваемая в метод toggleClass, должна содержать имя класса, а вовсе не соответствующий селектор. Так что просто 'flip', без точки.

Во-вторых, вы пытаетесь назначить обработчик клика несуществующим элементам, так что код внутри обработчика никогда не будет выполнен. У вас уже есть делегированный обработчик клика для .btn-show - вот там и дёргайте toggleClass.

Никак.

Делайте async функцию, где будет цикл, в теле которого await fetch:

async function xxx(arr) {
  const result = [];

  for (const item of arr) {
    result.push(await fetch(...));
  }

  return result;
}

li:nth-child(5n + 2),
li:nth-child(5n + 3) {
  color: red;
}

Используйте компонент VictoryAxis и стилизуйте его:

<VictoryChart>
  <VictoryAxis
    style={{
      axis: {
        stroke: 'здесь ваш цвет',
      },
    }}
  />
</VictoryChart>

const arr = Array.from({ length: max - min + 1 }, (n, i) => i + min);

или

function* range(start, stop, step) {
  if (stop === undefined) {
    stop = start;
    start = 0;
  }

  if (start === stop) {
    step = 1;
  }

  if (step === undefined) {
    step = Math.sign(stop - start);
  }

  if (start <= stop && step > 0 || start >= stop && step < 0) {
    for (let i = start; step < 0 ? i >= stop : i <= stop; i += step) {
      yield i;
    }
  }
}


console.log(Array.from(range(3, 9))); // [3, 4, 5, 6, 7, 8, 9]

console.log([...range(-5)]); // [0, -1, -2, -3, -4, -5]

for (const n of range(100, 200, 33)) {
  console.log(n); // 100  133  166  199
}

const r = range(12, -7, -5);
for (let n; !(n = r.next()).done; ) {
  console.log(n.value); // 12  7  2  -3
}

Потому что при передаче списка в качестве параметра копируется не он сам, а ссылка на него. При рекурсивном вызове вместо mass передавайте mass.copy().

[ ' '.join(n) for n in zip(list1, list2) ]

Добавьте стили:

.child.red {
  background: red;
}

Обработчик клика пусть выглядит так: @click="n.em = !n.em".

А назначение класса так: :class="{ red: n.em }".

Останавливайте всплытие события:

$('li').click(function(e) {
  e.stopPropagation();
  $(this).closest('ul').toggleClass('red');
});

Или ловите клик только на корневом элементе списка:

$('ul').first().click(function(e) {
  $(e.target).closest('ul').toggleClass('red');
});

const replacements = {
  worksAmount: 187,
  reviewsAmount: 666,
};

const newStr = str.replace(/\$\$\[(\w+)\]/g, (m, g1) => replacements[g1] ?? m);

str.match(/(?<=\()\d+(\.\d+)?(?=\D*\))/g)

let data = {};

await fetch(url).then((res) => res.json()).then(json => {
    data = { temperature: json.main.temp }
})
return data;

Это что за дичь? Пусть будет return fetch(url).then(r => r.json());.

this.setState(() => {
    return { weather: this.askForWeather.getNeededData() }
});

Засовываете промис в стейт. Что-то сомневаюсь, что так и было задумано. Меняйте на

this.askForWeather.getNeededData().then(weather => {
  this.setState(() => ({ weather }));
});

<Main temperature={this.state.weather.temperature}/>

Пока weather имеет значение null, попытки прочитать свойства будут приводить к ошибке. Так что

{this.state.weather && <Main temperature={this.state.weather.main.temp} />}

Делаете ещё одно вычисляемое свойство - массив выбранных элементов. Геттер достаёт соответствующий массив из стора, сеттер вызывает мутацию. Используете это свойство в v-model чекбоксов. Вычисляемое свойство, управляющее выбором всех чекбоксов, переписываете следующим образом: в геттере сравниваете длины массивов всех элементов и выбранных, в сеттере устанавливаете значение вычисляемого свойства выбранных элементов. Например.

print([ k for (k, v) in d.items() if v ])

async function chain(arr) {
  const result = [];

  for (const item of arr) {
    result.push(await item(result[result.length - 1]));
  }

  return result;
}

Или

function chain(arr) {
  const result = [];

  return arr
    .reduce((prev, curr) => prev.then(curr).then(r => (result.push(r), r)), Promise.resolve())
    .then(() => result);
}