답변
다음은 직접 작성하지 않기 때문에 유용하지 않을 수 있지만 축소자는 쉼표 연산자를 사용하여 코드를 축소 할 수 있습니다. 예를 들면 :
if(x){foo();return bar()}else{return 1}
될 것입니다 :
return x?(foo(),bar()):1
? :
(어느 정도) 콤마 연산자는 두 문장 한 문장으로 기입 할 수 있기 때문에 운전자는 현재 이용 될 수있다.
이것은 이다 (-> 24 여기 바이트 39)는 몇 가지 참신한 압축 할 수 있다는 점에서 유용하다.
나는 쉼표 var a, b
가 표현식 내에 존재하지 않기 때문에 쉼표 연산자 가 아니라는 사실을 강조하고 싶습니다 . 쉼표는 명령문 에서 특별한 의미를 갖습니다 . 식에서 두 변수를 참조 할 것이고, 평가에 대한 경우하지 않다 .var
a, b
b
var 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 의 연결을 사용 하여
-
사용하여이 함수에 전달 된 모든 옵션을 분해
pairs
설정되는{ a: 1, b: 2}
으로[['a', 1], ['b', 2]]
-
이 속성 쌍 배열은 시스템에서 ‘작업’으로 간주되는 항목으로 필터링됩니다.
-
그런 다음 배열의 두 번째 인덱스는 해당 작업을 나타내는 promise를 반환하는 함수로 대체됩니다 (사용
map
). -
마지막으로에 대한 호출
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 = aWholeLotOfText
repl 또는 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]
그리고 쉼표 연산자 내부에서 둘 다 평가되지만 어떻게 든 별도의 명령문을 만들 수 있습니다.