JS 变量类型

JS 中有 6 种原始值,分别是:

  1. boolean
  2. number
  3. string
  4. undefined
  5. symbol
  6. null

引用类型:

  1. 对象
  2. 数组
  3. 函数

JS 中使用 typeof 能得到哪些类型?

其中一个奇怪的 null,虽然是基本变量,但是因为设计的时候null是全 0,而对象是000开头,所以有这个误判。

  1. boolean
  2. number
  3. string
  4. undefined
  5. symbol
  6. object
  7. function
  8. bigint

instanceof 能正确判断对象的原理是什么?

判断一个对象与构造函数是否在一个原型链上

const Person = function () {};
const p1 = new Person();
p1 instanceof Person; // true

var str = "hello world";
str instanceof String; // false

var str1 = new String("hello world");
str1 instanceof String; // true

实现一个类型判断函数

  1. 判断 null
  2. 判断基础类型
  3. 使用Object.prototype.toString.call(target)来判断引用类型

注意: 一定是使用call来调用,不然是判断的 Object.prototype 的类型 之所以要先判断是否为基本类型是因为:虽然Object.prototype.toString.call()能判断出某值是:number/string/boolean,但是其实在包装的时候是把他们先转成了对象然后再判断类型的。 但是 JS 中包装类型和原始类型还是有差别的,因为对一个包装类型来说,typeof 的值是 object

/**
 * 类型判断
 */
function getType(target) {
  //先处理最特殊的Null
  if (target === null) {
    return "null";
  }
  //判断是不是基础类型
  const typeOfT = typeof target;
  if (typeOfT !== "object") {
    return typeOfT;
  }
  //肯定是引用类型了
  const template = {
    "[object Object]": "object",
    "[object Array]": "array",
    // 一些包装类型
    "[object String]": "object - string",
    "[object Number]": "object - number",
    "[object Boolean]": "object - boolean",
  };
  const typeStr = Object.prototype.toString.call(target);
  return template[typeStr];
}

"a common string"为什么会有 length 属性

通过字面量的方式创建:var a = 'string';,这时它就是基本类型值;通过构造函数的方式创建:var a = new String('string');这时它是对象类型。

基本类型是没有属性和方法的,但仍然可以使用对象才有的属性方法。这时因为在对基本类型使用属性方法的时候,后台会隐式的创建这个基本类型的对象,之后再销毁这个对象

如何判断一个数据是不是 Array

  • Array.isArray(obj)
    
    • ECMAScript 5 种的函数,当使用 ie8 的时候就会出现问题。
  • obj instanceof Array
    
    • 当用来检测在不同的 window 或 iframe 里构造的数组时会失败。这是因为每一个 iframe 都有它自己的执行环境,彼此之间并不共享原型链,所以此时的判断一个对象是否为数组就会失败。此时我们有一个更好的方式去判断一个对象是否为数组。
  • Object.prototype.toString.call(obj) == '[object Array]'
    
    • 这个方法比较靠谱
  • obj.constructor === Array
    
    • constructor 属性返回对创建此对象的函数的引用

undefined 可被赋值

在 ES3 中(Firefox4 之前),window.undefined 就是一个普通的属性,你完全可以把它的值改变成为任意的真值,但在 ES5 中((Firefox4 之后),window.undefined 成了一个不可写,不可配置的数据属性,它的值永远是 undefined。

var undefined = 1;
alert(undefined); // chrome: undefined,  ie8: 1

不管是标准浏览器,还是老的 IE 浏览器,在函数内部 undefined 可作为局部变量重新赋值

function fn() {
  var undefined = 100;
  alert(undefined); //chrome: 100,  ie8: 100
}
fn();

有时候我们需要判断一个变量是不是 undefined,会这样用

if (str === undefined) {
  console.log("I am empty");
}

但假如 str 这个变量没声明就会出现报错,用下面的方式会更好一些

if (typeof str === "undefined") {
  console.log("I am better");
}

有时候我们会看到这种写法

if (str === void 0) {
  console.log("I am real undefind");
}

那是因为 「void 0」的执行结果永远是「undefined」, 即使在某些老旧浏览器 或者在某个函数中 undefined 被重新赋值,我们仍然可以通过void 0得到真正的 undefined

参考链接

https://github.com/huyaocode/webKnowledge/blob/master/0-%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/JS/1-%E5%8F%98%E9%87%8F%E7%B1%BB%E5%9E%8B.md

Copyright © aaron 2023 all right reserved,powered by Gitbook该文章修订时间: 2023-06-07 14:12:13

results matching ""

    No results matching ""