关于前端:JS基础JS数据类型

30次阅读

共计 4770 个字符,预计需要花费 12 分钟才能阅读完成。

JavaScript 数据类型是入门的根底知识点,同时也是最为重要的,咱们经常在代码中遇到边界数据类型条件判断问题,只有解决好能力让咱们的代码更为谨严。

数据类型的品种

JavaScript 是一种弱类型脚本语言,所谓弱类型指的是定义变量时,不须要什么类型,在程序运行过程中会主动判断类型。最新的 ECMAScript 规范定义了 8 种数据类型:蕴含 7 种根底数据类型和 1 种援用类型。

七种根本数据类型为:

  • 布尔值(Boolean),有 2 个值别离是:true 和 false
  • null,一个表明 null 值的非凡关键字。JavaScript 是大小写敏感的,因而 null 与 Null、NULL 或变体齐全不同
  • undefined,和 null 一样是一个非凡的关键字,undefined 示意变量未赋值时的属性
  • 数字(Number),整数或浮点数,例如:42 或者 3.14159
  • 任意精度的整数 (BigInt),能够平安地存储和操作大整数,甚至能够超过数字的平安整数限度
  • 字符串(String),字符串是一串示意文本值的字符序列,例如:”Howdy”
  • 代表(Symbol)(在 ECMAScript 6 中新增加的类型).。一种实例是惟一且不可扭转的数据类型

援用数据类型(Object)又分为 Array – 数组对象、RegExp – 正则对象、Date – 日期对象、Math – 数学函数、Function – 函数对象等常见类型。

其中根底数据类型存储在栈内存,被援用或拷贝时,会创立一个齐全相等的变量。援用类型存储在堆内存,存储的是地址,多个援用指向同一个地址。

数据类型判断

咱们日常工作中常常会用到数据类型的检测办法,以下三种检测办法是咱们常常用到的。

typeof

typeof 1           //'number'
typeof '1'         //'string'
typeof undefined   //'undefined'
typeof true        //'boolean'
typeof Symbol()    //'symbol'
typeof null        //'object'
typeof []          //'object'
typeof {}          //'object'
typeof /^a/g       //'object'
typeof console     //'object'
typeof console.log //'function'
typeof Array       //'function'
typeof Number      //'function'
typeof Object      //'function'
typeof Math        //'object'
typeof RegExp      //'function'
typeof Date        //'function'

以上输入后果,其中前 6 种都是根底数据类型,然而最初 null 的类型为 object,它不正确地表明 null 是一个对象,这是一个谬误,而且无奈修复,因为它会毁坏现有的代码。在 JS 的最后版本中,应用的是 32 位零碎,为了性能思考应用低位存储了变量的类型信息,000 结尾代表是对象,然而 null 示意为全零,所以将它谬误的判断为 object。尽管当初的外部类型判断代码曾经扭转了,然而对于这个 Bug 却是始终流传下来。

援用数据类型中能够看到除了函数像 Array、Date 等函数判断正确,其余都为 object,像数组字面量是无奈判断进去的。

instanceof

通过 instanceof 咱们能判断这个对象是否是之前那个构造函数生成的对象,这样就根本能够判断出这个新对象的数据类型。比方:

let car = new String('car')
car instanceof String // true

那么 instanceof 是怎么实现的呢?

function instanceof(left, right) {
    // 这里先用 typeof 来判断根底数据类型,如果是,间接返回 false
    if(typeof left !== 'object' || left === null) return false;
    // 取得类型的原型
    let prototype = right.prototype
    // 取得对象的原型
    left = Object.getPrototypeOf(left);
    // 判断对象的类型是否等于类型的原型
    while (true) {if (left === null)
            return false
        if (prototype === left)
            return true
        left = Object.getPrototypeof(left);
    }
}

以上能够看出 instanceof 能够精确地判断简单援用数据类型,然而不能正确判断根底数据类型,而 typeof 尽管能够判断根底数据类型(null 除外),然而援用数据类型中,除了 function 类型以外,其余的也无奈判断。为此这两种写法混写的形式能够去做判断,然而还有一种写法比以上两种更好,就是上面的第三种写法。

Object.prototype.toString

Object 的原型有 toString 办法,调用该办法,能够对立返回格局为‘[object Xxx]’的字符串,其中 Xxx 就是对象的类型,Xxx 第一个首字母要大写(留神:应用 typeof 返回的是小写)。对于 Object 对象,间接调用 toString() 就能返回 [object Object];而对于其余对象,则须要通过 call 来调用,能力返回正确的类型信息,如下所示。

Object.prototype.toString.call({})            // "[object Object]"
Object.prototype.toString.call(1)             // "[object Number]"
Object.prototype.toString.call('1')           // "[object String]"
Object.prototype.toString.call(true)          // "[object Boolean]"
Object.prototype.toString.call(function(){})  // "[object Function]"
Object.prototype.toString.call(null)          // "[object Null]"
Object.prototype.toString.call(undefined)     // "[object Undefined]"
Object.prototype.toString.call(/123/g)        // "[object RegExp]"
Object.prototype.toString.call(new Date())    // "[object Date]"
Object.prototype.toString.call([])            // "[object Array]"
Object.prototype.toString.call(document)      // "[object HTMLDocument]"
Object.prototype.toString.call(window)        // "[object Window]"

实现一个数据类型判断办法是如何编写呢?能够看一下

function getType(obj){
  let type  = typeof obj;
  if (type !== "object") {return type;}
  // 对于 typeof 返回后果是 object 的,进行如下的判断,正则返回后果
  return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1'); 
}

getType([])              // "Array" 
getType('123')           // "string" 
getType(window)          // "Window" 
getType(null)            // "Null"
getType(undefined)       // "undefined" 
getType()                // "undefined" 
getType(function(){})    // "function" 
getType(/123/g)          // "RegExp" 

数据类型转换

数据类型转换次要分为强制类型转换和隐式类型转换,其中隐式类型转换最须要重点记忆一下。

强制类型转换

强制类型转换形式包含 Number()、parseInt()、parseFloat()、Boolean() 等。

Number() 办法的强制转换规则:

  • 如果是布尔值,true 和 false 别离被转换为 1 和 0。
  • 如果是数字,返回本身。
  • 如果是 null,返回 0。
  • 如果是 undefined,返回 NaN。
  • 如果是字符串,遵循以下规定:如果字符串中只蕴含数字(或者是 0X / 0x 结尾的十六进制数字字符串,容许蕴含正负号),则将其转换为十进制;如果字符串中蕴含无效的浮点格局,将其转换为浮点数值;如果是空字符串,将其转换为 0;如果不是以上格局的字符串,均返回 NaN。
  • 如果是 Symbol,抛出谬误。
  • 如果是对象,并且部署了 [Symbol.toPrimitive],那么调用此办法,否则调用对象的 valueOf() 办法,而后根据后面的规定转换返回的值;如果转换的后果是 NaN,则调用对象的 toString() 办法,再次按照后面的程序转换返回对应的值。

parseInt() 办法的强制转换规则:

这个办法的规定是:除了字符串参数的第一个字符为数字返回的后果为数字外,其余都是 NAN。

parseFloat()

这个办法的规定和 parseInt 相似,如果给定值能被解析成浮点数,则返回浮点数。如果给定值不能被转换成数值,则会返回 NAN。

Boolean() 办法的强制转换规则:

这个办法的规定是:除了 undefined、null、false、”、0(包含 +0,-0)、NaN 转换进去是 false,其余都是 true。

隐式类型转换

但凡通过逻辑运算符 (&&、||、!)、运算符 (+、-、*、/)、关系操作符 (>、<、<=、>=)、相等运算符 (==) 或者 if/while 条件的操作,如果遇到两个数据类型不一样的状况,都会呈现隐式类型转换。

以“==”和“+”为例重点解说一下隐式转换的规定。

‘==’的隐式类型转换规定:

  • 如果其中一个操作值是 null 或者 undefined,那么另一个操作符必须为 null 或者 undefined,才会返回 true,否则都返回 false。
  • 如果其中一个是 Symbol 类型,那么返回 false。
  • 两个操作值如果为 string 和 number 类型,那么就会将字符串转换为 number。
  • 如果一个操作值是 boolean,那么转换成 number。
  • 如果一个操作值为 object 且另一方为 string、number 或者 symbol,就会把 object 转为原始类型再进行判断(调用 object 的 valueOf/toString 办法进行转换)。

‘+’的隐式类型转换规定:

‘+’号操作符,不仅能够用作数字相加,还能够用作字符串拼接。仅当‘+’号两边都是数字时,进行的是加法运算;如果两边都是字符串,则间接拼接,毋庸进行隐式类型转换。当然除了数字和字符串外,还有一些其余的类型规定,如下所示:

  • 如果其中有一个是字符串,另外一个是 undefined、null 或布尔型,则调用 toString() 办法进行字符串拼接。
  • 如果其中有一个是数字,另外一个是 undefined、null、布尔型或数字,则会将其转换成数字进行加法运算。
  • 如果其中一个是字符串、一个是数字,则依照字符串规定进行拼接。
  • 如果其中有一个是字符串,另外一个是对象的话,对象转换的规定,1、如果部署了 Symbol.toPrimitive 办法,优先调用再返回。2、调用 valueOf(),如果转换为根底类型,则返回。3、调用 toString(),如果转换为根底类型,则返回。4、如果都没有返回根底类型,会报错。

以上就是数据类型局部相干的内容了,作为前端开发人员还是要致力扎实基本功。

正文完
 0