JS 데이터 유형 판단의 몇 가지 상용 방법

JavaScript에서 흔히 볼 수 있는 데이터 유형은 Number, String, Boolean, Object, Array, Json, Function, Date, Regexp, Error, undefined, Null 등 10여 가지이다.ES6에는 Symbol, Set, Map 등의 새로운 데이터 유형도 있습니다.실제 응용에서 우리는 항상 데이터 유형을 판단해야 한다. 현재 나는 몇 가지 방법을 귀납하고 모두에게 도움이 되기를 바란다.
typeof 판단(최상용)typeof 는 JS에서 제공하는 연산자로 변수의 유형을 검사하는 데 전문적으로 쓰인다. typeof 에는 두 가지 사용 방식이 있는데 그것이 바로 typeof(표현식)와 typeof 변수 이름이다. 첫 번째는 표현식에 대한 연산이고 두 번째는 변수에 대한 연산이다.

function doSomething() {
  console.log('Hello World!');
}
console.log(typeof 1); // number
console.log(typeof 'Hello'); // string
console.log(typeof []); // object
console.log(typeof {}); // object
console.log(typeof doSomething); // function
console.log(typeof true); // boolean
console.log(typeof new Date()); // object
console.log(typeof new RegExp()); // object
console.log(typeof JSON.stringify({
  name: 'zhencanhua'
})); // string
console.log(typeof null); // object
console.log(typeof undefined); // undefined
console.log(typeof (new Error('error!'))); // object

console.log(typeof a); // undefined
console.log(typeof Symbol()); // symbol
console.log(typeof new Set()); // object
console.log(typeof new Map()); // object

위의 인쇄 결과를 보면 typeof 인용형 데이터의 유형과null을 구분할 수 없습니다.그리고 우리는 Array를 사용할 수 있습니다.isArray(arr)는 그룹 형식의 데이터를 선별합니다.
instanceof 판단(이해)instanceof 구조 함수의 prototype 속성이 특정한 실례 대상의 원형 체인에 나타나는지 검사하는 데 사용된다.문법:object (실례 대상) instanceof constructor (구조 함수).그렇다면true로 돌아가고, 그렇지 않으면false로 돌아갑니다.따라서 instanceof 연산자는 대상의 판단으로만 사용할 수 있다.typeof 판단할 수 없는 인용형 데이터에 대해 우리는 instanceof 연산자를 사용할 수 있다.

let arr1 = [1, 2, 3];
let obj1 = {
  name: ' '
};
function Persion() { }
let persion1 = new Persion();
console.log(arr1 instanceof Array); // true
console.log(arr1 instanceof Object); // true，Array  Object 
console.log(obj1 instanceof Object); // true
console.log(obj1 instanceof Array); // false
console.log(Persion instanceof Function, Persion instanceof Object); // true true
console.log(null instanceof Object); // false
console.log(persion1 instanceof Persion, persion1 instanceof Function, persion1 instanceof Object); // true false true
// String Date Object 
let str1 = 'Hello';
let str2 = new String();
let str3 = new String(' ');
let myDate = new Date();
console.log(str1 instanceof String, str1 instanceof Object); // false, false
console.log(str2 instanceof String, str2 instanceof Object); // true, true
console.log(str3 instanceof String, str3 instanceof Object); // true, true
console.log(myDate instanceof Date, myDate instanceof Object); // true, true

위의 판단을 통해 알 수 있듯이 instanceof 의 사용 제한이 매우 많고 하나의 실례가 수조인지 대상이나 방법인지 명확하고 편리하게 판단할 수 없다.
위의 방법의 폐단에 대하여 우리는 Object를 사용할 수 있다.prototype의 원본 toString () 방법으로 데이터의 유형을 측정합니다.
Object.prototype.toString.call() 판단(가장 믿을 만함)
Object는 JS에서 제공하는 원래 객체입니다. Object.prototype.toString은 모든 변수에 "[object class]"문자열을 되돌려줍니다. class는 JS 내장 대상의 구조 함수 이름입니다.call은 호출 함수 작용역을 바꾸는 데 사용됩니다.
Object.prototype.toString()은 toString 메서드가 호출될 때 다음 절차를 수행합니다.

this 객체의 [Class]] 속성 값을 가져옵니다.(그래서 콜을 사용하여this의 지향을 바꾼다)

문자열 "[object", 첫 번째 값, "]"를 새 문자열로 연결하고 되돌려줍니다.

[[Class]]는 모든 객체(원본 객체와 숙주 객체)가 소유하는 내부 속성입니다.규범에서 [[Class]]는 다음과 같이 정의된다. 내부 속성에 대한 설명, [[Class]]는 문자열 값으로 이 대상의 유형을 나타낸다.
위의 설명을 읽었습니다.call의 관건은 첫 번째 단계입니다.this 대상을 얻었습니다.call을 추가하지 않고 역할 영역을 바꿀 때this가 가리키는 것은 Object입니다.prototype.

function doSomething() {
  console.log('Hello World!');
}
//  Object.prototype.toString.call 
console.log(Object.prototype.toString.call(1)); // [object Number]
console.log(Object.prototype.toString.call('Hello')); // [object String]
console.log(Object.prototype.toString.call(false)); // [object Boolean]
console.log(Object.prototype.toString.call({})); // [object Object]
console.log(Object.prototype.toString.call([1, 2, 3])); // [object Array]
console.log(Object.prototype.toString.call(new Error('error!'))); // [object Error]
console.log(Object.prototype.toString.call(new Date())); // [object Date]
console.log(Object.prototype.toString.call(new RegExp())); // [object RegExp]
console.log(Object.prototype.toString.call(doSomething)); // [object Function]
console.log(Object.prototype.toString.call(null)); // [object Null]
console.log(Object.prototype.toString.call(undefined)); // [object Undefined]
console.log(Object.prototype.toString.call(JSON.stringify({
  name: 'zhencanhau'
}))); // [object String]
console.log(Object.prototype.toString.call(Math)); // [object Math]
console.log(Object.prototype.toString.call(Symbol('abc'))); // [object Symbol]
console.log(Object.prototype.toString.call(new Set())); // [object Set]
console.log(Object.prototype.toString.call(new Map())); // [object Map]

그러나 실제 응용 프로그램에서 우리는 되돌아오는 결과의 두 번째 항목, 예를 들어 "[object Number]"만 가져오고 싶을 뿐, 우리는 Number라는 문자만 원한다. 그러면 우리는 함수를 써서 필터를 할 수 있다.

//  
function getTypeName(val) {
  let str = Object.prototype.toString.call(val);
  return /^\[object (.*)\]$/.exec(str)[1];
}
console.log(getTypeName(false)); // Boolean
console.log(getTypeName()); // Undefined
console.log(getTypeName(null)); // Null

위의 문제는 완벽하게 해결되었다.
constructor 판단(상용)
모든 대상의 실례는 constrcutor 대상을 통해 구조 함수에 접근할 수 있다.JS에는 Object, Array, Function, Date, RegExp, String 등 구조 함수가 내장되어 있다.우리는 데이터의 constrcutor 구조 함수와 같은지 여부를 통해 데이터의 유형을 판단할 수 있다.

var arr = [];
var obj = {};
var date = new Date();
var num = 110;
var str = 'Hello';
var getName = function(){};
var sym = Symbol();
var set = new Set();
var map = new Map();

arr.constructor === Array; // true
obj.constructor === Object; // true
date.constructor === Date; // true
str.constructor === String; // true
getName.constructor === Function; // true
sym.constructor === Symbol; // true
set.constructor === Set; // true
map.constructor === Map // true

그러나 이런 방식은 여전히 폐단이 있다. 바로 constructor이 가리키는 구조 함수는 수정될 수 있다는 것이다.

function Name(name) {
  this.name = name;
}

function Stuent(age) {
  this.age = age;
}
//  Name Student ，Student ， 。
Stuent.prototype = new Name(' ');
Stuent.prototype.constructor === Name; // true
Stuent.prototype.constructor === Stuent; // false

이상은 제가 프로젝트에서 사용한 데이터 유형의 판단 방법입니다. 구체적으로 어떤 것을 사용하는지 자신의 실제 수요에 따라 선택을 판단해야 합니다.
JS 데이터 형식 판단에 관한 몇 가지 자주 사용하는 방법에 관한 이 글을 소개합니다. JS 데이터 형식 판단 내용과 관련된 더 많은 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!