지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > 프런트엔드 Q&A > es6 숫자 객체의 새로운 방법은 무엇입니까?

es6 숫자 객체의 새로운 방법은 무엇입니까?

青灯夜游
풀어 주다： 2022-10-26 17:57:15
원래의
1505명이 탐색했습니다.

es6 새로운 숫자 메서드는 다음과 같습니다. 1. 지정된 값이 유한 값인지 확인할 수 있는 "Number.isFinite()" 2. 변수가 NaN인지 여부를 감지할 수 있는 "Number.isNaN()" 3. "Number.parseInt()"는 문자열을 정수로 변환할 수 있습니다. 4. "Number.parseFloat()"는 문자열을 부동 소수점 숫자로 변환할 수 있습니다. 값은 정수입니다.

es6 숫자 객체의 새로운 방법은 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

ES5에서는 전역 isFinite() 및 isNaN() 메서드에 유형 변환이 있어 최종 판단 결과가 모호해집니다. ES6에서는 Number 개체에 대해 Number.isFinite() 및 Number.isNaN()이라는 두 가지 새로운 메서드를 제공하여 수치 판단을 더욱 강력하게 만듭니다. 다음으로 이 두 가지 메서드를 살펴보겠습니다.

Number.isFinite()

ES5에는 전달된 매개변수 값이 제한된 값인지 확인하는 데 사용되는 전역 isFinite() 함수가 있습니다. 먼저 A 값으로 변환한 후 확인하세요. 

isFinite(Infinity);  // false
isFinite(NaN);       // false
isFinite(-Infinity); // false

isFinite(0);         // true
isFinite(2e64);      // true
isFinite('2e64');    // true

isFinite("0");       // true
로그인 후 복사

위 코드에서 볼 수 있듯이, 문자열은 먼저 숫자 값으로 변환된 후 판단됩니다. ES6 Number 객체에 제공되는 isFinite()는 전역 isFinite() 함수에 비해 더 강력합니다. 이 방법은 숫자가 아닌 매개변수를 숫자 값으로 강제 변환합니다. 즉, 유한한 숫자 유형 값만 true를 반환합니다. 

Number.isFinite(Infinity);  // false
Number.isFinite(NaN);       // false
Number.isFinite(-Infinity); // false

Number.isFinite(0);         // true
Number.isFinite(2e64);      // true
Number.isFinite('2e64');	// false

Number.isFinite('0');       // false
로그인 후 복사

Number.isNaN()

JavaScript의 다른 값과 달리 NaN은 등호 연산자(== 및 ===)로 판단할 수 없습니다. NaN == NaN 및 NaN == =이기 때문입니다. NaN은 false를 반환합니다. 따라서 값이 NaN인지 확인해야 합니다.

1. NaN 값 생성 ​​

NaN은 산술 연산의 결과가 정의되지 않거나 표현할 수 없는 값을 반환할 때 발생합니다. 그러나 일부 값이 표현 범위를 벗어났음을 나타내는 데 NaN이 반드시 사용되는 것은 아닙니다.

  • 숫자가 아닌 일부 값을 숫자 값으로 강제 변환하면 NaN이 얻어집니다.

  • 0을 0으로 나누면 NaN이 반환되지만, 0으로 나눈 다른 숫자는 NaN이 반환되지 않습니다.

Number() 메서드를 사용하여 유형을 변환할 수 있다는 것을 알고 있습니다. 다음은 NaN으로의 강제 유형 변환의 예입니다. 

Number(undefined)				// NaN
Number('undefined')				// NaN
Number('string')				// NaN
Number({})						// NaN
Number('10,3')					// NaN
Number('123ABC')				// NaN
Number(new Date().toString())	// NaN
로그인 후 복사

위 예에서 볼 수 있듯이 많은 값이 다음으로 변환됩니다. 강제 유형 변환 중인 NaN 이를 위해 isNaN()의 문제를 살펴보겠습니다.

2. isNaN() 문제

기본적으로 NaN 값인지 여부를 확인하는 데 사용되는 전역 메서드 isNaN()이 있습니다. 숫자 유형이 아닌 경우 isNaN 함수는 먼저 이 매개변수를 숫자 값으로 변환한 다음 변환된 결과가 NaN인지 판단합니다.

예: 

isNaN(NaN);       // true
isNaN(undefined); // true
isNaN('undefined')// true
isNaN({});        // true

isNaN(true);      // false
isNaN(null);      // false
isNaN(37);        // false

// strings
isNaN("37");      // false: 可以被转换成数值37
isNaN("37.37");   // false: 可以被转换成数值37.37
isNaN("37,5");    // true
isNaN('123ABC');  // true:  parseInt("123ABC")的结果是 123, 但是Number("123ABC")结果是 NaN
isNaN("");        // false: 空字符串被转换成0
isNaN(" ");       // false: 包含空格的字符串被转换成0

// dates
isNaN(new Date());                // false
isNaN(new Date().toString());     // true

isNaN("imooc")   // true: "blabla"不能转换成数值
                 // 转换成数值失败， 返回NaN
로그인 후 복사

위의 NaN 생성 방법 예 결과와 결합하면 isNaN을 사용하여 반환된 값이 true인지 확인하는 것이 분명히 우리가 원하는 결과가 아니라는 것을 알 수 있습니다. 이러한 문제에 대응하여 ES6에서는 ES6의 isNaN 메소드를 살펴보겠습니다.

3. Number.isNaN() 세부사항

ES6은 이 방법을 통해 변수 x가 NaN인지 여부를 감지하는 신뢰할 수 있는 방법이 됩니다. 값은 유형으로 캐스팅됩니다. 

Number.isNaN(NaN);        // true
Number.isNaN(Number.NaN); // true
Number.isNaN(0 / 0)       // true

// 下面这几个如果使用全局的 isNaN() 时，会返回 true。
Number.isNaN("NaN");      // false，字符串 "NaN" 不会被隐式转换成数字 NaN。
Number.isNaN(undefined);  // false
Number.isNaN('undefined');// false
Number.isNaN({});         // false
Number.isNaN("blabla");   // false

Number.isNaN(true);   	 // false
Number.isNaN(null);   	 // false
Number.isNaN(37);   	 // false
Number.isNaN("37");   	 // false
Number.isNaN("37.37");	 // false
Number.isNaN("");   	 // false
Number.isNaN(" ");   	 // false
로그인 후 복사

위의 예를 통해 기본적으로 기존 프로그램의 모든 상황을 다루고 있으며 전역 isNaN()을 사용해도 문제가 발생하지 않습니다. NaN인지 확인하려면 Number.isNaN(x) 메서드를 사용하는 것이 좋습니다. Number.isNaN 함수가 지원되지 않는 경우 (x != x) 표현식을 사용하여 변수 x가 NaN인지 여부를 감지할 수 있으므로 더 신뢰할 수 있습니다.

Number.parseInt()&Number.parseFloat()

메서드의 통일성을 유지하기 위해 전역 구문 분석기() 및 구문 분석기()가 ES6 숫자 객체에 이식되었습니다.

ES6의 Number 객체에 제공되는 Number.isFinite()와 Number.isNaN() 두 함수가 동일합니다. Number 아래의 두 메서드가 전역적으로만 이식된다는 것을 어떻게 증명할 수 있나요? 다음 예와 같이 === 연산자를 사용하여 판단할 수 있습니다. 

Number.parseInt === parseInt;				// true
Number.parseFloat === parseFloat;		// true
로그인 후 복사

위 코드에서 반환된 결과는 모두 true이며, 이는 이 두 함수가 전역 함수와 동일하며 변경되지 않았음을 나타냅니다. 구체적인 사용 방법은 ES5의 parsInt() 및 parseFloat() 함수를 참조하세요. 

// ES5的写法
parseInt('12.34') 						// 12
parseFloat('123.45#') 				// 123.45

// ES6的写法
Number.parseInt('12.34') 			// 12
Number.parseFloat('123.45#')  // 123.45
로그인 후 복사

글로벌 메서드를 점차적으로 줄이고 언어를 점진적으로 모듈화하기 위해 이 두 가지 글로벌 메서드를 Number 객체로 포팅합니다.

Number.isInteger()

이 함수를 배우기 전에 먼저 값이 정수인지 어떻게 판단하는지 복습해 볼까요?

1、判断一个值为整数

一种方法是：任何整数都会被 1 整除，即余数是 0。利用这个规则来判断是否是整数。就有如下函数：

function isInteger(value) {
	return typeof value === 'number' && value%1 === 0;
}
isInteger(5) 		// true
isInteger(5.5) 	// false
isInteger('') 	// false
isInteger('8') 	// false
isInteger(true) // false
isInteger([]) 	// false
로그인 후 복사

另一种方法是：使用 Math.round、Math.ceil、Math.floor 判断，因为整数取整后还是等于自己。利用这个特性来判断是否是整数，使用 Math.floor 示例，如下：

function isInteger(value) {
	return Math.floor(value) === value;
}
isInteger(5) 		// true
isInteger(5.5) 	// false
isInteger('') 	// false
isInteger('8') 	// false
isInteger(true) // false
isInteger([]) 	// false
로그인 후 복사

上面的两种方法算是比较常用的判断方式，其他的一些方式都存在一些问题，这里就不一一列举了。但是，这两种方法都不够简洁，ES6 把判断整数提升到了语言层面，下面我们来看下 Number.isInteger() 的使用。

2、Number.isInteger () 的用法

Number.isInteger() 是 ES6 新增的函数，用来判断给定的参数是否为整数。

Number.isInteger(25) // true
Number.isInteger(25.1) // false
로그인 후 복사

如果被检测的值是整数，则返回 true，否则返回 false。注意 NaN 和正负 Infinity 不是整数。

Number.isInteger(0);         // true
Number.isInteger(1);         // true
Number.isInteger(-100000);   // true

Number.isInteger(0.8);       // false
Number.isInteger(Math.PI);   // false

Number.isInteger(Infinity);  // false
Number.isInteger(-Infinity); // false
Number.isInteger("100");     // false
Number.isInteger(true);      // false
Number.isInteger(false);     // false
Number.isInteger([1]);       // false
로그인 후 복사

上面的代码基本涵盖了 JavaScript 中的值的判断，在一些不支持 ES6 语法的浏览器中可以使用上面的两种方式进行 Polyfill 处理。

Number.isSafeInteger()

Number.isSafeInteger() 是 ES6 新增的函数，用来判断传入的参数值是否是一个 “安全整数”（safe integer）在数值扩展的 小节 我们介绍了最大安全整数和最小安全整数，不记得的同学可以跳过去看看。

一个安全整数是一个符合下面条件的整数：

  • 可以准确地表示为一个 IEEE-754 双精度数字；

  • 其 IEEE-754 表示不能是舍入任何其他整数以适应 IEEE-754 表示的结果。

比如，2e53 - 1 是一个安全整数，它能被精确表示，在任何 IEEE-754 舍入模式（rounding mode）下，没有其他整数舍入结果为该整数。作为对比，2e53 就不是一个安全整数，它能够使用 IEEE-754 表示，但是 2e53 + 1 不能使用 IEEE-754 直接表示，在就近舍入（round-to-nearest）和向零舍入中，会被舍入为 2e53。

安全整数范围为 -(2e53 - 1)到 2e53 - 1 之间的整数，包含 -(2e53 - 1)和 2e53 - 1。

Number.isSafeInteger(3);                    // true
Number.isSafeInteger(Math.pow(2, 53))       // false
Number.isSafeInteger(Math.pow(2, 53) - 1)   // true
Number.isSafeInteger(NaN);                  // false
Number.isSafeInteger(Infinity);             // false
Number.isSafeInteger("3");                  // false
Number.isSafeInteger(3.1);                  // false
Number.isSafeInteger(3.0);                  // true
로그인 후 복사

【相关推荐：javascript视频教程、编程视频】

위 내용은 es6 숫자 객체의 새로운 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
javascript es6
원천：php.cn
이전 기사：반응과 es6이란 무엇입니까? 다음 기사：ES6에서 배열을 뒤집는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿