梦回前端-01数据类型篇

客官°小女子只卖身不卖艺 2023-02-13 08:17 25阅读 0赞

### 关于梦回前端 ###

每天一个重要的知识点，以问答的形式进行反推，利用碎片时间来完成自我提升

### Day1 数据类型篇 ###

![format_png][]

#### 说在前面 ####

JS是典型的弱类型(动态)语言, 意味着你不用提前声明变量的类型，在程序运行过程中，类型会被自动确定, 也意味着你可以使用同一个变量保存不同类型的数据

#### 请简述Js中有哪些数据类型? ####

Js中每一个值都属于某一种数据类型, 根据最新的语言标准，一共有8种类型

*  Boolean
 *  Null
 *  Undefined
 *  Number
 *  BigInt
 *  String
 *  Symbol
 *  Object

除了新增的BigInt及Symbol，其它的几种都是咱们的老朋友了,Symbol也很好理解，在Js中表示独一无二的值，这里我们简单来理解一下BigInt

##### BigInt JavaScript 中的任意精度整数 #####

为什么要有BigInt类型, 不能使用Number来解决？那我们先来看看Js中Number的现状, 有一定经验的都同学应该都知道其有两大弊端

*  精度问题 有经典的面试题0.1 + 0.2不等于0.3，这里不作详细论证
 *  最大安全整数 我们可以在控制台通过 `Number.MAX_SAFE_INTEGER`来获取Number类型能表示的最大整数

![format_png 1][]

通过上面，发现max\_03的结果在我们意料之外，原因就在于我们超出Number安全整数范围

BigInts 是 JavaScript中的一个新的数字基本类型，可以用任意精度表示整数, 要使用BigInts, 很简单

// 字面量只需要在整数后面添加n后缀
    const bigInt = 1000n
    // 也可以通过全局的形式
    const binInt2 = BigInt(1001)

工作中真实的经典场景，后端同学将日期转化为时间戳给我们，我们解析后发现时间都是一致的, 这就是因为返给我们的时间戳已经超过了Number的最大安全整数范围

#### null跟undefined的区别, 分别在什么场景下使用? ####

Undefined 类型表示未定义，它的类型只有一个值，就是 undefined。任何变量在赋值前是 Undefined 类型

Null 类型也只有一个值，就是 null，它的语义表示空值

与 undefined 不同，null 是 JavaScript 关键字

在语义上，Null 表示的是：定义了但是为空。所以，在实际编程时，我们一般不会把变量赋值为 undefined

#### 数组常用方法有哪些? ####

取自梦回前端成员@Jenny打卡笔记![format_png 2][]

#### 字符串常用方法有哪些? ####

取自梦回前端成员@Jenny打卡笔记![format_png 3][]

#### Js中如何去判断一个值的类型? ####

在我们学习了Js中的基本类型后，那么如何在实际工作中去判断一个值的类型呢?

*  typeof

// 在判断除Object类型的对象时比较方便
    console.log(typeof  123);   //number
    console.log(typeof  '123');  //string
    console.log(typeof  true);   //boolean
    console.log(typeof  undefined);  //undefined
    console.log(typeof  null);  //object
    console.log(typeof  []);   //object
    console.log(typeof  {});  //object
    console.log(typeof  new Date());  //object
    console.log(typeof  /\d/);  //object
    console.log(typeof  function() {}); //function

*  instanceof  
    instanceof运算符返回一个布尔值，表示指定对象是否为某个构造函数的实例

注意，instanceof运算符只能用于对象，不适用原始类型的值

const Js =  [];
    Js  instanceof Array  //true
    Js  instanceof Object  //true

*  toString

上面两种方法都有一些缺点，那有没有一种方式可以做到万无一失呢？有的，我们来看一下toString的表演

试验一下

Object.prototype.toString.call(null);  //  "[object Null]"
    Object.prototype.toString.call([]);  //  "[object Array]"
    Object.prototype.toString.call({});  //  "[object Object]"
    Object.prototype.toString.call(123);  //  "[object Number]"
    Object.prototype.toString.call('123');  //  "[object String]"
    Object.prototype.toString.call(false);  //  "[object Boolean]"
    Object.prototype.toString.call(undefined);  //  "[object Undefined]"

#### 你是如何理解Js中类型转换机制? ####

类型转换发生在静态类型语言的编译阶段，而强制类型转换则发生在动态类型语言的运行时(runtime)。

在 Js 中通常将它们统称为强制类型转换，我个人则倾向于用“隐式强制类型转换”(implicit coercion)和“显式强制类型转换”(explicit coercion)来区分

*  显式类型转换

这个其实很好理解, 我们来看一下代码

// 字符串转换
    var a = 123 
    var b = String(a) // '123'
    // 数字转换
    var c = '3.14'
    var d = Number(c) // 3.14
    // 布尔值转换
    var e = []
    var f = Boolean(e) // true

*  隐式强制类型转换

触发 JS 隐式转换是需要先决条件的, 当使用 ==、&&、|| 等逻辑操作符进行判断时, 或使用 + - \* / 四则运算符进行操作时

这里多的不说了，说一下== 与 ===的区别

常见的误区是“== 检查值是否相等，=== 检查值和类型是否相等” 正确的解释是:“== 允许在相等比较中进行强制类型转换，而 === 不允许。”

### 预告 ###

*  Day2 数据结构
 *  Day3 基本算法
 *  Day4 HTTP协议

### 最后 ###

如果你能坚持，想加入我们共同成长，扫码回复1即可，在这里，你不是一个人在战斗

![format_png 4][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9nSDMxdUY5VklpYlRReURmZ0dBR0VLTkdrT2lhRTJITk9LUU02VGViYTYxeUFOekpBT05IeWdhU3JpYmZEOFV5OXJnRHdIYlBHeVdzWmdHMUdudTI3YnBxUS82NDA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9nSDMxdUY5VklpYlRReURmZ0dBR0VLTkdrT2lhRTJITk9LMmZJR1V0SW0wNGNVMnNaczl2TU1Ea3hZVFAwNHkyVFY4M05YbGVQbDBxVG5yVW01ZlBvYTNRLzY0MA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9nSDMxdUY5VklpYlRReURmZ0dBR0VLTkdrT2lhRTJITk9LQVhWTlN2R1ZxU3J2YW5zbDlKSGpoM1RrdWlidUQ4TU12cEZIajdpYUN4ZHFxN0oxS3NuOGNKNUEvNjQw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9nSDMxdUY5VklpYlRReURmZ0dBR0VLTkdrT2lhRTJITk9La3U1ZEFDdWs3Tm55clRtOVU3SGI0RE9rWXNxWURrNE9PY0VqeHREVFNMa3NvQndwZnZ0TnJBLzY0MA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9nSDMxdUY5VklpYlRQUFY1ZlVpYzhKb2ljVGxISDByTDdpY1p5alJaMThDSmpsN2hUaDFvcWpRRnNBbDI3YWljV1NmRDJ6WnVLT1d1b01pY0VpY3oxV3dBSjlhY2cvNjQw?x-oss-process=image/format,png