经典大厂前端面试题（含解析）基础篇(一)

时间 2019-12-19

标签经典大厂端面试题解析基础繁體版

原文原文链接

年关将近，金三银四跳槽季要来了，开始整理面试题前端

基础类型有哪些？

基本类型有七种面试

null
undefined
boolean
number
string
symbol（较新标准）
BigInt（新标准）

NaN 也属于 number 类型，而且 NaN 不等于自身数组

基础类型的特性是什么？

基本类型的值是保存在栈内存中的简单数据段
基础类型是不可变的
- 即不能强行修改：Array.prototype.sort.call('abc');(会报错)
基础类型上没有__proto__没有属性

基础类型能够经过 基本包装类型 访问的属性/方法

// 经过包装类型访问基础类型特性
    let str = 'abc';
    console.log(str.length)

    // 当你调用 `str.length` 时，实际过程是这样的：
    // -> 建立String类型的一个实例
    // -> 在实例上调用指定的方法
    // -> 销毁这个实例

    let _str = new String(str);
    let len = _str.length;
    _str = null;
复制代码

怎么检测基础类型？

检测基础类型能够用 typeof，可是 typeof null === 'object'
- null 是基础类型，不是 Object
- 因为null的历史遗留问题(前三位为000)，因此使用typeof检测null会产生BUG
```
// 借鉴 Vue 源码的 object 检测方法
    function isObject (obj: any): Boolean {
        return obj !== null && typeof obj === 'object'
    }
复制代码
```

经过 Object.prototype.toString.call （万能方法）

检测 [[class]]
在不覆盖 toString 方法前提下，任何一个对象调用 Object 原生的 toString 方法都会返回 [object type]

// 借鉴 Vue 源码的检测方法

    let _toString = Object.prototype.toString;

    function toRawType (value: any): String {
        // 获取 从第九个到倒数第二个 字符
        // 好比 [object String]  获取 String
        return _toString.call(value).slice(8, -1)
    }
复制代码

基础类型是如何转换的？

基本类型转换时，首先会调用 valueOf，而后调用 toString。(这两个方法能够被重写)
在四则运算中，除了 + 其余操做都会以数字进行计算，若是是 + 运算，若是不是全部字面量都是number（都是number就是数字的加法咯），那么会转换为字符串(toString)进行拼接

为何 0.1 + 0.2 为何不等于 0.3 ？

遵循IEEE 754 双精度版本（64位）标准的语言都有的问题。计算机没法识别十进制，JS会将十进制转换为对应的二进制（二进制即：0 和 1）。bash

那么怎么用 0 和 1 来表示 0.1 和 0.2 呢？微信

console.log(0.1.toString(2));
    // -> 0.0001100110011001100110011001100110011001100110011001101

    console.log(0.2.toString(2));
    // -> 0.001100110011001100110011001100110011001100110011001101
复制代码

这样看似没问题啊。为何会有BUG呢？函数

别忘了：JS的精确度区间约为正负 2^53，超出限制会截断。因此你看到的 0.1 不是真的 0.1。ui

那么怎么解决 JS 的精确度问题？

目前主流的解决方案是 先乘再除
- 好比精确到小数点后2位
- 先把须要计算的数字都乘1000
- 计算完成后再把结果除1000
使用新基础类型 BigInt (兼容性不好)

JS的"真"值有哪些？

JS中除了 "假" 值之外就是 "真" 值。this

"假"值包括 7 个spa

undefined
null
false
NaN
''
0
-0

在条件判断的隐式转换中："假" 值会转换为 false，"真" 值会转换为 true;prototype

那说一下引用类型吧？

除了基础类型，都是引用类型。
引用类型正在建立时会分配两个空间
- 一块在堆上，储存引用类型自己的数据（固然数据量会比较大）
- 一块在栈上，储存对堆上数据的引用（存储堆上的内存地址，也就是指针）
引用类型是可变的：即let a={}; a.x=1;
function参数是值传递，要注意不能修改引用

怎么检测引用类型？

经过 Object.prototype.toString.call 检测 [[class]]
经过 instanceof 判断引用类型
经过 constructor 判断引用类型（constructor是可写的，慎用）

instanceof 的原理是什么？

instanceof 内部机制是经过判断对象的原型链中是否是能找到对应的的prototype

因此在验证iframe时会有BUG，由于 window.Array.prototype !== window.frames[0].Array.prototype，因此不存在继承关系

// 实现 instanceof

  function instanceof(obj, target) {
      // 得到对象的原型
      obj = obj.__proto__
      // 判断对象的类型是否等于类型的原型
      while (true) {
        // 若是__proto__ === null 说明原型链遍历完毕
        if (obj === null) {
          return false
        }
        // 若是存在 obj.__proto__ === target.prototype
        // 说明对象是该类型的实例
        if (obj === target.prototype) {
          return true
        }
        // 原型链上查找
        obj = obj.__proto__
      }
  }
复制代码

若是用 instanceof 判断基础类型会怎么样？

会返回 false 由于基础类型没有 __proto__

let str = '123';

    console.log(str instanceof String) // -> false
复制代码

可是若是更改了静态方法Symbol.hasInstance就能够判断了

class StringType {
        static [Symbol.hasInstance](val) {
            return typeof val === 'string'
        }
    }
    console.log(str instanceof StringType) // -> true
复制代码

说一下数组吧？

数组是一种类列表对象，其数据在内存中也能够不连续

数组应该是一段线性分配的内存，可是JS的Array的检索和更新方式和对象如出一辙

Array它把下标变成数字，用其做属性。它比真正的数组慢，但用起来更方便。
Array本质仍是对象，其原型继承自Array.prototype，向上再继承自Object.prototype

Array的方法是设计为对象通用的，对象也能调用数组的方法

let obj = {
        '2': 3,
        '3': 4,
        'length': 2,
        'splice': Array.prototype.splice,
        'push': Array.prototype.push
    }
    obj.push(1)
    obj.push(2)

    console.log(obj);
    // Object(4) [empty × 2, 1, 2, splice: ƒ, push: ƒ]
复制代码

使用delete arr[2]，并不能减小length，而只是删除了对应的属性（变成empty）

什么是类数组？

类数组不是数组，经过 Array.isArray() 会返回 false
类数组经过 Array.from 能够转换为数组
属性要为索引（数字）属性
必须有length属性

常常碰见的类数组

字符串
- 惟一的原生类数组
arguments
- arguments彻底可使用...args代替，这样不定参数就是真数组
- arguments在箭头函数中被移除
DOM

[] == ![] 结果是什么？

PS: 感谢 @沉末_ 的补充

类型转换都是先 valueOf 再 toString;

右边

因为 ! 优先级比 == 高，先执行 !
![] 获得 false
进行相等性判断
false 转化为数字 0

左边

执行 [].valueOf() 原始值仍是 []
执行 [].toString() 获得 ''
'' 转化为数字 0

因此：0 == 0 ，答案是 true

验证：

let arr1 = [];
    let arr2 = [];

    console.log(arr1 == !arr2) // -> true

    arr1.toString = () => {
        console.log(111)
        return 1
    }

    console.log(arr1 == !arr2) 
    // -> 111
    // -> false
复制代码

== 和 === 的区别？

=== 不进行隐式转换
== 会进行隐式转换
- {a: 1} == "[object Object]" 左边会执行 .toString()

如何让 (a == 1 && a == 2)条件成立？

依然是类型转换逻辑：基础类型经过 valueOf 进行隐式转换

更改 valueOf 方法就能够实现

let a = {
        value: 0,
        valueOf: function() {
            this.value++;
            return this.value;
        }
    };
    console.log(a == 1 && a == 2);
复制代码

`Object.is` 和 === 的区别？

Object.is(v1, v2) 修复了 === 的一些BUG (-0和+0, NaN和NaN)：

// === 案例
    -0 === +0       // -> true
    NaN !== NaN     // -> false

    Object.is(-0, +0)       // -> false
    Object.is(NaN, NaN)     // -> true
复制代码