Оператор запятая (,)

Оператор запятая (,) вычисляет каждый из своих операндов (слева направо) и возвращает значение последнего операнда. Это часто используется для предоставления нескольких операторов обновления в for циклах в блоке "afterthought".

Попробуйте

let x = 1;

x = (x++, x);

console.log(x);
// Expected output: 2

x = (2, 3);

console.log(x);
// Expected output: 3

Синтаксис

expr1, expr2, expr3/* , … */

Параметры

expr1, expr2, expr3, …

Один или несколько выражений, последнее из которых возвращается как значение составного выражения.

Описание

Вы можете использовать оператор запятая, когда хотите включить несколько выражений в место, требующее одного выражения. Наиболее распространенное использование этого оператора — предоставление нескольких операторов обновления в цикле for. Для идиомы, позволяющей использовать несколько операторов в месте, требующем одного выражения, вы можете использовать IIFE.

Поскольку все выражения, кроме последнего, вычисляются, а затем отбрасываются, эти выражения должны иметь побочные эффекты, чтобы быть полезными. Распространенными выражениями с побочными эффектами являются присваивания, вызовы функций, а также операторы ++ и --. Другие также могут иметь побочные эффекты, если они вызывают геттеры или инициируют приведение типов.

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

Оператор запятая полностью отличается от запятых, используемых в качестве синтаксических разделителей в других местах, которые включают:

• Элементы в инициализаторах массивов ([1, 2, 3])
• Свойства в инициализаторах объектов ({ a: 1, b: 2 })
• Параметры в объявлениях/выражениях функций (function f(a, b) { … })
• Аргументы при вызове функций (f(1, 2))
• Списки привязки в объявлениях let, const или var (const a = 1, b = 2;)
• Списки импорта в объявлениях import (import { a, b } from "c";)
• Списки экспорта в объявлениях export (export { a, b };)

Фактически, хотя некоторые из этих мест принимают почти все выражения, они не принимают выражения, разделенные запятыми, поскольку это было бы неоднозначно с синтаксическими запятыми-разделителями. В этом случае вы должны заключить выражение, разделенное запятыми, в скобки. Например, следующее объявление const объявляет две переменные, где запятая не является оператором запятая:

const a = 1, b = 2;

Это отличается от следующего, где b = 2 является выражением присваивания, а не объявлением. Значение a равно 2, возвращаемому значению присваивания, тогда как значение 1 отбрасывается:

const a = (1, b = 2);

Операторы запятая не могут выступать в качестве завершающих запятых.

Примеры

Использование оператора запятая в цикле for

Если a является 2-мерным массивом с 10 элементами с каждой стороны, следующий код использует оператор запятая для одновременного увеличения i и уменьшения j, тем самым выводя значения диагональных элементов массива:

const a = Array.from({ length: 10 }, () =>
  Array.from({ length: 10 }, Math.random),
); // A 10×10 array of random numbers

for (let i = 0, j = 9; i <= 9; i++, j--) {
  console.log(`a[${i}][${j}] = ${a[i][j]}`);
}

Использование оператора запятая для объединения присваиваний

Поскольку запятые имеют наименьший приоритет — даже ниже, чем у присваивания — запятые могут использоваться для объединения нескольких выражений присваивания. В следующем примере a устанавливается равным значению b = 3 (равному 3). Затем вычисляется выражение c = 4, и его результат становится возвращаемым значением всего выражения запятая.

let a, b, c;

a = b = 3, c = 4; // Returns 4
console.log(a); // 3 (left-most)

let x, y, z;

x = (y = 5, z = 6); // Returns 6
console.log(x); // 6 (right-most)

Обработка и затем возврат

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

function myFunc() {
  let x = 0;

  return (x += 1, x); // the same as return ++x;
}

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

let sum = 0;
const squares = [1, 2, 3, 4, 5].map((x) => ((sum += x), x * x));
console.log(squares); // [1, 4, 9, 16, 25]
console.log(sum); // 15

Отбрасывание привязки ссылки

Оператор запятая всегда возвращает последнее выражение как значение, а не как ссылку. Это приводит к потере некоторой контекстной информации, такой как привязка this. Например, доступ к свойству возвращает ссылку на функцию, которая также запоминает объект, к которому она была получена, чтобы вызов свойства работал должным образом. Если метод возвращается из выражения запятая, то функция вызывается как будто это новое значение функции, и this является undefined.

const obj = {
  value: "obj",
  method() {
    console.log(this.value);
  },
};

obj.method(); // "obj"
(obj.method)(); // "obj" (the grouping operator still returns the reference)
(0, obj.method)(); // undefined (the comma operator returns a new value)

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

globalThis.isDirectEval = false;

{
  const isDirectEval = true;
  console.log(eval("isDirectEval")); // true
  console.log((eval)("isDirectEval")); // true (the grouping operator still returns a reference to `eval`)
  console.log((0, eval)("isDirectEval")); // false (the comma operator returns a new value)
}

Спецификации

Совместимость с браузерами

См. также

• for
• IIFE