[javascript] 쉼표 연산자는 언제 유용합니까?

식 ( ) 의 “쉼표 연산자”에 대한 질문 ,과 이에 대한 MDN 문서 를 읽었 지만 유용한 시나리오를 생각할 수 없습니다.

그렇다면 쉼표 연산자는 언제 유용할까요?



답변

다음은 직접 작성하지 않기 때문에 유용하지 않을 수 있지만 축소자는 쉼표 연산자를 사용하여 코드를 축소 할 수 있습니다. 예를 들면 :

if(x){foo();return bar()}else{return 1}

될 것입니다 :

return x?(foo(),bar()):1

? :(어느 정도) 콤마 연산자는 두 문장 한 문장으로 기입 할 수 있기 때문에 운전자는 현재 이용 될 수있다.

이것은 이다 (-> 24 여기 바이트 39)는 몇 가지 참신한 압축 할 수 있다는 점에서 유용하다.


나는 쉼표 var a, b표현식 내에 존재하지 않기 때문에 쉼표 연산자 가 아니라는 사실을 강조하고 싶습니다 . 쉼표는 명령문 에서 특별한 의미를 갖습니다 . 식에서 두 변수를 참조 할 것이고, 평가에 대한 경우하지 않다 .var a, bbvar a, b


답변

쉼표 연산자를 사용하면 하나의 표현식이 예상되는 위치에 여러 표현식을 넣을 수 있습니다. 쉼표로 구분 된 여러 표현식의 결과 값은 마지막 쉼표로 구분 된 표현식의 값이됩니다.

두 개 이상의 표현식이 예상되는 상황이 많지 않고 쉼표 연산자를 사용하는 것보다 코드를 작성하는 데 덜 혼란스러운 방법이 없기 때문에 개인적으로 자주 사용하지 않습니다. 한 가지 흥미로운 가능성은 for두 개 이상의 변수를 증분시키려는 경우 루프 끝에 있습니다.

// j is initialized to some other value
// as the for loop executes both i and j are incremented
// because the comma operator allows two statements to be put in place of one
for (var i = 0; i < items.len; i++, j++) {
    // loop code here that operates on items[i] 
    // and sometimes uses j to access a different array
}

여기서는 i++, j++하나의 표현이 허용되는 곳에 놓을 수 있음을 알 수 있습니다. 이 특별한 경우에는 여러 표현이 부작용에 사용되므로 복합 표현이 마지막 표현의 값을 취하는 것은 중요하지 않지만 실제로 중요한 다른 경우가 있습니다.


답변

쉼표 연산자는 Javascript로 기능 코드를 작성할 때 자주 유용합니다.

다음과 같은 SPA를 위해 작성한이 코드를 고려하십시오.

const actions = _.chain(options)
                 .pairs() // 1
                 .filter(selectActions) // 2
                 .map(createActionPromise) // 3
                 .reduce((state, pair) => (state[pair[0]] = pair[1], state), {}) // 4
                 .value();

이것은 상당히 복잡하지만 실제 시나리오였습니다. 무슨 일이 일어나고 있는지 설명하고 그 과정에서 Comma Operator에 대한 사례를 만드는 동안 저를 참아주십시오.


이것은 Underscore 의 연결을 사용 하여

  1. 사용하여이 함수에 전달 된 모든 옵션을 분해 pairs
    설정되는 { a: 1, b: 2}으로[['a', 1], ['b', 2]]

  2. 이 속성 쌍 배열은 시스템에서 ‘작업’으로 간주되는 항목으로 필터링됩니다.

  3. 그런 다음 배열의 두 번째 인덱스는 해당 작업을 나타내는 promise를 반환하는 함수로 대체됩니다 (사용 map).

  4. 마지막으로에 대한 호출 reduce은 각 “속성 배열”( ['a', 1])을 최종 객체로 다시 병합 합니다.

최종 결과는 options적절한 키만 포함하고 호출 함수에서 값을 사용할 수 있는 인수 의 변환 된 버전입니다 .


그냥보고

.reduce((state, pair) => (state[pair[0]] = pair[1], state), {})

reduce 함수가 빈 상태 객체로 시작하는 것을 볼 수 있으며 state, 키와 값을 나타내는 각 쌍에 대해이 함수는 state키 / 값 쌍에 해당하는 객체에 속성을 추가 한 후 동일한 객체를 반환합니다 . ECMAScript 2015의 화살표 함수 구문으로 인해 함수 본문은 표현식이며 결과적으로 쉼표 연산자는 간결하고 유용한 “반복” 함수를 허용합니다.

개인적으로 저는 ECMAScript 2015 + Arrow Functions를 사용하여보다 기능적인 스타일로 Javascript를 작성하는 동안 수많은 사례를 접했습니다. 그러나 화살표 기능을 만나기 전에 (예 : 질문 작성 당시) 쉼표 연산자를 고의적으로 사용하지 않았습니다.


답변

쉼표 연산자의 또 다른 용도는 순전히 편의상 repl 또는 console에서 신경 쓰지 않는 결과를 숨기는 것입니다.

예를 들어, myVariable = aWholeLotOfTextrepl 또는 console에서 평가 하면 방금 할당 한 모든 데이터가 인쇄됩니다. 이것은 페이지와 페이지 일 수 있으며,보고 싶지 않은 경우 대신 평가할 수 myVariable = aWholeLotOfText, 'done'있으며 repl / console은 ‘done’을 인쇄합니다.

Oriel은 사용자 정의 toString()또는 get()기능이이를 유용하게 만들 수 있다고 올바르게 지적 합니다.


답변

쉼표 연산자는 JavaScript에만 국한되지 않으며 C 및 C ++와 같은 다른 언어로도 사용할 수 있습니다 . 이항 연산자로서 이것은 일반적으로 표현식 인 첫 번째 피연산자가 두 번째 피연산자에 필요한 부작용을 가질 때 유용합니다. 위키 백과의 한 예 :

i = a += 2, a + b;

분명히 두 줄의 코드를 작성할 수 있지만 쉼표를 사용하는 것은 또 다른 옵션이며 때로는 더 읽기 쉽습니다.


답변

나는 Flanagan에 동의하지 않으며, 쉼표는 정말 유용하며 특히 당신이 무엇을하고 있는지 알고있을 때 더 읽기 쉽고 우아한 코드를 작성할 수 있다고 말합니다.

다음 은 쉼표 사용에 대한 매우 상세한 문서 입니다.

데모 증명을위한 몇 가지 예 :

function renderCurve() {
  for(var a = 1, b = 10; a*b; a++, b--) {
    console.log(new Array(a*b).join('*'));
  }
}

피보나치 생성기 :

for (
    var i=2, r=[0,1];
    i<15;
    r.push(r[i-1] + r[i-2]), i++
);
// 0,1,1,2,3,5,8,13,21,34,55,89,144,233,377

jQuery .parent()함수 와 유사한 첫 번째 부모 요소를 찾습니다 .

function firstAncestor(el, tagName) {
    while(el = el.parentNode, el && (el.tagName != tagName.toUpperCase()));
    return el;
}

//element in http://ecma262-5.com/ELS5_HTML.htm
var a = $('Section_15.1.1.2');

firstAncestor(a, 'div'); //<div class="page">


답변

나는 그것 이외의 실용적인 사용을 찾지 못했지만 James Padolsey 가 while 루프에서 IE 탐지 를 위해이 기술을 멋지게 사용 하는 한 가지 시나리오가 있습니다 .

var ie = (function(){

    var undef,
        v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');

    while ( // <-- notice no while body here
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
        all[0]
    );

    return v > 4 ? v : undef;

}());

다음 두 줄은 실행해야합니다.

div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]

그리고 쉼표 연산자 내부에서 둘 다 평가되지만 어떻게 든 별도의 명령문을 만들 수 있습니다.