자바스크립트: 데이터 유형

高洛峰
풀어 주다: 2016-11-26 14:25:37
원래의
1079명이 탐색했습니다.

저는 JavaScript를 올바르게 사용하는 방법만 알면 강력하고 유연한 언어를 좋아합니다. JavaScript를 제대로 익히면 거의 모든 작업을 빠르고 잘 수행할 수 있습니다.
JavaScript가 너무 단순하거나 너무 낮은 수준이라고 생각한다면 함정에 빠진 것입니다. 그리고 소위 JavaScript 개발자라고 불리는 사람들이 그런 함정에 빠졌다는 것을 알게 될 것입니다. 언어 "X"가 더 좋습니다.
언어를 변환하는 시스템이 있으면 좋겠다고 말할 수도 있습니다. 이 함정에서 벗어나 진정으로 JavaScript를 마스터하려면 많은 노력과 헌신이 필요합니다. 왜냐하면 저는 1997년부터 JavaScript를 배워왔기 때문입니다.
저는 공식 표준 문서 지식을 공부하여 JavaScript의 모든 고급 측면을 마스터했으므로 직위에 "JavaScript 개발자"가 포함되어 있다면 완전한 언어 지식도 마스터할 수 있습니다.

이렇게 해야 합니다.

이 블로그에서는 짧은 JavaScript 코드 조각을 제공한 다음 이 코드의 올바른 출력을 제공하겠습니다. JavaScript 개발자라면 이런 종류의 질문이 정말 간단하다는 것을 알게 될 것입니다. 아직 이 언어를 배우는 중이기 때문에 약간의 어려움이 있을 수 있지만 코드 아래 설명 부분을 읽어보세요.
다음 JavaScript 코드는 팝업 상자를 표시합니다. ?

var five = 5;
five. three = 3;
alert(five + five. three);
정답을 보려면 이 글의 끝으로 건너뛰세요. 다음은 그러한 결과가 나오는 이유에 대한 설명입니다.
JavaScript에는 Object, Number, String, Boolean, Null, Undefine의 6가지 데이터 유형이 있습니다.
Objects 유형에는 배열, 함수 등이 포함됩니다. 일반 객체에는 정수 또는 부동 소수점 유형과 특수 값 NaN 및 Infinity가 포함될 수 있습니다. 문자열 유형에는 true와 false라는 두 가지 값만 있습니다. 데이터 유형은 약간 특별합니다. Null 유형에는 null이라는 하나의 값만 있고, 정의되지 않은 유형에는 정의되지 않은 값만 있습니다. 모든 객체 다른 모든 유형은 JavaScript 변수 유형이 명시적으로 지정되지 않습니다. 정의되어 있지만 스크립트가 실행될 때 자동으로 유추됩니다. 위 코드에서 five라는 변수는 숫자 리터럴 5가 할당되어 있으므로 Number 유형입니다.
다른 컴퓨터 프로그래밍 언어와 유사하게 JavaScript도 특정 값의 유형을 해당 값에 대한 연산에 적합한 연산자로 암시적으로 변환합니다. 다른 언어와 달리 JavaScript는 이러한 변환을 매우 적극적으로 수행합니다. 예를 들어 "5" - "3"이라는 표현식의 연산 결과는 다음과 같습니다. 숫자 2. 빼기 연산자는 양쪽의 모든 피연산자를 숫자로 변환한 다음 연산을 수행하기 때문입니다. 피연산자를 숫자로 변환할 수 없으면 대신 NaN("숫자가 아님") 표현식이 사용됩니다. "5" - "Fred"는 암시적으로 5 - NaN으로 변환됩니다. 그러면 연산 결과도 NaN이 됩니다.
암시적 변환 규칙의 전체 집합은 각각 어떤 유형의 피연산자인지만 알면 됩니다. 연산자가 필요합니다.
모든 값을 기본 값으로 변환하려면 "모든 값을 기본 값으로 변환"이라는 규칙을 따릅니다. 객체를 기본 값으로 변환하는 것은 더 복잡합니다. 피연산자의 유형이 유형이어야 하는 경우 Number는 JavaScript 엔진이 객체의 valueOf() 메소드를 호출한다는 것을 의미합니다. 반환된 결과가 여전히 기본 값이 아닌 경우 객체의 toString() 메소드가 호출되어 이를 String 유형 값으로 변환합니다. 피연산자의 유형은 문자열 유형이어야 하며, 반환된 결과가 기본 값이 아닌 경우 객체의 toString() 메서드가 먼저 호출되고 두 경우 모두 최종 변환 결과가 다음과 같은 경우에는 객체의 valueOf() 메서드를 호출합니다. 여전히 기본 값이 아니면 예외가 발생합니다.

피연산자의 유형이 숫자여야 하지만 피연산자의 실제 유형은 다음과 같습니다.
객체:
값이 첫 번째입니다. 변환 결과가 숫자가 아닌 경우에는 다음 변환 분기에 들어갑니다.

문자열:
문자열 유형 값은 에 따라 숫자 유형으로 변환됩니다. 일반적인 JavaScript 규칙

부울:
값이 true이면 1로 변환되고, 그렇지 않으면 0으로 변환됩니다.

Null:
0

정의되지 않음:
NaN

피연산자의 유형이 문자열이어야 하지만 피연산자의 실제 유형이 다음과 같은 경우:

객체:
값은 먼저 변환 결과가 문자열이 아닌 경우에는 다음 변환 분기에 들어갑니다.

숫자:
숫자는 "123" 또는 ”12.34″와 같은 문자열로 직접 변환됩니다.

부울:
“true” 또는 “false”로 변환

Null:
“null”

정의되지 않음:
” 정의되지 않음

피연산자의 유형이 부울 값이어야 하지만 실제 피연산자의 유형은 다음과 같습니다.

객체:
true

숫자:
값 0이면 false로 바뀌고, 그렇지 않으면 true로 바뀐다(번역자 참고 사항: NaN도 false로 바뀜)

문자열:
값이 빈 문자열 ""이면 return은 false이고, 그렇지 않으면 false입니다. true

Null:
false

Undefine:
false

피연산자의 유형이 객체 값이어야 하지만 실제 유형이 피연산자:

Number:
는 원래 값을 래핑하기 위해 래핑 객체 유형 Number를 사용하고, new Number(value)

String:
은 래핑 객체 유형 String을 사용합니다. 원래 값을 래핑하려면 new String(value)

Boolean:
래핑 객체 유형 Boolean을 사용하여 원래 값 new Boolean(value)

Null:
예외 발생

정의되지 않음:
예외 발생

이제 모든 변환 규칙이 명확해졌으므로 원래 예제로 돌아가겠습니다.

var five = 5;
five. three = 3;
alert(five + five. three);
앞서 언급했듯이 코드의 첫 번째 줄은 Number 유형의 five라는 변수를 생성합니다.
속성 접근자가 변수 5에 사용되면 해당 값은 Object 유형으로 변환됩니다. 이 작업을 "래핑"이라고 하며 기본 값이 아닌 객체를 생성하는 Number 생성자를 사용합니다. 다음 코드와 같습니다:

(new Number(five)). three=3;
보시다시피 새로 생성된 Number 객체를 변환하지 않습니다. 참조는 변수에 저장됩니다. 표현식이 실행된 후에는 three 속성이 추가된 객체가 삭제됩니다.
코드의 세 번째 줄에 있는 five. three 표현식은 다시 Number 객체를 생성합니다. 객체에는 세 가지 속성이 없으므로 결과는 다음과 동일합니다.

alert(5+undefine); 이 경우 모든 피연산자는 숫자로 변환됩니다. 예를 들어, 정의되지 않은 경우 NaN으로 변환됩니다.

alert(5+NaN);
이는 최종 팝업 상자에 NaN이 하나만 표시되는 이유를 설명합니다.
암시적 변환의 마지막 단계가 아직 남아 있습니다. Alert()가 수행되면 NaN은 자동으로 "NaN"으로 변환됩니다.


Comment:

jerone:
What 이 글에서 말씀하신 것은 JavaScript의 일부일 뿐이며, 정확하게 말하면 ECMAScript만 포함되어 있습니다. 이 외에도 JavaScript에는 DOM도 포함되어 있습니다. 즉, Node.Element, HTMLElement 및 기타 데이터 유형도 있습니다.
저자 답글:
Node, Element 및 HTMLElement는 Array, Date 및 RegExp와 마찬가지로 데이터 유형이 아니며 모두 객체 유형에 속합니다.

Marcus Pope:
다음 점을 지적해야 할 것 같습니다. 다음 코드가 정상적으로 실행될 수 있도록 올바른 작성 방법

var five = new Number(5);
alert(five) // 5
five.two = 3;
Alert(five + five. three); //8
또한 숫자의 원래 값을 참조하려면 "number"를 사용하고, 숫자 유형의 래퍼 개체를 참조하려면 "Number"를 사용하는 것이 더 좋다고 생각합니다. 독자의 혼란을 줄이기 위해 JavaScript에서 typeof 연산자를 사용하여 이러한 값의 내부 클래스 속성을 볼 때 표시되는 문자열이기도 합니다. (번역자 참고: 이는 typeof 5 === "number"를 나타냅니다.)
ACRESTAN :
예, 저자가 기본 값을 설명하기 위해 대문자로 시작하는 유형 문자열을 사용하기 때문에 이 기사는 매우 혼란스럽습니다...
예를 들어 이 문장 " 첫 번째 줄은 유형이 Number인 five라는 변수를 생성합니다." , 이것은 잘못된 것입니다. 코드가 그것을 증명하기 때문입니다.

메타딩:
또한 JavaScript에는 일곱 번째 데이터 유형이 있습니다. 가장 중요한 유형: JavaScript에서는 함수를 사용하여 새로운 객체를 생성할 수 있습니다. 따라서 원시 값 유형과 함수 유형 간에는 차이가 있습니다.

var Project = function () { };
// 프로젝트 인스턴스of 함수 === true
// 프로젝트 인스턴스오브 객체 == = true
// (프로젝트 유형 === '함수') === true

var o = new Project();
// o 인스턴스of 프로젝트 === true
// o instanceof Object === true
// (typeof Project === 'object') === true
http://metadea.de/V/ 링크를 주의 깊게 읽어보고 어떻게 해야 하는지 알아보세요. (역자 주: 번역되지 않은 또 다른 문장이 있어서 이해가 안 되네요. 사람들이 말도 안되는 소리를 하고 있는 것 같습니다.)
작가 답변:
분명히 함수는 JavaScript에서는 매우 중요하며 이를 설명하는 별도의 기사가 필요하지만 함수는 또 다른 데이터 유형이 아닙니다. 함수는 단지 특별한 종류의 객체일 뿐이지만 여전히 객체입니다.
다양한 생성자에 의해 생성된 객체는 모두 동일한 유형: 객체. 이는 쉽게 감지할 수 있습니다. if Object(a) === a, then a 객체 유형이며 다른 기본 값 유형이 아닙니다.

ulu:
이 기사는 더 자세히 설명합니다. JavaScript는 가장 강력한 언어일 뿐만 아니라 가장 혼란스러운 언어이기도 합니다. 언젠가는 모든 주요 브라우저에 더욱 사용자 친화적인 언어가 통합될 것이며 따라잡기를 희망합니다.
작성자 답변:
망치를 쥐면 모든 것이 못처럼 보입니다. JavaScript가 혼란스럽다고 생각하면 모든 기능이 이를 증명합니다.

Dave Chapman:
이러한 유형의 코딩 오류로 인해 코딩하는 동안 코드를 실행하기 전에 구문 검사를 수행할 수 있는 더 나은 IDE가 필요합니다. 예를 들어, 클로저 컴파일러에서 예제의 코드를 실행하면 다음이 생성됩니다. 경고 메시지:
"JSC_INEXISTENT_PROPERTY: 속성 3은 라인 4 문자 13의 숫자에 정의되지 않았습니다:
alert(five + five. three);"
(번역자 참고 사항: 클로저 컴파일러는 Google의 코드 압축기 또는 컴파일러입니다. . https://developers.google.com/closure/compiler/)


simonleung:
숫자는 "객체" 또는 "숫자" 유형일 수 있습니다.
조건문이나 부울 값으로 변환해야 하는 다른 위치에서는 이 두 가지 유형의 숫자가 서로 다른 결과를 생성합니다. 예를 들어
Number(0)는 객체이므로 Number(0)는 true가 되고 0은 분명히 true가 됩니다. get false
(역자 주: 여기서는 틀렸습니다. 함수로서 Number는 단지 유형 변환 함수일 뿐이며 원래 값이 계속 반환됩니다. new Number(0)를 사용할 때만 Number는 생성자로 간주됩니다. , 반환되는 것은 객체입니다)
다른 하나는 null에 대해 typeof 작업을 수행하고 "object"를 반환하지만 실제 개체는 아닙니다. null은 false 값이며


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿