자바스크립트에서 데이터 유형을 결정하는 여러 가지 방법

JavaScript 코드를 작성할 때 변수와 리터럴의 유형을 결정해야 하는 경우가 많습니다. typeof, instanceof, Array.isArray() 및 기타 방법이 가장 편리하고 실용적입니다. 걱정 없나요? 이 기사에서는 이 문제를 살펴봅니다.

1.typeof

1.1 구문

typeof는 계산되지 않은 피연산자의 유형을 나타내는 문자열을 반환합니다.

구문: ​​typeof(operand) | typeof 피연산자

매개변수: 반환될 객체 또는 기본 값을 나타내는 표현식

설명: typeof가 반환할 수 있는 값은 다음과 같습니다.

[ 관련 강좌 추천: JavaScript 비디오 튜토리얼 ]

Type Result

Undefined“undefined”
Null“object”
Boolean“boolean”
Number“number”
Bigint“bigint”
String“string”
Symbol“symbol”

Host 객체(JS 환경에서 제공) 특정 구현에 따라 다름

Function 객체 "function"

다른 객체 "object"

에서 정의 및 설명 관점에서 볼 때 이 구문은 많은 데이터 유형이 결정되지만, 잘 살펴보면 typeof null이 실제로 "객체"를 반환하므로 혼란스럽습니다. 먼저 이 효과를 살펴보겠습니다. :

// 数值
console.log(typeof 37) // number
console.log(typeof 3.14) // number
console.log(typeof(42)) // number
console.log(typeof Math.LN2) // number
console.log(typeof Infinity) // number
console.log(typeof NaN) // number 尽管它是Not-A-Number的缩写，实际NaN是数字计算得到的结果，或者将其他类型变量转化成数字失败的结果
console.log(Number(1)) //number Number(1)构造函数会把参数解析成字面量
console.log(typeof 42n) //bigint
// 字符串
console.log(typeof '') //string
console.log(typeof 'boo') // string
console.log(typeof `template literal`) // string
console.log(typeof '1') //string 内容为数字的字符串仍然是字符串
console.log(typeof(typeof 1)) //string，typeof总是返回一个字符串
console.log(typeof String(1)) //string String将任意值转换成字符串
// 布尔值
console.log(typeof true) // boolean
console.log(typeof false) // boolean
console.log(typeof Boolean(1)) // boolean Boolean会基于参数是真值还是虚值进行转换
console.log(typeof !!(1)) // boolean 两次调用!!操作想短语Boolean()
// Undefined
console.log(typeof undefined) // undefined
console.log(typeof declaredButUndefinedVariabl) // 未赋值的变量返回undefined
console.log(typeof undeclaredVariable ) // 未定义的变量返回undefined
// 对象
console.log(typeof {a: 1}) //object
console.log(typeof new Date()) //object
console.log(typeof /s/) // 正则表达式返回object
// 下面的例子令人迷惑，非常危险，没有用处，应避免使用，new操作符返回的实例都是对象
console.log(typeof new Boolean(true)) // object
console.log(typeof new Number(1)) // object
console.log(typeof new String('abc')) // object
// 函数
console.log(typeof function () {}) // function
console.log(typeof class C { }) // function
console.log(typeof Math.sin) // function

1.2 신비한 null

javascript typeof null은 항상 '객체'를 반환했습니다. 이는 JavaScript의 값이 두 부분으로 구성되어 있기 때문입니다. 한 부분은 유형을 나타내는 레이블이고 다른 부분은 유형입니다. 부분은 실제 값을 나타냅니다. 객체 유형의 값 유형 레이블은 0입니다. 불행히도 null은 널 포인터를 나타내고 해당 유형 레이블도 0으로 설계되어 있으므로 null === 'object', '악마의 아들' 유형이 있습니다. .

Null 유형을 'null'로 반환하도록 하는 ECMAScript 제안이 있었지만 해당 제안은 거부되었습니다.

1.3 새 연산자 사용

Function을 제외한 모든 생성자의 유형은 다음과 같이 '객체'입니다.

var str = new String('String');    
var num = new Number(100)
console.log(typeof str) // object
console.log(typeof num) // object
var func = new Function()
console.log(typeof func) // function

1.4 구문

typeof 연산의 괄호는 "+ ” 연산보다 우선순위가 높습니다. , 그러나 괄호 아래에는

    var iData = 99
    console.log(typeof iData + ' Wisen') // number Wisen
    console.log(typeof (iData + 'Wisen')) // string

1.5 정규식 판단의 호환성 문제

typeof /s/ === 'function'; // Chrome 1-12 , 不符合 ECMAScript 5.1
typeof /s/ === 'object'; // Firefox 5+ , 符合 ECMAScript 5.1

1.6 오류

ECMAScript 2015 이전에는 typeof가 항상 주어진 피연산자에 대해 문자를 반환하도록 보장되었습니다. 문자열의 경우 선언이 없더라도 또는 할당된 식별자인 typeof는 여전히 정의되지 않은 값을 반환할 수 있습니다. 즉, typeof를 사용하면 오류가 보고되지 않습니다.

그러나 블록 수준 범위와 let 및 const 명령이 ES6에 추가된 후 변수 선언 전에 let 및 const로 선언된 변수를 사용하면 블록 수준 범위 변수가 블록 헤드에서 선언되어 ReferenceError 오류가 발생합니다. 선언된 변수 사이에는 "임시 데드 존"이 있으며, 그 동안 변수에 액세스하면 오류가 발생합니다. 다음과 같습니다:

    console.log(typeof undeclaredVariable) // 'undefined'
    console.log(typeof newLetVariable) // ReferenceError
    console.log(typeof newConstVariable) // ReferenceError
    console.log(typeof newClass) // ReferenceError
    let newLetVariable
    const newConstVariable = 'hello'
    class newClass{}

1.7 Exception

현재 모든 브라우저는 정의되지 않은 유형의 비표준 호스트 개체 document.all을 노출합니다. typeof document.all === '정의되지 않음'. 랜드스케이프 사양은 비표준 외부 개체에 대한 사용자 정의 유형 태그를 허용합니다. 이러한 유형 태그가 기존 태그와 다르기만 하면 됩니다. 정의되지 않은 모든 유형 태그는 원래 ECMA JavaScript 표준의 "의도적인 위반"으로 분류됩니다. 웹 필드 침해'는 브라우저 장난일 수 있습니다.

요약: typeof는 변수나 값의 유형 레이블을 반환하지만 대부분의 유형에 대해 올바른 결과를 반환할 수 있지만 null, 생성자 인스턴스 및 정규 표현식에는 적합하지 않습니다.

2.instanceof

2.1 구문

instanceof 연산자는 생성자의 프로토타입이 인스턴스 객체(매개변수)의 프로토타입 체인에 나타나는지 여부를 감지하는 데 사용됩니다.

구문: ​​객체 인스턴스 오브 생성자

매개변수: 객체 인스턴스 객체

생성자 생성자 함수

설명: 인스턴스 오브 연산자는 매개변수 객체의 프로토타입 체인에 constructor.property가 존재하는지 여부를 감지하는 데 사용됩니다.

    // 定义构造函数
    function C() {
    }    function D() {
    }    var o = new C()
    console.log(o instanceof C) //true,因为Object.getPrototypeOf(0) === C.prototype
    console.log(o instanceof D) //false，D.prototype不在o的原型链上
    console.log(o instanceof Object) //true 同上
    C.prototype = {}    var o2 = new C()
    console.log(o2 instanceof C) // true
    console.log(o instanceof C) // false C.prototype指向了一个空对象，这个空对象不在o的原型链上
    D.prototype = new C() // 继承
    var o3 = new D()
    console.log(o3 instanceof D) // true
    console.log(o3 instanceof C) // true C.prototype现在在o3的原型链上

obj instanceof Foo 표현식이 true를 반환한다고 해서 해당 표현식이 항상 true를 반환한다는 의미는 아닙니다. Foo.prototype 속성의 값이 수정될 수 있으며 수정된 값이 프로토타입 체인에서 현재 표현식의 값은 false입니다. 또 다른 상황은 obj의 프로토타입 체인을 변경하는 것입니다. 현재 ES 사양에서는 객체의 프로토타입을 읽을 수만 있고 수정할 수 없지만, 비표준 __proto__ 의사 속성을 사용하여 수정할 수 있습니다. obj.__proto__ = {} 이후 실행 시 obj instanceof Foo는 false를 반환합니다. 또한 ES6의 Object.setPrototypeOf() 및 Reflect.setPrototypeOf()는 객체의 프로토타입을 수정할 수 있습니다.

인스턴스 및 여러 전역 개체(여러 iframe 또는 여러 창 간의 상호 작용)

브라우저에서 자바스크립트 스크립트는 여러 창 간에 상호 작용해야 할 수 있습니다. 여러 창은 여러 전역 환경을 의미하며, 서로 다른 전역 환경에는 서로 다른 전역 개체가 있으므로 내장 생성자가 다릅니다. 이로 인해 몇 가지 문제가 발생할 수 있습니다. 예를 들어, [] 인스턴스of window.frames[0].Array 표현식은

때문에 false를 반환합니다.

Array.prototype !== window.frames[0].Array.prototype。

起初，这样可能没有意义，但是当在脚本中处理多个frame或多个window以及通过函数将对象从一个窗口传递到另一个窗口时，这就是一个非常有意义的话题。实际上，可以通过Array.isArray(myObj)或者Object.prototype.toString.call(myObj) = "[object Array]"来安全的检测传过来的对象是否是一个数组。

2.2 示例

String对象和Date对象都属于Object类型（它们都由Object派生出来）。

但是，使用对象文字符号创建的对象在这里是一个例外，虽然原型未定义，但是instanceof of Object返回true。

var simpleStr = "This is a simple string";
    var myString  = new String();
    var newStr    = new String("String created with constructor");
    var myDate    = new Date();
    var myObj     = {};
    var myNonObj  = Object.create(null);

    console.log(simpleStr instanceof String); // 返回 false,虽然String.prototype在simpleStr的原型链上，但是后者是字面量，不是对象
    console.log(myString  instanceof String); // 返回 true
    console.log(newStr    instanceof String); // 返回 true
    console.log(myString  instanceof Object); // 返回 true

    console.log(myObj instanceof Object);    // 返回 true, 尽管原型没有定义
    console.log(({})  instanceof Object);    // 返回 true, 同上
    console.log(myNonObj instanceof Object); // 返回 false, 一种创建非 Object 实例的对象的方法

    console.log(myString instanceof Date); //返回 false

    console.log( myDate instanceof Date);     // 返回 true
    console.log(myDate instanceof Object);   // 返回 true
    console.log(myDate instanceof String);   // 返回 false

注意：instanceof运算符的左边必须是一个对象，像"string" instanceof String，true instanceof Boolean这样的字面量都会返回false。

下面代码创建了一个类型Car，以及该类型的对象实例mycar，instanceof运算符表明了这个myca对象既属于Car类型，又属于Object类型。

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
var mycar = new Car("Honda", "Accord", 1998);
var a = mycar instanceof Car;    // 返回 true
var b = mycar instanceof Object; // 返回 true

不是...的实例

要检测对象不是某个构造函数的实例时，可以使用!运算符，例如if(!(mycar instanceof Car))

instanceof虽然能够判断出对象的类型，但是必须要求这个参数是一个对象，简单类型的变量，字面量就不行了，很显然，这在实际编码中也是不够实用。

总结：obj instanceof constructor虽然能判断出对象的原型链上是否有构造函数的原型，但是只能判断出对象类型变量，字面量是判断不出的。

3. Object.prototype.toString()

3.1. 语法

toString()方法返回一个表示该对象的字符串。

语法：obj.toString()

返回值：一个表示该对象的字符串

描述：每个对象都有一个toString()方法，该对象被表示为一个文本字符串时，或一个对象以预期的字符串方式引用时自动调用。默认情况下，toString()方法被每个Object对象继承，如果此方法在自定义对象中未被覆盖，toString()返回“[object type]”，其中type是对象的类型，看下面代码：

var o = new Object();
 console.log(o.toString()); // returns [object Object]

注意：如ECMAScript 5和随后的Errata中所定义，从javascript1.8.5开始，toString()调用null返回[object, Null]，undefined返回[object Undefined]

3.2. 示例

覆盖默认的toString()方法

可以自定义一个方法，来覆盖默认的toString()方法，该toString()方法不能传入参数，并且必须返回一个字符串，自定义的toString()方法可以是任何我们需要的值，但如果带有相关的信息，将变得非常有用。

下面代码中定义Dog对象类型，并在构造函数原型上覆盖toString()方法，返回一个有实际意义的字符串，描述当前dog的姓名，颜色，性别，饲养员等信息。

function Dog(name,breed,color,sex) {
        this.name = name;
        this.breed = breed;        
        this.color = color;        
        this.sex = sex;
    }
    Dog.prototype.toString = function dogToString() {        
    return "Dog " + this.name + " is a " + this.sex + " " + this.color + " " + this.breed
    }    
    var theDog = new Dog("Gabby", "Lab", "chocolate", "female");
    console.log(theDog.toString()) //Dog Gabby is a female chocolate Lab

4. 使用toString()检测数据类型

目前来看toString()方法能够基本满足javascript数据类型的检测需求，可以通过toString()来检测每个对象的类型。为了每个对象都能通过Object.prototype.toString()来检测，需要以Function.prototype.call()或者Function.prototype.apply()的形式来检测，传入要检测的对象或变量作为第一个参数，返回一个字符串"[object type]"。

    // null undefined
    console.log(Object.prototype.toString.call(null)) //[object Null] 很给力
    console.log(Object.prototype.toString.call(undefined)) //[object Undefined] 很给力
    // Number
    console.log(Object.prototype.toString.call(Infinity)) //[object Number]
    console.log(Object.prototype.toString.call(Number.MAX_SAFE_INTEGER)) //[object Number]
    console.log(Object.prototype.toString.call(NaN)) //[object Number]，NaN一般是数字运算得到的结果，返回Number还算可以接受
    console.log(Object.prototype.toString.call(1)) //[object Number]
    var n = 100
    console.log(Object.prototype.toString.call(n)) //[object Number]
    console.log(Object.prototype.toString.call(0)) // [object Number]
    console.log(Object.prototype.toString.call(Number(1))) //[object Number] 很给力
    console.log(Object.prototype.toString.call(new Number(1))) //[object Number] 很给力
    console.log(Object.prototype.toString.call('1')) //[object String]
    console.log(Object.prototype.toString.call(new String('2'))) // [object String]
    // Boolean
    console.log(Object.prototype.toString.call(true)) // [object Boolean]
    console.log(Object.prototype.toString.call(new Boolean(1))) //[object Boolean]
    // Array
    console.log(Object.prototype.toString.call(new Array(1))) // [object Array]
    console.log(Object.prototype.toString.call([])) // [object Array]
    // Object
    console.log(Object.prototype.toString.call(new Object())) // [object Object]
    function foo() {}
    let a = new foo()
    console.log(Object.prototype.toString.call(a)) // [object Object]
    // Function
    console.log(Object.prototype.toString.call(Math.floor)) //[object Function]
    console.log(Object.prototype.toString.call(foo)) //[object Function]
    // Symbol
    console.log(Object.prototype.toString.call(Symbol('222'))) //[object Symbol]
    // RegExp
    console.log(Object.prototype.toString.call(/sss/)) //[object RegExp]

上面的结果，除了NaN返回Number稍微有点差池之外其他的都返回了意料之中的结果，都能满足实际开发的需求，于是我们可以写一个通用的函数来检测变量，字面量的类型。如下：

    let Type = (function () {
        let type = {};
        let typeArr = [&#39;String&#39;, &#39;Object&#39;, &#39;Number&#39;, &#39;Array&#39;, &#39;Undefined&#39;, &#39;Function&#39;, &#39;Null&#39;, &#39;Symbol&#39;, &#39;Boolean&#39;, &#39;RegExp&#39;， &#39;BigInt&#39;];        for (let i = 0; i < typeArr.length; i++) {
            (function (name) {
                type[&#39;is&#39; + name] = function (obj) {                    return Object.prototype.toString.call(obj) === &#39;[object &#39; + name + &#39;]&#39;
                }
            })(typeArr[i])
        }        return type
    })()
    let s = true
    console.log(Type.isBoolean(s)) // true
    console.log(Type.isRegExp(/22/)) // true

除了能检测ECMAScript规定的八种数据类型（七种原始类型，Boolean，Null，Undefined，Number，BigInt，String，Symbol，一种复合类型Object）之外，还能检测出正则表达式RegExp，Function这两种类型，基本上能满足开发中的判断数据类型需求。

5. 判断相等

既然说道这里，不妨说一说另一个开发中常见的问题，判断一个变量是否等于一个值。ES5中比较两个值是否相等，可以使用相等运算符（==），严格相等运算符（===），但它们都有缺点，== 会将‘4’转换成4，后者NaN不等于自身，以及+0 !=== -0。ES6中提出”Same-value equality“（同值相等）算法，用来解决这个问题。Object.is就是部署这个算法的新方法，它用来比较两个值是否严格相等，与严格比较运算（===）行为基本一致。

    console.log(5 == '5') // true
    console.log(NaN == NaN) // false
    console.log(+0 == -0) // true
    console.log({} == {}) // false
    console.log(5 === '5') // false
    console.log(NaN === NaN) // false
    console.log(+0 === -0) // true
    console.log({} === {}) // false

Object.js()不同之处有两处，一是+0不等于-0，而是NaN等于自身，如下：

    let a = {}
    let b = {}
    let c = b
    console.log(a === b) // false
    console.log(b === c) // true
    console.log(Object.is(b, c)) // true

注意两个空对象不能判断相等，除非是将一个对象赋值给另外一个变量，对象类型的变量是一个指针，比较的也是这个指针，而不是对象内部属性，对象原型等。

本文来自 js教程 栏目，欢迎学习！  

위 내용은 자바스크립트에서 데이터 유형을 결정하는 여러 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!