Javascript 面试题

Time: 2023-01-19 23:19:28
项目地址，这篇笔记是我的一些理解

ES6 系列

1 说说 var、let、const 之间的区别

var、let、const 三者区别可以围绕下面五点展开：

类别	var	let	const
变量提升	存在	不存在	不存在
暂时性死区	不存在	存在	存在
块级作用域	不存在	存在	存在
重复声明	允许	同一作用域不允许	同一作用域不允许
修改声明的变量	可以	可以	Arr,Obj 可以，其他不能
使用	All	All	Arr,Obj

变量提升 变量可以在声明之前调用，值为undefined
暂时性死区 只有等到声明变量的那一行代码出现，才可以获取和使用该变量
修改声明的变量 const 定义 对象Obj 和 数组Arr 可以更改内容

如何使用 数组和对象使用 const 定义，其他类型使用 let 定义

2 ES6 中 数组Arr 新增了哪些扩展?

3 ES6 中 对象 Obj 新增了哪些扩展?

4 ES6 中 函数 Func 新增了哪些扩展?

5 ES6 中新增的 Set、Map 两种数据结构怎么理解?

Set （成员的值都是唯一的数组）
是 es6 新增的数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值，我们一般称为集合，Set 本身是一个构造函数，用来生成 Set 数据结构

Map类型 (特别的 Obj)
是键值对的有序列表，而键和值都可以是任意类型，Map 本身是一个构造函数，用来生成 Map 数据结构

对于前端开发，业务场景有限。

6 你是怎么理解 ES6 中 Promise 的？使用场景？

7 怎么理解 ES6 中 Generator 的？使用场景？

Generator 是异步解决的一种方案，最大特点则是将异步操作同步化表达出来

异步解决方案的对比

	专门处理异步	编码难题	代码可读性
回调函数	非	容易	稍差
Promise 对象	是	较为复杂	稍差
generator 函数	非，有其他功能	较为复杂	容易
async/await	是	容易	容易

async 实质是 Generator 的语法糖，相当于会自动执行 Generator 函数 ，Generator 并不是为异步而设计出来的，它还有其他功能（对象迭代、控制输出、部署 Interator接口）

async/await 是处理异步编程的最终方案。

8 你是怎么理解 ES6 中 Proxy 的？使用场景?

使用场景： Proxy 其功能非常类似于设计模式中的代理模式

Vue3 的 Arr,Obj 使用了 Proxy 进行数据劫持，解决了 Vue2 留下的对 Obj、Arr 添加属性无法实现响应式数据的问题

9 你是怎么理解 ES6 中 Module 的？使用场景？

Link，这个写的很全面了，我写下我的理解

完成复杂应用时，将其拆分为各个模块

10 你是怎么理解 ES6 中 Decorator 的？使用场景？

面向对象开发使用的，装饰器模式，对现有类和其属性进行功能增强

Javascript 系列

1 说说 Javascript 中的数据类型？区别？

undefined、
null、
boolean、
string、
number、
symbol，
以及引用类型：object

但是我们在 声明的时候只有一种数据类型，只有到 运行期间才会确定当前类型

2 Javscript 数组Arr的常用方法有哪些？

函数	作用	类型
push()	添加参数到数组末尾	增
unshift()	添加参数到数组开头	增
pop()	删除数组的最后一项	删
shift()	删除数组的第一项	删
splice(1, 0, "D", "E")	从下标1开始删除0个元素，添加“D”,“E”	删
splice(1,2)	从下标1开始删除2个元素	删
还有许多

3 Javascript 字符串 string 的常用方法有哪些？

函数	作用
concat()	用于将一个或多个字符串拼接成一个新字符串
slice(3)	将字符串前三个删掉，返回剩下的

4 谈谈 Javascript 中的类型转换机制

JS 是隐式转换

5. == 和 === 区别，分别在什么情况使用

一个相等，一个全等
== 表示两边值相等
=== 全等，数据类型、值相等。

7 深拷贝浅拷贝的区别？如何实现一个深拷贝？

8 说说你对闭包的理解

MDN 链接

康康代码，子函数使用了父函数的属性，形成了一个块，占据了一部分内存

function init() {
  var name = "Mozilla";     // name 是一个被 init 创建的局部变量
  function displayName() {  // displayName() 是内部函数，一个闭包
      alert(name);          // 使用了父函数中声明的变量
  }
  displayName();
}
init();

9 说说你对作用域链的理解

全局作用域
声明的 var 变量可以在程序的任意位置访问

函数作用域
如果一个变量是在函数内部声明的它就在一个函数作用域下面。
这些变量只能在函数内部访问，不能在函数以外去访问

块级作用域
ES6 引入了 let 和 const 关键字,和 var 关键字不同，
在大括号中使用 let 和 const 声明的变量存在于块级作用域中。在大括号之外不能访问这些变量

10 JavaScript 原型，原型链? 有什么特点？

什么是原型？
函数 可以有属性。 每个函数都有一个特殊的属性叫作原型 prototype

什么是原型链？
在对象实例和它的构造器之间建立一个链接（它是__proto__ 属性，是从构造函数的 prototype 属性派生的），之后通过上溯原型链，在构造器中找到这些属性和方法

下面举个例子，这个例子用 ts 真不知道怎么写

function Person(name) {
  this.name = name;
  this.age = 18;
  this.sayName = function () {
    console.log(this.name);
  };
}
const per = new Person("张三"); // 创建实例

有一说一，TS 中的类，随便写一个

class Person{
  name:string;
  constructor(name){
    this.name = name
  }
}
const per = new Person("张三") //类实例化

真的好像啊。。。功能也一样，生成对象，一张图解释一切

_proto_ 起着桥梁的作用，
举个例子 Person.prototype._proto_ === Object.prototype

11 Javascript 如何实现继承？

类的继承，目的是类的复用，一般继承的父类要进行抽象处理，跟 Java 越来越像了，

如何实现

12 谈谈 this 对象的理解

this 即本身的意思，举个例子
在 vue 中使用定时器，在其中写箭头函数使用 this，在此时，this 的指向并非 vue对象，而是定时器的 BOM对象

13 JavaScript中执行上下文和执行栈是什么？

14 说说JavaScript中的事件模型

15 typeof 与 instanceof 区别

16 解释下什么是事件代理？应用场景？

17 说说 new 操作符具体干了什么？

实例化对象?

18 ajax原理是什么？如何实现？

封装 HDR 请求，更方便的去请求接口数据

19 bind、call、apply 区别？如何实现一个bind?

20 说说你对正则表达式的理解？应用场景？

筛选，比如手机号输入是否合法等

21 说说你对事件循环的理解

22 DOM常见的操作有哪些？

23 说说你对BOM的理解，常见的BOM对象你了解哪些？

DOM 与 BOM 的区别

DOM	BOM
文档对象模型	浏览器对象模型
把文档当一个对象看待	把浏览器当一个对象看待
顶级对象 document	顶级对象 window
操作页面元素	浏览器窗口交互
W3C规范	各厂商自定义

在浏览器中，window对象 有双重角色，即是浏览器窗口的一个接口，又是全局对象 this
因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法

具体信息

24 举例说明你对尾递归的理解，有哪些应用场景

25 说说 JavaScript 中内存泄漏的几种情况？

26 Javascript 本地存储的方式有哪些？区别及应用场景？

类型	localStorage	sessionStorage	cookie
生命周期	永久的，需要手动清除	仅在当前会话下有效	在设置的cookie过期时间之前一直有效
存储容量	5MB 或者更大	5MB 或者更大	4KB
是否发送数据	存储在本地	存储在本地	每次请求

注: 如果需要储存数组或对象的话, 可以用 JSON 格式传入

小结

• 标记用户与跟踪用户行为的情况，
  推荐使用 cookie
• 适合长期保存在本地的数据（令牌），
  推荐使用 localStorage
• 敏感账号一次性登录，
  推荐使用 sessionStorage
• 存储大量数据的情况、在线文档（富文本编辑器）保存编辑历史的情况，
  推荐使用 indexedDB

27 说说你对函数式编程的理解？优缺点？

命令式编程
声明式编程
函数式编程

28 Javascript中如何实现函数缓存？函数缓存有哪些应用场景？

29 说说 Javascript 数字精度丢失的问题，如何解决？

js 存在精度问题 0.1 + 0.2 === 0.3 // false

第一种方式

当你拿到 1.4000000000000001 这样的数据要展示时，建议使用 toPrecision 凑整并 parseFloat 转成数字后再显示，如下：

parseFloat(1.4000000000000001.toPrecision(12)) === 1.4  // True
// 封装成方法就是：
function strip(num, precision = 12) {
  return +parseFloat(num.toPrecision(precision));
}

第二种方式

引入三方库，科学计算

30 什么是防抖和节流？有什么区别？如何实现？

• 防抖: 就是 回城，被打断就要重新来
• 截流: 就是 技能CD，CD没好，你用不了技能

自定义指令，实现防抖，以下为使用方式
尚品汇防抖
实际就是 闭包 + 延迟器

31 如何判断一个元素是否在可视区域中？

为什么要判断一个元素是否在可视区域中？

• 图片的懒加载
• 列表的无限滚动
• 计算广告元素的曝光情况
• 可点击链接的预加载

看这里

32 大文件上传如何做断点续传？

分片上传
端点续传
看这里

33 如何实现上拉加载，下拉刷新？

34 什么是单点登录？如何实现？

35 web常见的攻击方式有哪些？如何防御？