扎实基础篇-----你可能会忽略的关于类型的一些小细节

芒果啊
310 阅读4分钟

这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战；

前言

javaScript的类型，相信对于学前端的小伙伴们来说，应该是最熟悉的概念了吧，我们要知道js语言的每一个值都会属于其中某一种数据类型。

这里，我们先来简单过一下数据类型的分类。正文部分，再主要讲解一下数据类型你可能忽略的小细节。

  • 基本数据类型（也叫做“值类型”）
    • String
    • Number
    • boolean
    • undefined
    • null
    • Symbol
  • 引用数据类型 （也叫做“对象类型”）
    • Object
    • Function
    • Array

正文

Number类型

关于Number类型，有个经典例题，相信小伙伴们一定不陌生。

    console.log( 0.1 + 0.2 == 0.3); // "false"

既然输出 false，那就说明等式两边是不相等的；这里会涉及到浮点数运算的精度丢失问题，这个问题会导致等式左右的结果并不是严格相等的，而是相差了微小的值。

所以，我们需要知道，对于非整数的Number类型，不能用==（或者===）来比较。比较正确的方法是这样，使用javaScript提供的最小精度值来比较：只要等式两边的差的绝对值小于最小精度值，那就会返回 true。

    console.log( Math.abs(0.1 + 0.2 - 0.3) <= Number.EPSILON); // "true"

关于对于浮点数的理解就不过多在这里介绍了，小伙伴们可以参考这篇文章：如何理解浮点数

Object类型和Symbol类型

Symbol，它是一切非字符串的对象key的集合，它可以用于创建对象的唯一标识符。这里不过多讨论，下面来看一个全ymbol 函数无法使用 new 来调用的例子🌰

    let myBoolean = new Boolean(); 
    console.log(typeof myBoolean); // "object" 
    let myString = new String(); 
    console.log(typeof myString); // "object" 
    let myNumber = new Number(); 
    console.log(typeof myNumber); // "object"  

    let mySymbol = new Symbol(); // TypeError: Symbol is not a constructor

Symbol()函数不能与 new 关键字一起作为构造函数使用。这样做是为了避免创建符号包装对象，通俗来讲就是保证它不会覆盖已有的对象属性；像使用 Boolean、String 或 Number 那样，它们都支持构造函数且可用于初始化包含原始值的包装对象。

类型转换

js是弱类型语言，所以类型转换非常频繁。好多我们熟悉的运算规则都会去先进行类型转换，如果不去转换或者转换错误，就很容易造成一些代码中判断失误。

  • 字符串转换

    • 当我们需要字符串类型的值是，就需要用到字符串转换。
      举个例子，比如我们需要输出打印一个字符串类型的数值，要怎么做呢？ 
          let value = true; 
    console.log(typeof value); // "boolean"
    value = String(value); // 现在，值就是一个字符串形式的 "true"
    console.log(typeof value); // string*

    这里就是通过String(value) 来将 value 转换为字符串类型

  • 数字转换

    • 进行数字类型转换我们熟知的有parseInt 、parseFloat、Number。其实，多数情况下，Number是我们更好的选择。 这里给大家整理了一下，Number类型的转换规则，如下：

      值转换后结果
      undefinedNaN
      false 和 true0 和 1
      string去掉首尾空格后的纯数字字符串中含有的数字。如果剩余字符串为空，则转换结果为 0。否则，将会从剩余字符串中“读取”数字。当类型转换出现 error 时返回 NaN。

      感兴趣的小伙伴可以根据下边示例，试一试。

          console.log( Number(" 123 ") ); // "123" 
    console.log( Number("123z") ); // NaN（从字符串“读取”数字，读到 "z" 时出现错误）
    console.log( Number(true) ); // "1"
    console.log( Number(false) ); // "0"

  • 布尔型转换

    • 布尔型转换，相对比较简单，总结了以下几点，供大家参考：
      • 像0, null, undefined, NaN, ""，这些转换后结果为false;其他值为true；
      • 对 "0" 和只有空格的字符串（比如：" "）进行布尔型转换时，转换结果为 true；

提问

问题：如果我们不用原生的 Number 和 parseInt，用 JS 代码实现 String 到 Number 的转换，该怎么做呢？

小结

欢迎路过的小伙伴们，留下自己的思路或代码，我们一起交流，一起进步

下篇文章隐式类型转换主要详细介绍了js中的一些隐式类型转换，感兴趣的小伙伴可以去看看。

前端漫漫长途，我们都在路上，持续更新ing.....

avatar
文章
阅读
粉丝