Javascript의 '+' 연산자 이해

<p>온라인이나 인터뷰 질문에서 </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">{}+{} // "[object Object][object Object]" {}+[] // 0 []+{} // "[object Object]" []+[] // ""</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <p>와 같은 "이상한" 진술을 자주 볼 수 있습니다. Javascript에서 <code>+</code> 연산자는 문자열과 두 개의 "숫자"를 연결하는 데 사용할 수 있는 오버로드된 연산자입니다. 추가됩니다. 어떤 경우인지는 연산자 양쪽의 매개변수 유형에 따라 다릅니다. <br>일상적인 개발에서는 이렇게 번거로운 일이 발생하지 않지만, 이를 알아내는 것은 항상 좋습니다. 사양에는 다음과 같은 많은 내용이 언급되어 있습니다. </p> <p>1. 기본 유형의 경우 매개변수 중 하나가 문자열이면 문자열 연결로 처리되고 그렇지 않으면 처리됩니다. 숫자가 아닌 것은 먼저 숫자로 변환된 후 추가됩니다. </p> <p>기본 유형은 정의되지 않음, null, 부울, 숫자, 문자열입니다. </p> <p>몇 가지 예는 다음과 같습니다. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">0 + '1'     // '01' null + 1    // 1 true + 1    // 2 false + 1   // 0 undefined + 2   // NaN,  因为undefined转成Number是NaN</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <p>2. 참조 유형의 경우 먼저 기본 유형으로 변환한 후 위의 규칙에 따라 추가해야 합니다. 변환하는 방법은 스펙에 자세히 나와 있는데 스펙이 좀 힘든 것 같습니다. 간단히 말하면 기본적으로 문자열로 변환됩니다. 특별한 작업을 수행하려면 <code>valueOf()</code> 메서드를 재정의하세요. </p> <p>예를 들어보겠습니다: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function Complex(a, b) {   this.a = a;   this.b = b; } Complex.prototype.valueOf() {   return this.a; } new Complex(2, 3) + new Complex(4, 5); // 6</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <p>그러나 JS는 실제 연산자 오버로딩을 지원하지 않기 때문에, 즉 사용자 정의 유형 객체를 얻기 위해 추가할 수 없으므로 위의 예는 거의 사용되지 않습니다. 실용적인 코드. </p> <p>그러나 현재의 지식만으로도 원래 질문에 답할 수 있습니다. 그런데 <code>{}+[]</code>는 <code>[]+{}</code>과 왜 다른가요? 이것은 실제로 문법적인 문제입니다. 전자는 다음과 같습니다. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">{} +[]</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <p>는 실제로 두 문장이고 <code>[]</code>를 숫자로 변환하면 0입니다. <code>({}+[]) === '[object Object]'</code></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">+[]  // 0</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <p> 확인하기 쉽습니다. <code>new Date()</code>의 <code>valueOf()</code>를 숫자로 변환한거 아닌가요? 덧셈 결과가 여전히 문자열 유형인 이유는 무엇입니까? </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">new Date().valueOf(); // 1491904757087 1 + new Date(); // "1Tue Apr 11 2017 18:02:16 GMT+0800 (CST)"</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <p>특수 처리된 @@toPrimitive Date 클래스입니다. 기본적으로 <code>Date</code>의 추가는 문자열 모드로 연결되지만 비교 시 숫자로 변환됩니다. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">new Date() < new Date(&#39;2018-01-01&#39;) // true, 现在是2017</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><p> 참조 유형을 기본 유형으로 변환하는 것은 <code><</code>, <code>> 등 많은 연산자에서 사용되므로 이에 대한 학습이 필요합니다. 다음 js 코드는 해당 동작을 대략적으로 설명합니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">/**  * @param input     即要转换的对象  * @preferredType   期望转换成的类型，可以是string或number  */ function ToPrimitive(input, preferredType) {   if (typeof input !== 'object') {     return input;   // 本来就是原生类型   }   var hint = preferredType || 'default';   if (typeof input['@@toPrimitive'] === 'function') {   // @@toPrimitive是个内部方法，这里只是示例说明其工作原理     return input['@@toPrimitive'](input, hint);   // 这就是为什么Date能特殊处理的原因   }   if (hint === 'string') {     return input.toString();   }   return input.valueOf(); }</pre><div class="contentsignin">로그인 후 복사</div></div><p>자세한 내용은 사양을 참조하세요</p><p class="article fmt article__content"><br></p><p>온라인이나 면접 질문에서 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">{}+{} // "[object Object][object Object]" {}+[] // 0 []+{} // "[object Object]" []+[] // ""</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>Javascript에서 <p> 연산자는 문자열을 연결하고 두 개의 "숫자"를 추가하는 데 사용할 수 있는 오버로드된 연산자입니다. 어떤 경우인지는 연산자 양쪽의 매개변수 유형에 따라 다릅니다. <code>+</code>일상적인 개발에서는 이렇게 번거로운 일이 발생하지 않지만, 이를 알아내는 것은 항상 좋습니다. 사양에는 다음과 같은 많은 내용이 언급되어 있습니다. <br></p>1. 기본 유형의 경우 매개변수 중 하나가 문자열이면 문자열 연결로 처리되고 그렇지 않으면 처리됩니다. 숫자가 아닌 것은 먼저 숫자로 변환된 후 추가됩니다. <p></p>기본 유형은 정의되지 않음, null, 부울, 숫자, 문자열입니다. <p></p>몇 가지 예는 다음과 같습니다. <p></p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">0 + '1'     // '01' null + 1    // 1 true + 1    // 2 false + 1   // 0 undefined + 2   // NaN,  因为undefined转成Number是NaN</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>2. 참조 유형의 경우 먼저 기본 유형으로 변환한 후 위의 규칙에 따라 추가해야 합니다. 변환하는 방법은 스펙에 자세히 나와 있는데 스펙이 좀 힘든 것 같습니다. 간단히 말하면, 기본적으로 문자열로 변환됩니다. 특별한 작업을 수행하려면 <p> 메서드를 재정의하세요. <code>valueOf()</code></p>예를 들어보겠습니다: <p></p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function Complex(a, b) {   this.a = a;   this.b = b; } Complex.prototype.valueOf() {   return this.a; } new Complex(2, 3) + new Complex(4, 5); // 6</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>그러나 JS는 실제 연산자 오버로딩을 지원하지 않기 때문에, 즉 사용자 정의 유형 객체를 얻기 위해 추가할 수 없으므로 위의 예는 거의 사용되지 않습니다. 실용적인 코드. <p></p>그러나 현재의 지식만으로도 원래 질문에 답할 수 있습니다. 그런데 <p>는 <code>{}+[]</code>과 왜 다른가요? 이것은 실제로 문법적인 문제입니다. 전자는 다음과 같습니다. <code>[]+{}</code></p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">{} +[]</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>는 실제로 두 문장이고 <p>를 숫자로 변환하면 0입니다. <code>[]</code><code>({}+[]) === '[object Object]'</code></p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">+[]  // 0</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> 확인하기 쉽습니다. <p>의 <code>new Date()</code>를 숫자로 변환한거 아닌가요? 덧셈 결과가 여전히 문자열 유형인 이유는 무엇입니까? <code>valueOf()</code></p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">new Date().valueOf(); // 1491904757087 1 + new Date(); // "1Tue Apr 11 2017 18:02:16 GMT+0800 (CST)"</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>특수 처리된 @@toPrimitive Date 클래스입니다. 기본적으로 <p>의 추가는 문자열 모드로 연결되지만 비교 시 숫자로 변환됩니다. <code>Date</code></p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">new Date() < new Date(&#39;2018-01-01&#39;) // true, 现在是2017</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div></p> 참조 유형을 기본 유형으로 변환하는 것은 <p>, <code><</code> 등 많은 연산자에서 사용되므로 이에 대한 학습이 필요합니다. 다음 js 코드는 해당 동작을 대략적으로 설명합니다. <code>>아아앙<p class="col-md-8"><br></p><p class="comments-box-content"><br></p></pre></pre>

위 내용은 Javascript의 '+' 연산자 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!