Как можно еще записать += 1?

Разные способы написать += 1 в JavaScript

Здесь кроется много нюансов - от простых операторов до функциональных подходов. Рассказу все варианты от базовых до продвинутых.

1. Базовые способы с операторами

Самые простые и понятные варианты:

let count = 0;

// += 1 (исходный вариант)
count += 1;      // count = 1

// Эквивалентные способы
count = count + 1;     // Развернутая форма
count++;                // Постфиксный инкремент
++count;                // Префиксный инкремент

const a = count++;      // Вернет старое значение (0), потом увеличит
const b = ++count;      // Сначала увеличит, потом вернет (2)

console.log(a); // 0
console.log(b); // 2
console.log(count); // 2

2. В цикле (наиболее частый случай)

const numbers = [1, 2, 3, 4, 5];

// Классический for с ++
for (let i = 0; i < numbers.length; i++) {
  console.log(i, numbers[i]);
}

// for...of (чистее, не нужен счетчик)
for (const num of numbers) {
  console.log(num);
}

// forEach с index
numbers.forEach((num, index) => {
  console.log(index, num);
});

// while с инкрементом
let i = 0;
while (i < numbers.length) {
  console.log(i, numbers[i]);
  i++;  // или ++i, или i += 1
}

3. В React - setState

В React нельзя напрямую менять state, используйте setter функцию:

function Counter() {
  const [count, setCount] = useState(0);

  // Все эти способы эквивалентны
  const increment = () => {
    setCount(count + 1);           // Форма 1: count + 1
    setCount(c => c + 1);          // Форма 2: функция (более надежна)
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(c => c + 1)}>+1 (safe)</button>
    </div>
  );
}

Почему второй способ лучше:

function Problem() {
  const [count, setCount] = useState(0);

  const doubleClick = () => {
    // ОПАСНО - count может быть кэшировано
    setCount(count + 1);
    setCount(count + 1);
    // Результат: count = 1, а не 2!
    // Потому что оба вызова используют один и тот же count
  };

  const safeDoubleClick = () => {
    // ПРАВИЛЬНО - каждый вызов получает актуальное значение
    setCount(c => c + 1);
    setCount(c => c + 1);
    // Результат: count = 2
  };

  return (
    <div>
      <button onClick={doubleClick}>Broken +2</button>
      <button onClick={safeDoubleClick}>Safe +2</button>
    </div>
  );
}

4. Постфиксный vs Префиксный инкремент

Они работают по-разному, но в большинстве случаев разницы нет:

let x = 0;

// Постфиксный - вернет старое значение, потом увеличит
const a = x++;    // a = 0, x = 1

let y = 0;

// Префиксный - сначала увеличит, потом вернет
const b = ++y;    // b = 1, y = 1

// В цикле разницы НЕТ
for (let i = 0; i < 5; i++) {}   // i++ = постфиксный
for (let i = 0; i < 5; ++i) {}   // ++i = префиксный
// Обе петли выполнят одинаково

// В массивах - НЕ ИСПОЛЬЗУЙТЕ инкремент
// ПЛОХО
const arr = [1, 2, 3];
arr[i++];      // Опасно, может быть путанница

// ХОРОШО
arr[i];
i++;

5. Функциональные подходы

// Используя reduce для подсчета
const numbers = [1, 2, 3, 4, 5];
const count = numbers.reduce((acc) => acc + 1, 0);
console.log(count); // 5

// Используя reduce с аккумулятором
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15

// Функция для инкремента
const increment = (x) => x + 1;
const result = increment(5);  // 6

// Еще выше - использовать функцию как черный ящик
const apply = (fn, value) => fn(value);
const newCount = apply(increment, 5);  // 6

6. В объектах

const stats = {
  clicks: 0,
  views: 0
};

// Способы увеличить click
stats.clicks += 1;           // Форма 1
stats.clicks = stats.clicks + 1; // Форма 2
stats.clicks++;              // Форма 3
++stats.clicks;              // Форма 4

// Или через функцию
const incrementClicks = (obj) => ({
  ...obj,
  clicks: obj.clicks + 1
});

const newStats = incrementClicks(stats);

7. Битовые операции (экзотика)

Это работает, но используется редко:

let x = 5;

// Битовое НЕ и отрицание (очень странно, но работает)
x = ~(~x - 1);   // x = 6

// Битовое И (для очень специфичных случаев)
// Обычно НЕ используется для инкремента

8. Модное ES2021 - using (экспериментально)

// Совсем новая фишка, пока редко используется
// Для управления ресурсами
const { Disposable } = require('something');

using (const resource = new Disposable()) {
  // ресурс автоматически очистится
}

9. В разных контекстах

// В Date
const date = new Date();
date.setDate(date.getDate() + 1);  // Следующий день

// В Map
const map = new Map();
const count = map.get('key') || 0;
map.set('key', count + 1);

// Или более элегантно
const counter = new Map();
const key = 'clicks';
counter.set(key, (counter.get(key) ?? 0) + 1);

// В Set - нельзя увеличить значение, только добавить/удалить
const set = new Set([1, 2, 3]);
set.delete(1);
set.add(4);

10. Что выбрать в разных ситуациях

// 1. В обычном коде - просто ++ или +=
let count = 0;
count++;  // Читается как "инкремент"
count += 1;  // Читается как "добавить 1"

// 2. В цикле - используйте i++ (стандарт)
for (let i = 0; i < 10; i++) {
  // i++ - привычно и понятно
}

// 3. В React - функция updater
const [count, setCount] = useState(0);
setCount(c => c + 1);  // Правильный способ

// 4. В функциональном коде
const increment = (x) => x + 1;
const newValue = increment(count);

// 5. С BigInt (большие целые числа)
let big = 10n;
big += 1n;  // 11n
big++;      // 12n

// 6. В TypeScript - указывайте тип
let num: number = 0;
num += 1;  // TypeScript проверит типы

Итоговая таблица

Операция         | Применение                  | Рекомендация
-                |-                            |-
x += 1           | Универсально                | Ясная, читаемая
x++              | В цикле for                 | Стандарт
++x              | Редко                       | Избегать
x = x + 1        | Явная форма                 | Для новичков
setCount(c => c+1) | React                     | Правильно
increment(x)     | Функциональный подход       | Чистый код
reduce(a => a+1) | Для функциональности       | В массивах

Выбирайте "x += 1" или "x++" в зависимости от контекста. В React ОБЯЗАТЕЛЬНО используйте функцию updater для безопасности!