前端面试梳理(一)：基础知识点

原始类型

涉及面试题：基础数据类型有哪些？null是对象？

基础数据类型有哪些？

在js中基础数据类型：

• String
• Number
• Boolean
• undefined
• null
• Symbol

原始数据存储的都是值，是没有方法的，比如undefined.toString().
那为什么会存在“123”.toString呢？
原因：当你对基础数值调用方法的时候，发生了隐式转化,已经被转化成了Number对象了。“123”.toString() == Number("123").toString()

null是对象？

答案：不是。
也许你会反驳到 typeof null 会输出‘Object’。但是这是js设计之初就存在的bug，因为typeof 判断对象的方式是直接变量判断内存的是否是以000开头的，而null在内存中的地址是全为0，所有才会出现这样的问题。

number也是问题大户

0.1+0.2 ！= 0.3 // true
1111111111111111 == 11111111111111112 // true

什么呢？
先说原因，因为 JS 采用 IEEE 754 双精度版本（64位），并且只要采用 IEEE 754 的语言都有该问题。
IEEE754是怎么表示的：

  s   eeeeeeeeeee   fff...ffff
|-1-|-     11    -|-    52    -|

意义

• 1位用来表示符号位
• 11位用来表示指数
• 52位表示尾数

那么0.1在二进制是怎么表示？

// (0011) 表示循环
0.1 >> 0.0001 1001 1001 1001…（1001无限循环）
0.2 >> 0.0011 0011 0011 0011…（0011无限循环）

其实不仅仅0.1,还有0.2，111111111111111111等等很多数字都是以循环体存在的。这本来是没什么问题的，但是js采用的IEEE754双精度浮点（64）标准，输出十进制进行四舍五入了，但是二进制只有 0 和 1 两个，于是变为 0 舍 1 入。这即是计算机中部分浮点数运算时出现误差。

0.100000000000000002 === 0.1 // true
0.200000000000000002 === 0.2 // true
0.1 + 0.2 === 0.30000000000000004 // true

但是你可能又会问：console.log("0.1") 为什么不会输出 “0.100000000000000002”?
因为在输入内容的时候，二进制被转换为了十进制，十进制又被转换为了字符串，在这个转换的过程中发生了取近似值的过程.

// 所以输出 0.1
console.log(0.100000000000000002) // 0.1

那么如何处理这个问题呢？

// 小数用toFixed
parseFloat((0.1 + 0.2).toFixed(10)) === 0.3 // true
// 大整数用BigInt
BigInt("11111111111111111") + 0n // 11111111111111111n

对象类型

涉及面试题：对象类型和基础类型的不同？函数参数是对象会发生什么问题？

对象类型和基础类型的区别

• 内存的分配不同

  • 基本数据类型存储在栈中。
  • 复杂数据类型存储在堆中，栈中存储的变量，是指向堆中的引用地址。

• 访问机制不同

  • 基本数据类型是按值访问
  • 复杂数据类型按引用访问，JS不允许直接访问保存在堆内存中的对象，在访问一个对象时，首先得到的是这个对象在栈内存中的地址，然后再按照这个地址去获得这个对象中的值。

• 复制变量时不同(a=b)

  • 基本数据类型：a=b;是将b中保存的原始值的副本赋值给新变量a，a和b完全独立，互不影响
  • 复杂数据类型：a=b;将b保存的对象内存的引用地址赋值给了新变量a;a和b指向了同一个堆内存地址，其中一个值发生了改变，另一个也会改变。

下面的输出结果：

var a = {n: 1};
var b = a;
a.x = a = {n: 2};

a.x     // 输出？
b.x     // 输出

答案： a.x // --> undefined b.x // --> {n: 2}

• 1、优先级。.的优先级高于=，所以先执行a.x，堆内存中的{n: 1}就会变成{n: 1, x: undefined}，改变之后相应的b.x也变化了，因为指向的是同一个对象。
• 2、赋值操作是从右到左，所以先执行a = {n: 2}，a的引用就被改变了，然后这个返回值又赋值给了a.x，需要注意的是这时候a.x是第一步中的{n: 1, x: undefined}那个对象，其实就是b.x，相当于b.x = {n: 2}

typeof vs instanceof

涉及面试题：typeof 是否能正确判断类型？instanceof 能正确判断对象的原理是什么？

• typeof 对于基础类型来说，除了 null 都可以显示正确的类型

typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'

typeOf对于对象类型就无法起到作用了：

typeof {} // object
typeof [] // object
typeof String // function

• instanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype

function myInstanceof(left, right) {
  let prototype = right.prototype
  left = left.__proto__
  while (true) {
    if (left === null || left === undefined)
      return false
    if (prototype === left)
      return true
    left = left.__proto__
  }
}

原理：

• 首先获取类型的原型
• 然后获得对象的隐式原型
• 然后一直循环判断对象的隐式原型是否等于类型的原型，直到对象隐式原型为 null，因为原型链最终为 null

那么如何靠谱的区分对象呢？

Object.prototype.toString.call([])    // "[object Array]"
Object.prototype.toString.call({})    //"[object Object]"
Object.prototype.toString.call(/\./)  // "[object RegExp]"

类型转换

涉及面试题：该知识点常在笔试题

常见的隐式转化有三种：

• 转化为String
• 转化为Number
• 装化为Boolean

转Boolean：

undefined，null，“”，0，+0，-0，NaN转化为发垃圾，其余都是true

对象转原始类型

• 1.对象在转换类型的时候，会调用内置的 [[ToPrimitive]] 函数，对于该函数来说，算法逻辑一般来说如下：
• 2.是否为原始类型了，如果是就无需转化，如果不是就往下
• 3.调用valueOf()，如果转换为基础类型，就返回转换的值，如果不是就往下
• 4.调用 x.toString()，如果转换为基础类型，就返回转换的值，如果不是就往下
• 5.如果都没有返回原始类型，就会报错

当然你也可以重写 Symbol.toPrimitive ，该方法在转原始类型时调用优先级最高。

let a = {
  valueOf() {
    return 0
  },
  toString() {
    return '1'
  },
  [Symbol.toPrimitive]() {
    return 2
  }
}
1 + a // => 3

常见面试题：

a==1 && a==2 && a==3 ?

// 1.利用隐式类型转换
const a = {
    [Symbol.toPrimitive]: (() => {
        let i =1;
        return () => i++;
    })()
}
const a = {
    i: 1,
    valueOf: () => {
        return a.i++;
    }
}
// 2.利用数据劫持(Proxy/Object.defineProperty)
let i = 1;
let a = new Proxy({}, {
    i:1,
    get: function () {
        return () => this++
    }
})
// 使用数组， 数组的同toString默认调用的join
let a = [1,2,3]
a.join = a.shift

四则运算符转化

- 运算中其中一方为字符串，那么就会把另一方也转换为字符串
- 如果一方不是字符串或者数字，那么会将它转换为数字或者字符串
- ```js
        1 + '1' // '11'
        true + true // 2
        4 + [1,2,3] // "41,2,3"
    ```
- 

面试题：'a' + + 'b' // 输出什么

因为 + 'b' 等于 NaN，所以结果为 "aNaN"，你可能也会在一些代码中看到过 + '1' 的形式来快速获取 number 类型。
或者转化为 “a” + （+“b”）
"a" + + "1" => "a1"

那么对于除了加法的运算符来说,只要其中以一方为数字，那么另一方也会被转化成数字。

4 * '3' // 12
4 * [] // 0
4 * [1, 2] // NaN

比较运算符

• 如果是对象，就通过 toPrimitive 转换对象
• 如果是字符串，就通过 unicode 字符索引来比较

let a = {
  valueOf() {
    return 0
  },
  toString() {
    return '1'
  }
}
a > -1 // true'