웹 프론트엔드 JS 튜토리얼 JavaScript의 연산자 규칙 및 암시적 유형 변환 예에 대한 자세한 설명

JavaScript의 연산자 규칙 및 암시적 유형 변환 예에 대한 자세한 설명

Jan 25, 2018 am 10:58 AM
javascript js 연산자

JavaScript에서 연산자 규칙의 암시적 유형 변환은 무엇인가요? JavaScript를 배우는 모든 초보자가 알아야 할 질문입니다. 다음 글에서는 주로 JavaScript의 연산자 규칙과 암시적 유형 변환을 소개합니다. 정보 아래에서 살펴보겠습니다.

암시적 유형 변환

JavaScript에서는 비교 연산이나 덧셈, 뺄셈, 곱셈, 나눗셈의 4가지 산술 연산을 수행할 때 JavaScript의 암시적 유형 변환 메커니즘이 작동하는 경우가 많으며 이 부분이 혼동되는 경우가 많습니다. . 혼란스러운 곳. 예를 들어, 브라우저의 console.log 작업은 값을 문자열로 변환한 다음 표시하는 경우가 많지만, 수학적 작업은 먼저 값을 숫자 유형(Date 유형 개체 제외)으로 변환한 다음 작업을 수행합니다.

먼저 JavaScript의 몇 가지 일반적인 연산자 연산 결과를 살펴보겠습니다. 이 섹션을 읽은 후 각 항목을 합리적으로 설명할 수 있기를 바랍니다.

// 比较
[] == ![] // true
NaN !== NaN // true

1 == true // true
2 == true // false
"2" == true // flase

null > 0 // false
null < 0 // false
null == 0 // false
null >= 0 // true

// 加法
true + 1 // 1
undefined + 1 // NaN

let obj = {};

{} + 1 // 1,这里的 {} 被当成了代码块
{ 1 + 1 } + 1 // 1

obj + 1 // [object Object]1
{} + {} // Chrome 上显示 "[object Object][object Object]",Firefox 显示 NaN

[] + {} // [object Object]
[] + a // [object Object]
+ [] // 等价于 + "" => 0
{} + [] // 0
a + [] // [object Object]

[2,3] + [1,2] // &#39;2,31,2&#39;
[2] + 1 // &#39;21&#39;
[2] + (-1) // "2-1"

// 减法或其他操作,无法进行字符串连接,因此在错误的字符串格式下返回 NaN
[2] - 1 // 1
[2,3] - 1 // NaN
{} - 1 // -1
로그인 후 복사

기본 유형 간의 변환

JavaScript 기본 유형 우리는 종종 숫자 유형, 문자열 유형, 부울 유형 및 빈 유형을 포함한다고 이야기합니다. 우리가 일반적으로 사용하는 기본 유형 간의 변환 함수는 문자열, 숫자 및 부울입니다.

// String
let value = true;
console.log(typeof value); // boolean

value = String(value); // now value is a string "true"
console.log(typeof value); // string

// Number
let str = "123";
console.log(typeof str); // string

let num = Number(str); // becomes a number 123

console.log(typeof num); // number

let age = Number("an arbitrary string instead of a number");

console.log(age); // NaN, conversion failed

// Boolean
console.log( Boolean(1) ); // true
console.log( Boolean(0) ); // false

console.log( Boolean("hello") ); // true
console.log( Boolean("") ); // false
로그인 후 복사

마지막으로 다음 JavaScript 기본 유형 변환 테이블을 얻을 수 있습니다( 복합 유형에서 기본 유형으로의 변환 예 포함):

ㅋㅋㅋ 기능( ){}NaN"function(){}"true{ }NaN"[객체 객체]"true null0"널 "false정의되지 않음NaN"정의되지 않음"false

ToPrimitive

在比较运算与加法运算中,都会涉及到将运算符两侧的操作对象转化为原始对象的步骤;而 JavaScript 中这种转化实际上都是由 ToPrimitive 函数执行的。实际上,当某个对象出现在了需要原始类型才能进行操作的上下文时,JavaScript 会自动调用 ToPrimitive 函数将对象转化为原始类型;譬如上文介绍的 alert 函数、数学运算符、作为对象的键都是典型场景,该函数的签名如下:

ToPrimitive(input, PreferredType?)
로그인 후 복사

为了更好地理解其工作原理,我们可以用 JavaScript 进行简单地实现:

var ToPrimitive = function(obj,preferredType){
 var APIs = {
 typeOf: function(obj){
  return Object.prototype.toString.call(obj).slice(8,-1);
 },
 isPrimitive: function(obj){
  var _this = this,
   types = [&#39;Null&#39;,&#39;Undefined&#39;,&#39;String&#39;,&#39;Boolean&#39;,&#39;Number&#39;];
  return types.indexOf(_this.typeOf(obj)) !== -1; 
 }
 };
 // 如果 obj 本身已经是原始对象,则直接返回
 if(APIs.isPrimitive(obj)) {return obj;}
 
 // 对于 Date 类型,会优先使用其 toString 方法;否则优先使用 valueOf 方法
 preferredType = (preferredType === &#39;String&#39; || APIs.typeOf(obj) === &#39;Date&#39; ) ? &#39;String&#39; : &#39;Number&#39;;
 if(preferredType===&#39;Number&#39;){
 if(APIs.isPrimitive(obj.valueOf())) { return obj.valueOf()};
 if(APIs.isPrimitive(obj.toString())) { return obj.toString()};
 }else{
 if(APIs.isPrimitive(obj.toString())) { return obj.toString()};
 if(APIs.isPrimitive(obj.valueOf())) { return obj.valueOf()};
 }
 throw new TypeError(&#39;TypeError&#39;);
}
로그인 후 복사

我们可以简单覆写某个对象的 valueOf 方法,即可以发现其运算结果发生了变化:

let obj = {
 valueOf:() => {
  return 0;
 }
}

obj + 1 // 1
로그인 후 복사

如果我们强制将某个对象的 valueOf 与 toString 方法都覆写为返回值为对象的方法,则会直接抛出异常

obj = {
  valueOf: function () {
   console.log("valueOf");
   return {}; // not a primitive
  },
  toString: function () {
   console.log("toString");
   return {}; // not a primitive
  }
 }

obj + 1
// error
Uncaught TypeError: Cannot convert object to primitive value
 at <anonymous>:1:5
로그인 후 복사

值得一提的是对于数值类型的 valueOf() 函数的调用结果仍为数组,因此数组类型的隐式类型转换结果是字符串。而在 ES6 中引入 Symbol 类型之后,JavaScript 会优先调用对象的 [Symbol.toPrimitive] 方法来将该对象转化为原始类型,那么方法的调用顺序就变为了:

  • obj[Symbol.toPrimitive](preferredType) 方法存在时,优先调用该方法;

  • 如果 preferredType 参数为 String,则依次尝试 obj.toString() obj.valueOf()

  • 如果 preferredType 参数为 Number 或者默认值,则依次尝试 obj.valueOf() obj.toString()

[Symbol.toPrimitive] 方法的签名为:

obj[Symbol.toPrimitive] = function(hint) {
 // return a primitive value
 // hint = one of "string", "number", "default"
}
로그인 후 복사

我们同样可以通过覆写该方法来修改对象的运算表现:

user = {
 name: "John",
 money: 1000,

 [Symbol.toPrimitive](hint) {
 console.log(`hint: ${hint}`);
 return hint == "string" ? `{name: "${this.name}"}` : this.money;
 }
};

// conversions demo:
console.log(user); // hint: string -> {name: "John"}
console.log(+user); // hint: number -> 1000
console.log(user + 500); // hint: default -> 1500
로그인 후 복사

比较运算

JavaScript 为我们提供了严格比较与类型转换比较两种模式,严格比较(===)只会在操作符两侧的操作对象类型一致,并且内容一致时才会返回为 true,否则返回 false。而更为广泛使用的 == 操作符则会首先将操作对象转化为相同类型,再进行比较。对于 <= 等运算,则会首先转化为原始对象(Primitives),然后再进行对比。

标准的相等性操作符(== 与 !=)使用了Abstract Equality Comparison Algorithm来比较操作符两侧的操作对象(x == y),该算法流程要点提取如下:

  • 如果 x 或 y 中有一个为 NaN,则返回 false;

  • 如果 x 与 y 皆为 null 或 undefined 中的一种类型,则返回 true(null == undefined // true);否则返回 false(null == 0 // false);

  • 如果 x,y 类型不一致,且 x,y 为 String、Number、Boolean 中的某一类型,则将 x,y 使用 toNumber 函数转化为 Number 类型再进行比较;

  • 如果 x,y 中有一个为 Object,则首先使用 ToPrimitive 函数将其转化为原始类型,再进行比较。

我们再来回顾下文首提出的 [] == ![] 这个比较运算,首先 [] 为对象,则调用 ToPrimitive 函数将其转化为字符串 "";对于右侧的 ![],首先会进行显式类型转换,将其转化为 false。然后在比较运算中,会将运算符两侧的运算对象都转化为数值类型,即都转化为了 0,因此最终的比较结果为 true。在上文中还介绍了 null >= 0 为 true 的这种比较结果,在 ECMAScript 中还规定,如果 < 为 false,则 >= 为 true。

加法运算

对于加法运算而言,JavaScript 首先会将操作符两侧的对象转换为 Primitive 类型;然后当适当的隐式类型转换能得出有意义的值的前提下,JavaScript 会先进行隐式类型转换,再进行运算。譬如 value1 + value2 这个表达式,首先会调用 ToPrimitive 函数将两个操作数转化为原始类型:

prim1 := ToPrimitive(value1)
prim2 := ToPrimitive(value2)
로그인 후 복사

这里将会优先调用除了 Date 类型之外对象的 valueOf 方法,而因为数组的 valueOf 方法的返回值仍为数组类型,则会返回其字符串表示。而经过转换之后的 prim1 与 prim2 中的任一个为字符串,则会优先进行字符串连接;否则进行加法计算。

相关推荐:

javascript运算符

JavaScript运算符用法总结

解析javascript运算符中的关系运算符

위 내용은 JavaScript의 연산자 규칙 및 암시적 유형 변환 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 Apr 03, 2024 am 11:55 AM

얼굴 검출 및 인식 기술은 이미 상대적으로 성숙하고 널리 사용되는 기술입니다. 현재 가장 널리 사용되는 인터넷 응용 언어는 JS입니다. 웹 프런트엔드에서 얼굴 감지 및 인식을 구현하는 것은 백엔드 얼굴 인식에 비해 장점과 단점이 있습니다. 장점에는 네트워크 상호 작용 및 실시간 인식이 줄어 사용자 대기 시간이 크게 단축되고 사용자 경험이 향상된다는 단점이 있습니다. 모델 크기에 따라 제한되고 정확도도 제한됩니다. js를 사용하여 웹에서 얼굴 인식을 구현하는 방법은 무엇입니까? 웹에서 얼굴 인식을 구현하려면 JavaScript, HTML, CSS, WebRTC 등 관련 프로그래밍 언어 및 기술에 익숙해야 합니다. 동시에 관련 컴퓨터 비전 및 인공지능 기술도 마스터해야 합니다. 웹 측면의 디자인으로 인해 주목할 가치가 있습니다.

C 언어에서 += 연산자의 의미와 사용법 분석 C 언어에서 += 연산자의 의미와 사용법 분석 Apr 03, 2024 pm 02:27 PM

+= 연산자는 왼쪽 피연산자의 값을 오른쪽 피연산자의 값에 더하고 그 결과를 왼쪽 피연산자에 할당하는 데 사용됩니다. 이는 숫자형에 적합하며 왼쪽 피연산자는 쓰기 가능해야 합니다.

PHP 및 JS 개발 팁: 주식 캔들 차트 그리기 방법 익히기 PHP 및 JS 개발 팁: 주식 캔들 차트 그리기 방법 익히기 Dec 18, 2023 pm 03:39 PM

인터넷 금융의 급속한 발전으로 인해 주식 투자는 점점 더 많은 사람들의 선택이 되었습니다. 주식 거래에서 캔들 차트는 주가의 변화 추세를 보여주고 투자자가 보다 정확한 결정을 내리는 데 도움이 되는 일반적으로 사용되는 기술적 분석 방법입니다. 이 기사에서는 PHP와 JS의 개발 기술을 소개하고 독자가 주식 캔들 차트를 그리는 방법을 이해하도록 유도하며 구체적인 코드 예제를 제공합니다. 1. 주식 캔들 차트의 이해 주식 캔들 차트를 그리는 방법을 소개하기 전에 먼저 캔들 차트가 무엇인지부터 이해해야 합니다. 캔들스틱 차트는 일본인이 개발했습니다.

Python 구문 마인드맵: 코드 구조에 대한 심층적인 이해 Python 구문 마인드맵: 코드 구조에 대한 심층적인 이해 Feb 21, 2024 am 09:00 AM

Python은 간단하고 읽기 쉬운 구문으로 다양한 분야에서 널리 사용됩니다. 프로그래밍 효율성을 높이고 코드 작동 방식을 깊이 이해하려면 Python 구문의 기본 구조를 숙지하는 것이 중요합니다. 이를 위해 이 기사에서는 Python 구문의 다양한 측면을 자세히 설명하는 포괄적인 마인드 맵을 제공합니다. 변수 및 데이터 유형 변수는 Python에서 데이터를 저장하는 데 사용되는 컨테이너입니다. 마인드맵은 정수, 부동 소수점 숫자, 문자열, 부울 값 및 목록을 포함한 일반적인 Python 데이터 유형을 보여줍니다. 각 데이터 유형에는 고유한 특성과 작업 방법이 있습니다. 연산자 연산자는 데이터 유형에 대한 다양한 작업을 수행하는 데 사용됩니다. 마인드맵은 산술 연산자, 비율 등 Python의 다양한 연산자 유형을 다룹니다.

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

js와 vue의 관계 js와 vue의 관계 Mar 11, 2024 pm 05:21 PM

js와 vue의 관계: 1. 웹 개발의 초석인 JS 2. 프론트엔드 프레임워크로서의 Vue.js의 등장 3. JS와 Vue의 상호 보완적인 관계 4. JS와 Vue의 실제 적용 Vue.

JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 Jan 05, 2024 pm 01:37 PM

JavaScript에서 HTTP 상태 코드를 얻는 방법 소개: 프런트 엔드 개발에서 우리는 종종 백엔드 인터페이스와의 상호 작용을 처리해야 하며 HTTP 상태 코드는 매우 중요한 부분입니다. HTTP 상태 코드를 이해하고 얻는 것은 인터페이스에서 반환된 데이터를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTTP 상태 코드란 무엇입니까? HTTP 상태 코드는 브라우저가 서버에 요청을 시작할 때 서비스가

Go 언어에서 연산자 우선 순위를 정렬하는 방법 Go 언어에서 연산자 우선 순위를 정렬하는 방법 Dec 21, 2023 pm 05:03 PM

Go 언어에서는 연산자가 높은 우선순위에서 낮은 우선순위로 평가됩니다. 일반 연산자의 우선순위: 1. 괄호: ()(가장 높은 우선순위, 연산 순서를 강제하는 데 사용됨) 3. 곱셈 연산자 5. 시프트 연산자; ; 7. 비교 연산자 8. 논리 연산자 9. 조건 연산자(삼항 연산자)

See all articles
기본 값 숫자 유형으로 변환 문자열 유형으로 변환 부울 유형으로 변환
false0 " false"false
true1"true"true
00"0" false
1 1"1" true
"0"0"0"true
"1"1"1" true
NaNNaN" NaN"false
InfinityInfinity"Infinity"true
-Infinity-Infinity "-Infinity"true
""0 "false
"20"20"20"true
"트웬티"NaN "트웬티"tru ​​이자
[ ] 0""true
[20]20"20"true
[10,20]NaN"10 "진짜