首页  思维导图  详情

JavaScript 面试八股文总结

2022-06-16 16:25:45   1  举报





AI智能生成

点赞的小伙伴都能拿到高薪offer~

2022学霸笔记

JavaScript

前端

面试

作者其他创作

大纲/内容

ES6

let、const、var 的区别

1. 块级作用域

块级作用域由{}包括，let 和 const 具有块级作用域，var不存在块级作用域

解决 ES5 的两个问题

内层变量可能覆盖外层变量

用来计数的循环变量泄漏为全局变量

2. 变量提升

var 存在变量提升

let、const 不存在变量提升

3. 暂时性死区

使用 let、const命令声明变量之前，该变量都是不可用的。在语法上称为暂时性死区

4. 给全局添加属性

var 声明的变量为全局变量，会将该变量添加为全局对象的属性。let 和 const 不会

浏览器的全局对象为 window， Node 的全局对象为 global

5. 重复声明

var 可重复声明变量

let 和 const 不可重复声明变量

6. 初始值设置

在变量声明时，var 和 let 可以不用设置初始值

cosnt 声明变量必须设置初始值

7. 指针指向

let 声明的变量可以更改指针指向（重新赋值）

const 声明的变量不允许改变指针的指向

简单类型不可修改

复杂类型（对象、数组、函数）可修改

const 对象的属性可以修改吗

并不是变量的值不能改动，而是变量指向的内存地址不能改动

基本类型不能改变

引用类型只能保证指针不改变，内部的值是可以改变的

如果 new 一个箭头函数会怎样

箭头函数是 ES6 提出来的，它没有 prototype，没有自己的 this 指向，更不可以使用 arguments 参数，所以不能 new 一个箭头函数

new 操作符的实现步骤

1. 创建一个全新的对象

2. 将这个新对象的 _proto_ 属性指向构造函数的 prototype 属性

3. 让函数的 this 指向这个对象，执行构造函数的代码（为这个新对象添加属性）

4. 如果函数没有返回其他对象，会自动返回这个新对象

第二、三步，箭头函数是没办法执行的

箭头函数与普通函数的区别

更加简洁

没有自己的 this

继承来的 this 指向永远不会改变

箭头函数的 this 绑定定义时所在的作用域

普通函数 this 指向运行时所在的作用域

call()、apply()、bind() 等方法不能改变箭头函数中 this 的指向

不能作为构造函数使用

没有自己的 arguments

没有 prototype

不能用作 Generator 函数，不能使用 yeild 关键字

箭头函数的 this 指向哪里

箭头函数没有自己的 this，它所谓的 this 是捕获其所在上下文的 this 值，作为自己的 this 值

由于没有 this 值，所以是不会被 new 调用的，这个所谓的 this 也不会被改变

扩展运算符的作用及其使用场景

对象扩展运算符

用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性

数组扩展运算符

扩展运算符是调用 iterator 的接口，实际上任何部署了 Iterator 接口的数据结构都可以通过扩展运算符转为数组

每次只能展开一层数组

使用场景

将数组转化为参数序列

复制数组

合并数组

扩展运算符与解构赋值结合，用于生成数组。这里的扩展运算符只能放在参数的最后一位，否则报错

将字符串转为真正的数组

使用 Math 函数获取数组中特定的值

Proxy 可以实现什么功能

Proxy 是 ES6 新增的功能，它可以用来自定义对象中的操作

在 Vue 3.0 中通过 Proxy 来替换原本的 Object.defineProperty 来实现数据响应式

优点

无需一层层递归为每个属性添加代理，一次性即可完成这些操作，性能更好

原本的实现有一些数据更新不能监听到，但是 Proxy 可以完美监听任何方式的数据改变

缺点

浏览器的兼容性不好

对对象与数组的解构的理解

解构是 ES6 提供的一种新的提取数据的模式，这种模式能够从对象或数组里有针对性地拿到想要的数据

数组的解构

以元素的位置为匹配条件来提取想要的数据

const [a,b,c] = [1,2,3]
console.log(a,b,c) // 1 2 3

const [a,,c] = [1,2,3]
console.log(a,c) // 1 3

通过设置占空位，进行精准提取

对象的解构

以属性的名称为匹配条件来提取想要的数据

const stu = { name: 'River', age: 25}
const { name, age } = stu
console.log(name, age) // River 25

如何提取高度嵌套的对象里的指定属性

嵌套程度深的对象
const school = {
   classes: {
      stu: {
         name: 'River',
         age: 24,
      }
   }
}

获取里面的 name 变量，可以通过 冒号 + {目标属性名} 这种形式

const { classes: { stu: { name } } } = school
console.log(name) // River

对 rest 参数的理解

剩余参数语法允许我们将一个不定数量的参数表示为一个数组

使用

function(a,b,...theArgs) {
// ...
}

如果函数的最后一个命名参数以 ... 为前缀，则它将成为一个由剩余参数组成的真数组

场景

经常用于获取函数的多余参数，或者梳理函数参数个数不确定的情况

ES6 中模板语法与字符串处理

模板语法允许以 ${} 的方式嵌入变量

在模板字符串中，空格、缩进、换行都会被保留

模板字符串完全支持“运算”式的表达式，可以在 ${} 里完成一些计算

字符串处理方法

存在性判定：判断一个字符或字符串是否存在于某字符串中

过去

indexOf > -1

现在

includes

判断字符串与子串的包含关系

startsWith

判断字符串是否以某个/某串字符开头

endsWith

判断字符串是否以某个/某串字符结尾

自动重复：可以使用 repeat 方法来使同一个字符串输出多次（被连续复制多次）

const sourceCode = 'repeat for 3 times;'
const repeated = sourceCode.repeat(3)
console.log(repeated) // repeat for 3 times;repeat for 3 times;repeat for 3 times;

原型

对原型、原型链的理解

原型链涉及到的东西挺多的，我举个例子说明一下吧

举例说明什么是原型

举例说明什么是原型链

怎么做

解决了什么问题

优点

缺点

解决缺点的方法

原型的修改、重写

修改

重写

原型链的终点是什么？如何打印出原型链的终点？

终点：null

打印：Object.prototype.__proto__

如何获得对象非原型链上的属性

hasOwnProperty

getOwnProperty

异步编程

异步编程的实现方式

setTimeout、Promise、Async/Await 的区别

对 Promise 的理解

Promise 的基本用法

Promise 解决了什么问题

Promise.all 和 Promise.race 的区别和使用场景

对 async/await 的理解

await 到底在等啥

async/await 的优势

async/await 对 Promise 的优势

async/await 如何捕获异常

并发与并行的区别

什么是回调函数？回调函数有什么缺点？如何解决回调地狱问题？

setTimeout、setInterval、requestAnimationFrame 各有什么特点

执行上下文/作用域链/闭包

对闭包的理解

对作用域、作用域链的理解

对执行上下文的理解

this/call/apply/bind

对 this 对象的理解

call() 和 apply() 的区别

实现 call、apply 及 bind 函数

面向对象

对象创建的方式有哪些

对象继承的方式有哪些

垃圾回收与内存泄漏

浏览器的垃圾回收机制

哪些情况会导致内存泄漏

数据类型

JavaScript 有哪些数据类型及它们的区别

8种：String, Number, Boolean, Undefined, Null, Object, Symbol, BigInt

ES6 新增数据类型

Symbol

创建后独一无二且不可变的数据类型

主要为了解决可能出现的全局变量冲突的问题

BigInt

是一种数字类型的数据，可以表示任意精度格式的整数

可以安全地存储和操作大整数，即使这个数已经超出了 Number 能够表示的安全整数范围

分类

原始数据类型
String, Number, Undefined, Null, Boolean, Symbol, BigInt

直接存储在栈(stack)中的简单数据段，占据空间小、大小固定、频繁使用，所以放入栈中存储

引用数据类型
Object

存储在堆(heap)中的对象，占据空间大、大小不固定。如果存储在栈中，会影响程序运行的性能。

在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体

数据类型检测的方式有哪些

1. typeof
返回 string

通常用来判断基本数据类型，历史遗留问题：typeof null === 'object'

判断引用数据类型会返回'object'，特殊情况：typeof function(){} === 'function'

2. instanceof
返回true/false

只能正确判断引用数据类型，不能判断基本数据类型

内部运行机制：判断在其原型链中能否找到该类型的原型

可以用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性

也可能判断不准确，比如一个数组，可以被判断为 Object，想要准确判断可以采用——

3. constructor

作用

判断数据类型

对象实例通过 constructor 对象访问它的构造函数

obj.constructor // 返回的是构造函数

如果创建一个对象来改变它的原型，就不能用来判断数据类型了

function Fn(){}
Fn.prototype = new Array()
var f = new Fn()
console.log(f.constructor === Fn) // false
console.log(f.constructor === Array) // true

4. Object.prototype.toString.call()
返回 string

使用 Object 对象的原型方法 toString() 来判断

obj.toString() 和 Object.prototype.toString.call(obj)

toString 是 Object 的原型方法，而Array、Function等作为Object的实例，都重写了toString方法。

let Foo = new Object()
Foo.toString() // '[object Object]'

let Bar = function(){}
Bar.toString() // 'function(){}'

判断数组的方式有哪些

Object.prototype.toString.call(obj).slice(8,-1) === 'Array'

obj.__proto__ === Array.prototype

Array.prototype.isPrototypeOf(obj)

ES6 Array.isArray(obj)

obj instanceof Array

null 和 undefined 的区别

相同：都是基本数据类型，分别都只有一个值，undefined 和 null

undefined：未定义

表示“缺少值”，就是此处应该有一个值，但是还没有定义

变量被声明了，但没有赋值时，就等于 undefined

对象没有赋值的属性，该属性的值为 undefined

调用函数时，应该提供的参数没有提供，该参数等于 undefined

函数没有返回值时，默认返回 undefined

undefined 在 JavaScript 中不是一个保留字，undefined 可以作为变量名使用，为了安全起见，可以通过 void 0 这种方式获得 undefined值

null：空对象

表示“空对象”，即该处不应该有值

作为函数的参数，表示该函数的参数不是对象

作为对象原型链的终点

undefined == null // true，undefined === null // false

ES规范就这么规定的

== 自动类型转换，===不会进行类型转换

typeof null 的结果是什么，为什么

结果是 'object'

在最初的 JavaScript 中，所有值都存储在 32 位的单元中，每个单元包含一个(1-3bits)的类型标签以及当前要存储值的真实数据

类型标签存储在每个单元的低位中，共五种数据类型

000：object

1：int

010：double

100：string

110：boolean

有两种特殊数据类型

undefined 的值是（超出整数范围的数字）

null 的值是机器码 NULL 指针（null 指针的值全是 0）

所以 null 的类型标签也是 000，和 Object 的类型标签一样，所以会被判定为 Object

instanceof 操作符的实现原理及实现

instanceof 运算符用于判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置

function myInstanceof(A, B) {
let proto = Object.getPrototypeOf(A)
let prototype = B.prototype
while (true) {
if(proto === null) { return false }
if(proto === prototype) { return true }
proto = Object.getPrototypeOf(proto)
}
}

为什么 0.1 + 0.2 !== 0.3，如何让其相等

为什么

二进制计算

无限循环

双精度浮点数

如何相等

toFixed()

Number.EPSILON

如何获取安全的 undefined 值

因为 undefined 是一个标识符，所以可以被当做变量来使用和赋值，从而影响 undefined 的正常判断

运算符 void 对给定的表达式进行求值，然后返回 undefined。因此可以用 void 0 来获得undefined。

typeof NaN 的结果是什么

typeof NaN // 'number'

NaN（not a number）：不是一个数字

NaN 是一个警戒值（有特殊用途的常规值），用于指出数字类型中的错误情况，即“执行数学运算没有成功，这是失败后返回的结果”

NaN 是一个特殊值，它和自身不相等，是唯一一个非自反的值

NaN !== NaN // true

isNaN 和 Number.isNaN 函数的区别

isNaN

转换为数值=>任何不能被转换为数值的值都返回 true
因此非数字值传入也会返回 true

Number.isNaN

是否为数字 => 是数字再判断是否为 NaN
不会进行数据类型的转换，更准确

== 操作符的强制类型转换规则

1. 首先会判断两者类型是否相同，相同就比较两者的大小

2. 类型不同，就进行类型转换

3. 先判断是否在对比 null 和 undefined，是的话就返回 true

4. 判断两者的类型是否为 string 和 number，是的话就将字符串转为 number

5. 判断其中一方是否为 boolean，是的话就把 boolean 转为 number

6. 判断其中一方是否为 object，且另一方为 string、number 或者 symbol，是的话就把 object 转为原始类型再进行判断

其他值到字符串的转换规则

null => "null", undefined => "undefined"

Boolean: true => "true", false => "false"

Number：直接转换，极小和极大的数字会使用指数形式

Symbol：直接转换，只允许显式强制类型转换，使用隐式强制类型转换会产生错误

普通对象：

调用toString( Object.prototype.toString() ) 返回内部属性 [[Class]] 的值，如'[object Object]'

除非自定义 toString() 方法，字符串化时就会调用该方法并使用其返回值

[1,2] => '1,2'

new Date() => Fri Apr 22 2022 00:55:33 GMT+0800 (中国标准时间)

其他值到数字值的转换规则

Undefined 类型：NaN

Null 类型：0

Boolean：false 0, true 1

String

包含非数字值 NaN

空字符串 0

Symbol：不能转换为数字，会报错

对象：

首先会被转换为相应的基本类型值，如果返回的是非数字的基本类型值，则再遵循以上规则将其强制转换为数字

其他值到布尔类型值的转换规则

假值

undefined

null

false

+0、-0 和 NaN

假值的布尔强制类型转换结果为 false。逻辑上说，除了假值列表外的都应该是真值。

|| 和 && 操作符的返回值

|| 和 && 首先会对第一个操作数执行条件判断，如果其不是布尔值就先强制转换为布尔类型再执行条件判断

|| 和 && 返回它们其中一个操作数的值，而非条件判断的结果

||：如果这个条件判断为 true，则返回第一个操作数的值，如果为 false，则返回第二个操作数的值

&&：如果这个条件判断为 true，则返回第二个操作数的值，如果为 false，则返回第一个操作数的值

Object.is() 与比较操作符 “===”、"=="的区别

强制类型转换后再进行比较

===

不会强制类型转换

Object.is

一般情况和 === 判断相同

特殊情况，例如：

-0 和 +0 不再相等

两个 NaN 相等

什么是 JavaScript 中的包装类型

在 JavaScript 中，基本类型是没有属性和方法的，为了便于操作基本类型的值，在调用基本类型的属性或方法时 JavaScript 会在后台隐式地将基本类型的值转换为对象

在访问 'abc'.length 时，JavaScript 将 'abc' 在后台转换成 String('abc')，然后再访问其 length 属性

如：
const a = "abc"
a.length //3
a.toUpperCase() // "ABC"

JavaScript 也可以使用 Object 函数显式地将基本类型转换为包装类型

var a = 'abc'
Object(a) // String {"abc"}

也可以使用 valueOf 方法将包装类型倒转成基本类型

var a = 'abc'
var b = Object(a)
var c = b.valueOf() // 'abc'

var a = new Boolean(false)
if(!a) {
console.log("oops")
} // never runs

什么都不会打印，虽然包裹的基本类型是 false，但是 false 被包裹成包装类型后就成了对象，所以其非值为 false，所以循环体中的内容不会运行

JavaScript 中如何进行隐式类型的转换

ToPrimitive(obj, type)

obj：需要转换的对象

obj 是基本类型，直接返回值本身

obj 是对象

type：期望的结果类型

string

Date 对象，type 默认 string

1. 调用 obj 的 toString，如果为原始值，则返回，否则下一步

2. 调用 obj 的 valueOf 方法，后续同上

3. 抛出 TypeError 异常

number

其他情况，type 默认为 number

1. 调用 obj 的valueOf 方法，如果为原始值，则返回，否则下一步

2. 调用 obj 的 toString 方法，后续同上

3. 抛出 TypeError 异常

基本类型的值在不同操作符的情况下的隐式转换规则

字符串连接符

算数运算符

其他情况，变量都转换为数字

- * /

算数运算符

变量都转换为数字

都尽量转成 number

< >

若都是字符串，则比较字母顺序

其他情况，转换成数字再比较

特殊情况1：unll 和 undefined 进行 == 比较时不会转换，总是返回 true

特殊情况2：若都是引用数据类型，会进行地址比较

[] == [] // false
两个数组的地址指向不同

对象

步骤1：ToPrimitive 转换为基本类型

步骤2：在不同操作符情况下的隐式转换

+ 操作符什么时候用于字符串的拼接

+ 的其中一个操作数是字符串

或通过右边步骤，最终的得到字符串

如果其中一个操作数是对象，首先对其调用 ToPrimitive 抽象操作，该抽象操作再调用 [[DefaultValue]]，以数字作为上下文

如果不能转换为字符串，则会将其转换为数字类型来进行计算

为什么会有 BigInt 提案

JavaScript 中的 Number.MAX_SAFE_INTEGER——最大安全数字，9007199254740991

在这个数范围内不会出现精度丢失（小数除外）

超出这个范围会出现计算不准确的情况，因此官方提出 BigInt 来解决此问题

object.assign 和扩展运算法是深拷贝还是浅拷贝，两者区别

都是浅拷贝

区别

Object.assign()

接受第一个参数作为目标对象，将所有可枚举的属性值从一个或多个源对象复制到目标对象，拷贝的是属性值。

可以触发 ES6 setter

扩展运算符

将数组或对象中的每一个值都拷贝到一个新的数组或对象中，不复制继承的属性或类的属性。（原型的属性）

JavaScript基础

new 操作符的实现原理

步骤

1. 创建一个全新的对象

2. 将这个新对象的 _proto_ 属性指向构造函数的 prototype 属性

3. 让函数的 this 指向这个对象，执行构造函数的代码（为这个新对象添加属性）

4. 如果函数没有返回其他对象，会自动返回这个新对象

具体实现

代码

【了解】map 和 Object 的区别

【了解】map 和 weakMap 的区别

Map

什么是 Map

本质

键值对的集合

和 Object 的区别

普通 Object 的键值对中的键只能是字符串，而 ES6 提供的 Map 键值对中的键可以是任意类型，是一种更加完善的 Hash 结构

键

如果 Map 的键是一个原始数据类型，只要两个键严格相同，就视为同一个键

实际上 Map 是一个数组，它的每一个数据也都是一个数组

const map = [
["name","张三"],
["age",18],
]

操作方法(6种)

size

set(key, value)

get(key)

has(key)

delete(key)

clear()

遍历

遍历器生成函数(3个)

keys()

values()

entries()

遍历方法(1个)

forEach()

三个参数

WeakMap

什么是 WeakMap

本质

键值对的集合，其中键是弱引用的

和 Map 的区别

必须是对象，原始数据类型不能作为 key 值（null除外）

操作方法(4种)

set(key, value)

get(key)

has(key)

delete(key)

注：clear() 已弃用，可以通过创建一个空的 WeakMap 并替换原对象来实现清除

作用

键名所引用的对象都是弱引用，即垃圾回收机制不将该引用考虑在内，只要所引用对象的其他引用都被清除，垃圾回收机制就会自动释放该对象所占用的内存

Map 和 WeakMap 的区别

1. 键的类型

Map 可以是任意类型

WeakMap 只能接受对象（null 除外）

2. 键的引用

WeakMap 的键是弱引用，键所指向的对象可以被垃圾回收

3. 遍历

Map 可以被遍历

WeakMap 不能被遍历

JavaScript 中有哪些内置对象

global objects 全局的对象（标准内置对象）

区别于 global object (全局对象)

回答

js 中的内置对象主要指的是在程序执行前存在全局作用域里的、由 js 定义的一些全局值属性、函数和用来实例化其他对象的构造函数。一般经常用到的如全局变量 NaN、undefined，全局函数如 ParseInt()、parseFloat()，用来实例化对象的构造函数如 Date、Object等，还有提供数学计算的弹体内置对象如 Math。

分类

值属性

这些全局属性返回一个简单值，这些值没有自己的属性和方法

Infinity

NaN

undefined

null

函数属性

全局函数可以直接调用，不需要在调用时指定所属对象，执行结束后会将结果直接返回给调用者

eval()

parseFloat()

parseInt()