> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 값 유형 및 참조 유형 변환 사용 예에 ​​대한 자세한 설명

JavaScript 값 유형 및 참조 유형 변환 사용 예에 ​​대한 자세한 설명

伊谢尔伦
풀어 주다: 2017-07-18 16:26:40
원래의
1671명이 탐색했습니다.

JavaScript 데이터 유형은 null, 정의되지 않음, 부울, 문자열, 숫자 및 객체의 6가지 유형으로 나뉩니다. object는 참조 유형이고 나머지 5개는 기본 유형 또는 기본 유형입니다. typeof 메소드를 사용하면 어떤 유형이 속하는지 출력할 수 있습니다. 서로 다른 유형의 변수를 비교하려면 먼저 유형을 변환해야 하는데, 이를 유형 변환이라고 합니다. 유형 변환을 암시적 변환이라고도 합니다. 암시적 변환은 일반적으로 덧셈, 뺄셈, 곱셈, 나눗셈, 같음, 작음, 큼 등의 연산자를 사용하여 발생합니다. .

1. 값 유형 간 데이터 유형 변환:

JavaScript의 데이터 유형에 대해서는 JavaScript 데이터 유형에 대한 자세한 설명 장을 참조하세요.

(1) 숫자와 문자열에 + 연산자를 사용합니다.

숫자와 문자열에 + 연산자를 사용하면 숫자가 먼저 문자열로 변환된 다음 문자열 연결 작업이 수행됩니다.


var antzone = "antzone";
var num = 8;
console.log(antzone+num);
로그인 후 복사

(2). + 부울 값을 포함하는 연산자 연산:

부울 유형이 포함된 경우 먼저 부울 값을 해당 숫자 또는 문자열로 변환한 다음 해당 문자열 연결을 수행합니다. 또는 산술 연산을 수행합니다.


var bool = true;
var num = 8;
console.log(bool + num);
로그인 후 복사

위 코드는 먼저 true를 숫자 1로 변환한 후 산술덧셈을 수행합니다.


var bool = true;
var num = "8";
console.log(bool + num);
로그인 후 복사

위의 부울 값은 해당 문자열 형식 "true"로 변환된 후 문자열 연결이 수행됩니다.

(3) 빼기 연산:

빼기 연산을 수행하면 두 피연산자가 먼저 숫자로 변환된 다음 산술 연산이 수행됩니다.


var bool = true;
var num = "8";
console.log(bool - num);
로그인 후 복사

true가 숫자 1로 변환됩니다. , 문자열 "8"이 숫자 8로 변환된 후 산술 연산이 수행됩니다.

곱셈, 나눗셈, 보다 큼, 보다 작음, 뺄셈의 변환도 마찬가지이므로 더 이상 예제를 제공하지 않겠습니다.

(4).== 동등 연산:

undefine과 null은 둘 다 == 연산자를 사용하여 true를 반환합니다.


console.log(undefined==null);
로그인 후 복사

다른 값 유형을 비교할 때 피연산자는 숫자로 변환됩니다.


console.log("3"==3);
로그인 후 복사

위 코드는 문자열 "3"을 숫자로 변환한 후 비교합니다.


console.log("1"==true);
로그인 후 복사

위 코드는 "1"과 true를 각각 숫자로 변환한 후 비교합니다.

2. 참조 유형을 값 유형으로 변환:

참조 유형(객체)을 값 유형으로 변환하는 방법은 아래에 소개되어 있습니다.

객체 상속의 두 가지 방법은 객체에서 값 유형으로의 변환 기능을 실현하는 데 도움이 될 수 있습니다:

(1).toString() 메소드.

(2).valueOf() 메서드.

보통 객체를 문자열로 변환하려면 toString() 메서드를 호출하고, 숫자로 변환하려면 valueOf() 메서드를 호출하면 된다고 생각하는데, 실제로는 그렇게 간단하지 않습니다. 실제로 적용되는 코드 예는 다음과 같습니다.


var obj = {
 webName: "phpcn",
 url:"php.cn"
}
console.log(obj.toString());
로그인 후 복사

위 코드에서 볼 수 있듯이 toString() 메서드는 객체를 이 객체를 반영하는 문자열로 변환하지 않습니다.


var arr = [1, 2, 3];
console.log(arr.valueOf());
로그인 후 복사

위 코드에서 볼 수 있듯이 valueOf() 메소드는 객체를 이 객체를 반영하는 숫자로 변환하지 않습니다.


var arr = [1, 2, 3];
console.log(arr.toString());
로그인 후 복사

배열 개체의 toString() 메서드는 배열을 이 배열 개체를 반영하는 문자열로 변환할 수 있습니다.

은 다음과 같이 요약됩니다:

(1) 첫 번째 예와 같이 일부 개체는 단순히 toString() 또는 valueOf() 메서드를 상속합니다.
(2). 일부 개체는 두 가지 메서드를 상속할 뿐만 아니라 이를 다시 작성합니다.

따라서 일부 객체 메서드는 문자열이나 숫자로 변환하는 목표를 달성할 수 있지만 일부는 그렇지 않습니다.

객체를 문자열이나 숫자로 변환하기 위해 toString() 또는 valueOf()를 호출하는 규칙은 다음과 같습니다.

toString()을 호출할 때 객체에 이 메서드가 있으면 이 메서드가 반환되면 이 메서드가 호출됩니다. 값 유형 데이터, 그런 다음 이 값 유형 데이터를 반환하고 컨텍스트에 따라 관련 데이터 유형 변환을 수행합니다. toString()이 없거나 이 메소드의 반환 값이 값 유형 데이터가 아닌 경우 valueOf()가 호출됩니다(이 메소드가 존재하는 경우). valueOf()가 값 유형 데이터를 반환하면 다음을 따릅니다. 관련 데이터 유형 변환을 수행하는 컨텍스트 환경.

추가 설명:

(1) 위는 기본적으로 valueOf() 및 toString() 메서드의 기능(객체를 숫자 또는 문자열로 변환)을 설명하지만 이것이 어렵고 빠르지는 않다는 점에 유의해야 합니다. 즉, valueOf() 메서드가 숫자를 반환해야 하거나 toString() 메서드를 문자열로 변환해야 할 필요는 없습니다. 예를 들어 단순히 상속된 이 두 메서드는 다음으로 변환하는 기능을 구현할 수 없습니다. 또 다른 예로, 이 두 가지 메서드를 직접 칭찬할 수 있으며 반환 값은 숫자나 문자열일 필요는 없습니다.

(2).还有需要特别注意的一点就是,很多朋友认为,转换为字符串首先要调用toString()方法, 其实这是错误的认识,我们应该这么理解,调用toString()方法可以转换为字符串,但不一定转换字符串就是首先调用toString()方法。

看如下代码实例:


var arr = [];
arr.valueOf = function () { return "1"; }
arr.toString = function () { return "2"; }
console.log(arr + "1");
로그인 후 복사

上面的代码中,arr是要被转换为字符串的,但是很明显是调用的valueOf()方法,而没有调用toString()方法。有些朋友可能会有这样的质疑,难道[2]这样的数字转换成字符串"2",不是调用的toString()方法吗。

代码如下:


var arr = [2];
console.log(arr + "1");
로그인 후 복사

其实过程是这样的,首先arr会首先调用valueOf()方法,但是数字的此方法是简单继承而来,并没有重写(当然这个重写不是我们实现),返回值是数组对象本身,并不是一个值类型,所以就转而调用toString()方法,于是就实现了转换为字符串的目的。

总结如下:

大多数对象隐式转换为值类型都是首先尝试调用valueOf()方法。但是Date对象是个例外,此对象的valueOf()和toString()方法都经过精心重写,默认是调用toString()方法,比如使用+运算符,如果在其他算数运算环境中,则会转而调用valueOf()方法。

代码实例如下:


var date = new Date();
console.log(date + "1");
console.log(date + 1);
console.log(date - 1);
console.log(date * 1);
로그인 후 복사

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

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