JavaScript---八股

寻觅~流光2025-04-202025-05-27

JavaScript

Promise

一.数据结构

1.JavaScript 有哪些数据类型

共有八个数据类型,分别是undefined,Null,Boolean,String,Number,Object,Symbol,Bigint

这些数据类型可以分为原始数据类型与引用数据类型(复杂数据类型),他们在内存中的存储方式不同

其中 **Symbol** 和 **BigInt\*\* 是 ES6 中新增的数据类型：

**Symbol**代表创建后独一无二且不可变的数据类型，它主要是为了解决可能出现的全局变量冲突的问题。
**BigInt** 是一种数字类型的数据，它可以表示任意精度格式的整数，使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了 Number 能够表示的安全整数范围。

堆：存放引用数据类型，引用数据类型占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址，如Object、Array、Function。栈：存放原始数据类型，栈中的简单数据段，占据空间小，属于被频繁使用的数据，如String、Number、Null、Boolean。

堆：存放引用数据类型，引用数据类型占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址，如Object、Array、Function。
栈：存放原始数据类型，栈中的简单数据段，占据空间小，属于被频繁使用的数据，如String、Number、Null、Boolean。

2.Undefined 与 Null 的区别

至少从三个方面来讲: 1.undefind是声明之后的默认值,而Null却不是

2.undefined代表的含义是未定义,而 null 代表的含义是空对象

3.undefined在 JavaScript 中不是一个保留字,这就意味着可以用 undefined 来作为一个变量名字,null 是一个关键字

Undefined 和 Null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null。

undefined 代表的含义是未定义，一般变量声明了但还没有定义的时候会返回 undefined，typeof为undefined
null 代表的含义是空对象，null 主要用于赋值给一些可能会返回对象的变量，作为初始化，typeof为object

3.typeof null 的结果是什么,为什么?

Object

4.为什么 0.1 + 0.2 ≠ 0.3,如何让其相等

因为浮点数运算的精度问题。在计算机运行过程中，需要将数据转化成二进制，然后再进行计算。因为浮点数自身小数位数的限制而截断的二进制在转化为十进制，就变成 0.30000000000000004，所以在计算时会产生误差。

解决方法:

方法一:

首先转化为整数,相加之后再转化为小数.具体做法为先乘 10 相加后除以 10

1 2	let x = (0.1 * 10 + 0.2 * 10) / 10; console.log(x === 0.3);

方法二:

使用number对象的toFixed方法,只保留一位小数点

1	(n1 + n2).toFixed(2);

5.`typeof NaN`会返回什么?

会返回Number,他表示一个不能表示的数字

6.`for…in…`与`for…of…`的区别

for…of… 遍历获取的是对象的键值,for…in…获取的是对象的键名

for...in和for...of都是JavaScript中的循环语句，而for…of 是 ES6 新增的遍历方式，允许遍历一个含有iterator接口的数据结构（数组、对象等）并且返回各项的值，和ES3中的for…in的区别如下

for…of 遍历获取的是对象的键值，for…in 获取的是对象的键名；
for… in 会遍历对象的整个原型链，性能非常差不推荐使用，而 for … of 只遍历当前对象不会遍历原型链；
对于数组的遍历，for…in 会返回数组中所有可枚举的属性(包括原型链上可枚举的属性)，for…of 只返回数组的下标对应的属性值；

总结：for...in 循环主要是为了遍历对象而生，不适用于遍历数组；for...of 循环可以用来遍历数组、类数组对象，字符串、Set、Map 以及 Generator 对象。

7.对 AJAX 的理解，实现一个 AJAX 请求

AJAX是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。创建AJAX请求的步骤：

创建一个 XMLHttpRequest 对象。
在这个对象上使用 open 方法创建一个 HTTP 请求，open 方法所需要的参数是请求的方法、请求的地址、是否异步和用户的认证信息。
在发起请求前，可以为这个对象添加一些信息和监听函数。比如说可以通过 setRequestHeader 方法来为请求添加头信息。还可以为这个对象添加一个状态监听函数。一个 XMLHttpRequest 对象一共有 5 个状态，当它的状态变化时会触发onreadystatechange 事件，可以通过设置监听函数，来处理请求成功后的结果。当对象的 readyState 变为 4 的时候，代表服务器返回的数据接收完成，这个时候可以通过判断请求的状态，如果状态是 2xx 或者 304 的话则代表返回正常。这个时候就可以通过 response 中的数据来对页面进行更新了。
当对象的属性和监听函数设置完成后，最后调用 send 方法来向服务器发起请求，可以传入参数作为发送的数据体。

const serve_url = '/serve_url'

let xhr = new XMLHttpRequest()

//创建 hhtp 请求
xhr.open('GET', serve_url, true)

// 设置状态的监听函数
xhr.onreadystatechange = function(){
    if(xhr.readyState !==4) {
        return
    }
    if(xhr.status ===200 ){
        hander(this.response)
    }else[
        console.error(this.statusText)
    ]
}

// 设置请求失败的监听函数
xhr.onerror = function() {
    console.error(this.statusText)
}

// 设置请求头
xhr.responseType = 'json'
xhr.setRequestHeader('Content-Type', 'application/json')

// 发送http请求
xhr.send(

8.ajax,axios,fetch 的区别

ajax

基于原生XHR开发，XHR本身架构不清晰。
针对MVC编程，不符合现在前端 MVVM 的浪潮。
多个请求之间如果有先后关系的话，就会出现回调地狱
配置和调用方式非常混乱，而且基于事件的异步模型不友好。

axios

支持PromiseAPI
从浏览器中创建XMLHttpRequest
从 node.js 创建 http 请求
支持请求拦截和响应拦截
自动转换JSON数据
客服端支持防止CSRF/XSRF

fetch

浏览器原生实现的请求方式，ajax 的替代品基于标准 Promise 实现，支持async/awaitfetchtch只对网络请求报错，对 400，500 都当做成功的请求，需要封装去处理默认不会带cookie，需要添加配置项fetch没有办法原生监测请求的进度，而XHR可以。

浏览器原生实现的请求方式，ajax 的替代品
基于标准 Promise 实现，支持async/await
fetchtch只对网络请求报错，对 400，500 都当做成功的请求，需要封装去处理
默认不会带cookie，需要添加配置项
fetch没有办法原生监测请求的进度，而XHR可以。

9.forEach 和 map 的区别

两个方法都是用来遍历数组,区别如下:

forEach() 对数据的操作会改变原来的数据,这个方法没有返回值
map() 方法不会改变原来数组的值,会返回一个新的数组,新的数组中的值是原来的数组进行处理后的值

10.什么是尾调用,使用尾调用有什么好处

💡

尾调用就是再函数的最后一步调用函数

这样做的好处就是:

在一个函数里调用另外一个函数会保留当前执行的上下文，如果在函数尾部调用，因为已经是函数最后一步，所以这时可以不用保留当前的执行上下文，从而节省内存。但是 ES6 的尾调用只能在严格模式下开启，正常模式是无效的。

11.如何实现深浅拷贝

深拷贝

使用JSON.stringify() 将 js 对象序列化,再通过 JSON.parse 反序列

如果对象中有函数、undefined、symbol时，都会丢失
如果有正则表达式、Error对象等，会得到空对象

浅拷贝

Objec.assign() 拷贝对象
扩展运算符(…)

12.什么是深拷贝,浅拷贝,他们的区别是什么?

💡

浅拷贝:

拷贝的只是顶级属性,对于引用数据类型拷贝的只是引用地址,修改深层级的值时,会修改到原来的数据

深拷贝: 深拷贝会创建一个全新的对象或数组，并在新的内存空间中存储原始对象或数组的属性值。修改深级的数据不会改变原来的数据

它们的区别总结:

特征	浅拷贝 (Shallow Copy)	深拷贝 (Deep Copy)
拷贝内容	仅拷贝顶层属性	拷贝所有属性，包括嵌套的引用类型
引用类型属性	拷贝的是引用地址	创建全新的对象或数组，拷贝的是值
独立性	新对象和原对象共享嵌套引用类型的内存空间，互相影响	新对象和原对象完全独立，互不影响
实现方式	`Object.assign()`，扩展运算符 (`...`) (针对对象和数组)	需要特殊方法实现，如递归拷贝、`JSON.parse(JSON.stringify(obj))` 等

13.咋么获取一个元素的位置

element.getBoundingClientRect() 返回一个DOMRect 对象，里面有这些属性：

属性	含义
`top`	元素上边缘到视口顶部的距离（单位：px）
`left`	元素左边缘到视口左边的距离
`bottom`	元素下边缘到视口顶部的距离（= top + height）
`right`	元素右边缘到视口左边的距离（= left + width）
`width`	元素宽度
`height`	元素高度
`x`	等同于 `left`（某些浏览器里还有这个字段）
`y`	等同于 `top`

这些值都是相对于视口（viewport）左上角（0,0）点来计算的。

二.ES6

1.let,const,var 的区别

可以从六个方向来说明这个问题:

块级作用域：
块作用域由
1
{ }
包裹，
1
let
和
1
const
具有块级作用域，
1
var
不存在块级作用域。块级作用域解决了 ES5 中的两个问题：
- 内层变量可能覆盖外层变量
- 用来计数的循环变量泄露为全局变量
变量提升： var存在变量提升，let和const不存在变量提升，即变量只能在声明之后使用，否则会报错。
给全局添加属性： 浏览器的全局对象是window，Node的全局对象是global。var声明的变量为全局变量，并且会将该变量添加为全局对象的属性，但是let和const不会。
重复声明： var声明变量时，可以重复声明变量，后声明的同名变量会覆盖之前声明的遍历。const和let不允许重复声明变量。
初始值设置： 在变量声明时，var 和let可以不用设置初始值。而const声明变量必须设置初始值。
暂时性死区：在使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为暂时性死区。使用var声明的变量不存在暂时性死区。

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

箭头函数是匿名函数，不能作为构造函数，使用new关键字。箭头函数没有arguments箭头函数没有自己的this，会获取所在的上下文作为自己的thiscall()、applay()、bind()方法不能改变箭头函数中的this指向箭头函数没有prototype箭头函数不能用作Generator函数，不能使用yeild关键字

箭头函数是匿名函数，不能作为构造函数，使用new关键字。
箭头函数没有arguments
箭头函数没有自己的this，会获取所在的上下文作为自己的this
call()、applay()、bind()方法不能改变箭头函数中的this指向
箭头函数没有prototype
箭头函数不能用作Generator函数，不能使用yeild关键字

总结:

特性	普通函数 (Regular Function)	箭头函数 (Arrow Function)
`this`	动态绑定，取决于调用方式	词法作用域，继承自定义时所在上下文
`arguments`	拥有 `arguments` 对象	没有 `arguments` 对象，使用剩余参数 (`...`)
构造函数	可以用 `new` 调用	不能用 `new` 调用 (不是构造函数)
`prototype`	拥有 `prototype` 属性	没有 `prototype` 属性
`yield`	可以作为生成器函数使用 (`function*`)	不能作为生成器函数使用
重复命名参数	非严格模式下允许 (已废弃)，严格模式下不允许	不允许
语法	相对较长	更简洁

3.Set、Map 的区别

Set

创建： new Set([1, 1, 2, 3, 3, 4, 2])
add(value)：添加某个值，返回 Set 结构本身。
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
has(value)：返回一个布尔值，表示该值是否为 Set 的成员。
clear()：清除所有成员，没有返回值。

Map

set(key, val): 向Map中添加新元素
get(key): 通过键值查找特定的数值并返回
has(key): 判断Map对象中是否有Key所对应的值，有返回true,否则返回false
delete(key): 通过键值从Map中移除对应的数据
clear(): 将这个Map中的所有元素删除

区别

Map是一种键值对的集合，和对象不同的是，键可以是任意值
Map可以遍历，可以和各种数据格式转换
Set是类似数组的一种的数据结构，类似数组的一种集合，但在 Set 中没有重复的值

4.map 和 Object 的区别

map和Object都是用键值对来存储数据，区别如下：

键的类型：Map 的键可以是任意数据类型（包括对象、函数、NaN 等），而 Object 的键只能是字符串或者 Symbol 类型。
键值对的顺序：Map中的键值对是按照插入的顺序存储的，而对象中的键值对则没有顺序。
键值对的遍例：Map 的键值对可以使用 for...of 进行遍历，而 Object 的键值对需要手动遍历键值对。
继承关系：Map 没有继承关系，而 Object 是所有对象的基类。

5.说说你对 Promise 的理解

Promise是异步编程的一种解决方案，将异步操作以同步操作的流程表达出来，避免了地狱回调。

Promise的实例有三个状态:

Pending（初始状态）
Fulfilled（成功状态）
Rejected（失败状态）

Promise的实例有两个过程：

pending -> fulfilled : Resolved（已完成）
pending -> rejected：Rejected（已拒绝）
注意：一旦从进行状态变成为其他状态就永远不能更改状态了，其过程是不可逆的。

Promise构造函数接收一个带有resolve和reject参数的回调函数。

resolve的作用是将Promise状态从pending变为fulfilled，在异步操作成功时调用，并将异步结果返回，作为参数传递出去
reject的作用是将Promise状态从pending变为rejected，在异步操作失败后，将异步操作错误的结果，作为参数传递出去

Promise的缺点：

无法取消 Promise，一旦新建它就会立即执行，无法中途取消。
如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

6.Promise 方法

promise.then() 对应resolve成功的处理promise.catch()对应reject失败的处理promise.all()可以完成并行任务，将多个Promise实例数组，包装成一个新的Promise实例，返回的实例就是普通的Promise。有一个失败，代表该Primise失败。当所有的子Promise完成，返回值时全部值的数组promise.race()类似promise.all()，区别在于有任意一个完成就算完成promise.allSettled() 返回一个在所有给定的 promise 都已经 fulfilled 或 rejected 后的 promise ，并带有一个对象数组，每个对象表示对应的promise 结果。

promise.then() 对应resolve成功的处理
promise.catch()对应reject失败的处理
promise.all()可以完成并行任务，将多个Promise实例数组，包装成一个新的Promise实例，返回的实例就是普通的Promise。有一个失败，代表该Primise失败。当所有的子Promise完成，返回值时全部值的数组
promise.race()类似promise.all()，区别在于有任意一个完成就算完成
promise.allSettled() 返回一个在所有给定的 promise 都已经 fulfilled 或 rejected 后的 promise ，并带有一个对象数组，每个对象表示对应的promise 结果。

7.promise.all 和 promise.allsettled 区别

Promise.all() 和 Promise.allSettled() 都是用来处理多个 Promise 实例的方法，它们的区别在于以下几点：

all: 只有当所有Promise实例都resolve后，才会resolve返回一个由所有Promise返回值组成的数组。如果有一个Promise实例reject，就会立即被拒绝，并返回拒绝原因。all是团队的成功才算，如果有一个人失败就算失败。
allSettled： 等所有Promise执行完毕后，不管成功或失败，都会吧每个Promise状态信息放到一个数组里面返回。

8.async/await 对比 Promise 的优势

代码可读性高，Promise虽然摆脱了回掉地狱，但自身的链式调用会影响可读性。
相对Promise更优雅，传值更方便。
对错误处理友好，可以通过try/catch捕获，Promise的错误捕获⾮常冗余

9.谈谈你对 ES6 的理解

解构赋值
扩展运算符
箭头函数
模版字符串
Set、Map集合
新增class类
Proxy
Promise
…

10.ES6 模块和 CommonJS 模块有什么区别

语法不同：ES6 模块使用 import 和 export 关键字来导入和导出模块，而 CommonJS 模块使用 require 和 module.exports 或 exports 来导入和导出模块。
异步加载: ES6 模块支持动态导入（dynamic import），可以异步加载模块。这使得在需要时按需加载模块成为可能，从而提高了性能。CommonJS 模块在设计时没有考虑异步加载的需求，通常在模块的顶部进行同步加载。

11.说一说你对闭包的理解？

定义:当一个函数在其内部定义了另一个函数，并且内部函数引用了外部函数的变量时，就创建了一个闭包。
闭包必须要renturn吗?—-不一定需要renturn,当需要使用私有变量时,就需要return出函数内部的函数
闭包形成的原理:作用域链，当前作用域可以访问上级作用域中的变量
好处:保留词法作用域，变量不会被销毁，仍然可以在闭包中使用，可以创建私有变量。
坏处:由于垃圾回收器不会将闭包中变量销毁，于是就造成了内存泄露，内存泄露积累多了就容易导致内存溢出
应用:节流与防抖,Vue中数据响应式Observer中使用闭包

12.说一下变量提升

定义:使用var声明的变量或者函数被提升其作用域的顶部
表现:声明一个变量之前就使用它，而不会立即报错。然而，在声明之前访问该变量，其值通常是 undefined。
函数提升:除了变量，函数声明也会被提升。这意味着你可以在函数声明之前调用该函数。注意:只有声明被提升： 赋值操作不会被提升。函数表达式不会被提升： 只有函数声明会被提升
let 和 const 的提升： let 和 const 声明的变量也会被提升到其作用域的顶部，但是它们不会被初始化。在声明之前访问 let 或 const 变量,会报错,这通常被称为“暂时性死区”

三.性能优化

1.图片懒加载

1.概念:

仅在图片进入用户视口（viewport）时才加载该图片。

在页面初始加载时，未在视口中的图片不会被加载，只有当用户滚动页面，使图片进入视口时，才会触发加载,, 从而提升页面的加载速度和用户体验。

2.实现方式:

1.采用原生`loading="lazy”` 属性

在 h5 中引入了loading 属性,浏览器会自动延迟加载该图片

1	<img src="" loading="lazy" alt="">

这种方法简单易用，但需要注意浏览器的兼容性。

2.使用 JavaScript 和`IntersectionObserver`

IntersectionObserver 是一个浏览器 API，用于异步观察目标元素与其祖先元素或视口的交叉状态。

通过该 API，可以检测图片是否进入视口，从而动态加载图片。

// 获取全部的属性位data-src的img标签
const images = document.querySelectorAll("img[data-src]");

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    /**
     *  entry.isIntersecting 是一个 布尔值
     *  true：代表这个元素正在进入视口（看得见了）
     *  false：代表这个元素离开了视口（看不见了）
     */
    if (entry.isIntersecting) {
      // 图片进入视口
      const img = entry.target;
      img.src = img.dataset.src;
      // 取消监听
      observer.unobserve(img);
    }
  });
});

// 遍历所有图片，监听每一张图片
images.forEach((image) => {
  observer.observe(image);
});

在 HTML 中，图片的 src 属性可以先留空，实际的图片路径存放在 data-src 属性中。

这种方法性能较好，适用于现代浏览器。

需要图片懒加载的就可以使用data-src 属性

3.使用滚动事件和 `getBoundingClientRect`

对于不支持 IntersectionObserver 的浏览器，可以使用 getBoundingClientRect 方法结合滚动事件来判断图片是否进入视口。

function LazyLoad() {
  const images = document.querySelectorAll("img[data-src]");
  images.forEach((image) => {
    // 获取图片的位置
    const img = image.getBoundingClientRect();
    if (img.top < window.innerHeight) {
      image.src = image.dataset.src;
    }
  });
}
//  监听滚动事件
window.addEventListener("scroll", LazyLoad);
//  监听加载完成事件
window.addEventListener("load", LazyLoad);

节流与防抖

1.节流:

节流（throttle）是指在一定时间间隔内，无论事件被触发多少次，只执行一次事件处理数。常用于高频触发但不需要每次都响应的场景，比如页面滚动、按钮点击防止连击、窗口缩放等。

核心实现原理

记录上一次执行的时间（lastTime）
每次触发事件时，比较当前时间 now 和 lastTime
如果时间间隔大于或等于设定的 delay，就执行一次处理函数 fn
更新 lastTime 为当前时间

// 节流代码
function throttle(fn, delay = 500) {
  let flag = true;
  return function (...args) {
    if (!flag) return;
    flag = false;
    setTimeout(() => {
      // 改变this指向
      fn.apply(this, args);
      flag = true;
    }, delay);
  };
}
// 节流代码
function throttle(fn, delay = 500) {
  let last_time = 0;
  return function (...args) {
    let now_time = Date.now();
    if (now_time - last_time > delay) {
      fn.apply(this, args);
      last_time = now_time;
    }
  };
}

2.防抖

防抖是指短时间内多次触发同一事件时，只有最后一次生效。常用于搜索框输入、窗口大小调整等场景。

核心实现原理

每次触发事件时，取消之前的定时器。
重新启动一个新的定时器。
只有最后一次触发后的设定时间内没有再次触发，才会真正执行函数。

// 防抖代码
function debounce(fn, delay = 500) {
  let timer = null;
  return function (...args) {
    if (timer) clearTimeout(timer);
    //  延迟执行
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

网络优化

四.跨域、同源策略和 CORS

同源策略

同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

同源指的是两个 URL 的协议、域名、端口一致，反之，则是跨域。

出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。

最主要的三种解决方案，分别是 JSONP 和 CORS 和 Nginx 反向代理。

JSONP：出现的早，兼容性好（兼容低版本 IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持 GET 请求，不支持 POST 请求。
CORS：出现的较晚，它是 W3C 标准，属于跨域 AJAX 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器。
Nginx 反向代理：同源策略对服务器不加限制，是最简单的跨域方式。只需要修改 nginx 的配置即可解决跨域问题，支持所有浏览器，支持 session，不需要修改任何代码，并且不会影响服务器性能。

方法一:CORS（跨域资源共享，推荐）

服务器(后端)在 HTTP 响应头 添加：

1	Access-Control-Allow-Origin: *

*指允许所有的来源请求,或者可以指定相应的域名