前端八股大全
getBoundingClientRect获取元素的位置和尺寸信息：const element = document.getElementById('your-element-id'); const rect = element.getBoundingClientRect();getBoundingClientRect() 方法返回一个 DOMRect 对象，包含了元素的位置和尺寸信息，其中包括 top, bottom, left, right, width, height 等属性。获取视口的尺寸信息：const viewportHeight = window.innerHeight |...
JavaScript 中的数字精度丢失问题主要是由于 JavaScript 内部使用 IEEE 754 浮点数表示数字，而浮点数的精度有限，无法精确表示某些十进制小数，导致在进行算术运算时出现精度丢失的情况。为了解决这个问题，可以采用以下方法：使用整数进行运算：将需要进行精确计算的数字转换为整数进行运算，最后再将结果转换回所需的小数格式。let num1 = 0.1; let num2 = 0.2; let result = (num1 * 10 + num2 * 10) / 10; // 0.3使用高精度库：可以使用第三方库（如 BigNumber.js）来处理大数运算，这些库提供了更...
闭包是指一个函数能够访问并持有其外部作用域中的变量，即使这些变量在函数执行完毕后依然存在。换句话说，闭包使得函数能够记住并访问在其词法作用域外部定义的变量。理解闭包的关键在于理解 JavaScript 的词法作用域和函数的生命周期。当一个函数在其内部定义了另一个函数，并且内部函数引用了外部函数的变量时，就创建了一个闭包。以下是一个简单的闭包示例：function outerFunction() { let outerVariable = 'I am outer'; function innerFunction() { console.log(ou...
var、let 和 const 是 JavaScript 中用于声明变量的关键字，它们之间有以下区别：作用域：var：具有函数作用域（function scope），在声明它的函数内部有效。let 和 const：具有块级作用域（block scope），在声明它们的块（例如，if、for、while 循环或 {} 包裹的代码块）内部有效。变量提升：var：存在变量提升（hoisting），即变量可以在声明之前使用，但其值为 undefined。let 和 const：不会发生变量提升，尝试在声明之前使用会导致 ReferenceError。重复声明：var：允许在同一作用域内重复声明同...
在前端实现双令牌（又称刷新令牌和访问令牌）的无感刷新可以通过以下步骤实现：保存令牌：在用户登录成功后，将访问令牌（access token）和刷新令牌（refresh token）保存在客户端的本地存储中，如 sessionStorage 或 localStorage。访问令牌的过期时间：在保存访问令牌时，同时保存访问令牌的过期时间。定时刷新：在每次发送请求前，检查访问令牌是否过期。如果过期，则使用刷新令牌去获取新的访问令牌。为了避免同时发送多个刷新令牌请求，可以使用互斥锁或者请求队列来保证只有一个刷新令牌请求在进行中。处理刷新令牌响应：获取到新的访问令牌后，更新本地存储中的访问令牌和过...
你可以使用一个请求队列来控制并发请求的数量，确保同时只有指定个数的请求在执行。以下是一个简单的示例代码，使用 JavaScript 来实现：class RequestQueue { constructor(maxConcurrentRequests) { this.maxConcurrentRequests = maxConcurrentRequests; this.queue = []; this.activeRequests = 0; } add(request) { if (this.acti...
使用 Proxy API 相比 Object.defineProperty API 有以下优势：更直观和简洁：Proxy API 提供了更简单和直观的语法，使得代码更易于理解和维护。支持数组的监听：Proxy API 可以直接监听数组的变化，而 Object.defineProperty API 需要额外处理数组的变化。支持深层对象的监听：Proxy API 可以监听深层嵌套对象的变化，而 Object.defineProperty API 需要递归定义属性。可以监听更多操作：Proxy API 支持监听属性的操作包括 get、set、delete、has 等，而 Object.defi...
// 创建一个简易的axios类 class Axios { constructor() { // 初始化拦截器对象，包含请求拦截器和响应拦截器 this.interceptors = { request: [], response: [] }; } // 发送请求的方法 async request(config) { // 创建一个AbortController对象 const controller = new AbortController(); // 获取AbortController的信号对...
为什么封装封装 Axios 的目的主要有以下几点：简化 HTTP 请求操作：Axios 提供了简洁且易于使用的 API，使得发送 HTTP 请求变得更加方便和直观。通过封装 Axios，可以进一步简化 HTTP 请求的操作，提高开发效率。统一配置和处理：通过封装 Axios，可以在一个地方统一配置请求的默认参数、拦截器、错误处理等，使得整个项目的请求逻辑更加统一和规范。这样可以避免在每个请求中都进行重复的配置和处理。提供额外功能：封装 Axios 还可以为项目提供额外的功能，例如请求的 loading 状态、请求超时处理、请求重试机制等。这些功能可以在封装的过程中添加到 Axios 实例...
在 ES6 中使用 class 和 extends 实现继承，可以转换成 ES5 语法的方式如下：1. ES6 语法：class Parent { constructor(name) { this.name = name; } sayHello() { console.log(`Hello, ${this.name}!`); } } class Child extends Parent { constructor(name, age) { super(name); this.age ...
Set、Map、WeakSet 和 WeakMap 是 JavaScript 中的四种数据结构，它们各自有不同的特点和用途。1. Set：Set 是一种集合，其中的元素是唯一且无序的。它类似于数组，但不允许包含重复的值。主要特点：元素的值是唯一的。不允许包含重复的值。内部的元素是无序的。适用场景：用于存储一组唯一的值，比如去重、判断值是否存在等。2. Map：Map 是一种键值对的集合，其中的键是唯一的，但值可以重复。主要特点：存储键值对。键是唯一的，值可以重复。可以使用任意类型作为键和值。适用场景：用于存储键值对的集合，比如缓存、数据映射等。3. WeakSet：WeakSet 是一种...
要求：1、只能修改 setTimeout 到 Math.floor(Math.random() * 1000 的代码2、不能修改 Math.floor(Math.random() * 10003、不能使用全局变量function print(n){ setTimeout(() => { console.log(n); }, Math.floor(Math.random() * 1000)); } for(var i = 0; i < 100; i++){ print(i); }解答// 使用call立即执行 function print(n){ set...
先看Link点击事件handleClick部分源码 if (_this.props.onClick) _this.props.onClick(event); if (!event.defaultPrevented && // onClick prevented default event.button === 0 && // ignore everything but left clicks !_this.props.target && // let browser handle "...
Number.prototype.add = function(n) { return this.valueOf() + n; }; Number.prototype.minus = function(n) { return this.valueOf() - n; };
要实现一个通用的加法方法，可以考虑以下几点：处理不同精度的小数。处理科学计数法。处理整数和小数之间的加法。function add(a, b) { // 将数字转换为字符串，以便处理科学计数法 const strA = String(a); const strB = String(b); // 获取小数点的位置 const dotIndexA = strA.indexOf('.'); const dotIndexB = strB.indexOf('.'); // 计算小数部分的位数 const decimalPlaces...
Promiseconst sleep = time => { return new Promise(resolve => setTimeout(resolve,time)) } sleep(1000).then(()=>{ console.log(1) })Generatorfunction* sleepGenerator(time) { yield new Promise(function(resolve,reject){ setTimeout(resolve,time); }) } sleepGenerator(1000).next().va...
原代码var a = ?; if(a == 1 && a == 2 && a == 3){ console.log(1); }1. 重写toStringvar a = { i: 1, toString() { return a.i++; } } if( a == 1 && a == 2 && a == 3 ) { console.log(1); }2. 重写valueOfvar a = { i: 1, valueOf() { return a.i++; } } if(...
原代码for (var i = 0; i< 10; i++){ setTimeout(() => { console.log(i); }, 1000*i) }1. 使用es5 块级作用域 letfor (let i = 0; i< 10; i++){ setTimeout(() => { console.log(i); }, 1000*i) }2. 使用闭包for (var i = 0; i< 10; i++){ (function(i) { setTimeout(() =&...
JavaScript 定时器回调函数执行时间可能不准确的原因有几个：1.事件循环的机制：JavaScript 是单线程的，所有任务都需要通过事件循环来执行。当定时器到期时，定时器回调函数会被添加到事件队列中等待执行。然而，如果事件队列中有其他任务正在执行，定时器回调函数可能会延迟执行，因为它要等待当前任务执行完毕后才能执行。2. 定时器的精度：定时器的精度取决于宿主环境（浏览器或 Node.js）和系统的性能。通常情况下，定时器的精度在几毫秒到几十毫秒之间，但是在某些情况下可能会出现更大的误差。3. 页面或系统负载：如果页面或系统负载较高，可能会导致定时器回调函数执行时间不准确。例如，页...
参考链接：「多图详解」NodeJs中EventLoop与浏览器下的差异性浏览器环境浏览器环境的事件循环（Event Loop）机制是浏览器用来处理 JavaScript 代码异步事件的一种机制，它确保了 JavaScript 在单线程执行的同时能够处理异步任务和事件回调。事件循环机制包含以下几个关键概念：1. 调用栈（Call Stack）：调用栈用于存储执行上下文（execution context），每当调用一个函数时，该函数的执行上下文会被推入调用栈，当函数执行完成时，执行上下文会被弹出。2. 任务队列（Task Queue）：任务队列用于存储异步任务和事件回调，分为宏任务队列（m...
Promise.resolve 方法用于创建一个已解决（resolved）的 Promise 对象，该对象会将指定的值作为解决值。它的用法有多种情况，具体取决于传入的参数类型：无参数：如果不传入任何参数，则会返回一个立即解决的 Promise 对象，其解决值为 undefined。const promise = Promise.resolve(); promise.then((value) => { console.log(value); // undefined });传入非 Promise 对象的参数：如果传入的参数不是 Promise 对象，Promise.resolve...
在 JavaScript 中，Promise 构造函数是同步执行的，而 then 方法是异步执行的。当创建一个 Promise 实例时，Promise 构造函数会立即执行，并且其中的代码会立即执行。例如：console.log('Before promise creation'); const promise = new Promise((resolve, reject) => { console.log('Inside promise executor'); resolve(); }); console.log('After promise creation');在上...
省流：Async/Await实质上是一个语法糖，基于 Generator + Promise 实现可以参考 面试题：Generator怎么实现类似async/await的效果？怎么实现迭代器？function get(val) { return new Promise((resolve, reject)=>{ console.log(`正在加载${val}`); setTimeout(()=>{ resolve(val); console.log(`${val}加载完毕`); },5000 + Math.random() *...
function wait() { return new Promise(resolve => setTimeout(resolve, 10 * 1000) ) } async function main() { console.time(); const x = wait(); const y = wait(); const z = wait(); await x; await y; await z; console.timeEnd(); } main();答案：约等于10秒
1 + "1" 2 * "2" [1, 2] + [2, 1] "a" + + "b"让我们逐个分析这些表达式的结果：1 + "1"：第一个操作数是一个数字 1，第二个操作数是一个字符串 "1"。在 JavaScript 中，当一个数字与一个字符串相加时，数字会被隐式转换为字符串，然后进行字符串拼接操作。因此，结果是字符串 "11"。2 * "2"：第一个操作数是一个数字 2，第二个操作数是一个字符串 "2&quo...
var name = 'Tom'; (function () { if (typeof name == 'undefined') { var name = 'Jack'; console.log('Goodbye ' + name); } else { console.log('Hello ' + name); } })(); 省流：if 里面var变量声明也会提升，声明提升，赋值不提升。变量提升后：var name = 'Tom'; (function () { var name; if (type...
这段代码执行时可能会让人感到困惑，因为 map 函数的参数是一个函数，而 parseInt 是一个函数，但它又接受两个参数。这导致 map 的行为并不是我们预期的。让我们来分析一下这段代码的执行过程：['1', '2', '3'] 是一个包含三个字符串元素的数组。map 函数对数组中的每个元素都调用一次传入的函数，并将结果组成一个新的数组返回。在 map 函数中，每个元素都作为参数传递给 parseInt 函数。parseInt 函数接受两个参数：要解析的字符串和一个表示解析的进制数的可选参数。parseInt('1', 0)，parseInt('2', 1)，parseInt('3',...
String('11') == new String('11'); String('11') === new String('11');在这两个表达式中，第一个是使用双等号 == 进行比较，第二个是使用严格相等运算符 === 进行比较。String('11') == new String('11');这个表达式使用了双等号，进行了强制类型转换后比较。在进行比较时，JavaScript 会尝试将两个操作数转换为相同的类型，然后再进行比较。对于原始值和对象的比较，JavaScript 会尝试将对象转换为原始值，然后再进行比较。String('11') 返回一个字符串 '11'，而 new S...
function Foo() { Foo.a = function () { console.log(1) } this.a = function () { console.log(2) } } Foo.prototype.a = function () { console.log(3) } Foo.a = function () { console.log(4) } Foo.a(); let obj = new Foo(); obj.a(); Foo.a();输出：4 2 1function Foo() {...
function changeObjProperty(o) { o.siteUrl = "http://www.baidu.com" o = new Object() o.siteUrl = "http://www.google.com" } let webSite = new Object(); changeObjProperty(webSite); console.log(webSite.siteUrl);在这段代码中，函数 changeObjProperty 接收一个对象 o 作为参数。首先，在函数内部，它将 o 的 siteU...
在处理中文输入法下的拼音值问题时，可以使用 compositionstart 和 compositionend 事件来识别输入法的状态，并在输入法输入完成后再处理输入的值。下面是一个解决方案的示例代码：// 定时器变量 let timer; // 输入框的值 let inputValue = ''; // 搜索函数 function search(value) { console.log('搜索内容:', value); // 执行搜索逻辑... } // 输入事件处理函数 function handleInput(event) { // 获取输入框的值 ...
// example 1 var a={}, b='123', c=123; a[b]='b'; a[c]='c'; console.log(a[b]); --------------------- // example 2 var a={}, b=Symbol('123'), c=Symbol('123'); a[b]='b'; a[c]='c'; console.log(a[b]); --------------------- // example 3 var a={}, b={key:'123'}, c={key:'456'}; a[b]='b'; a[c]...
箭头函数是普通函数的简写，可以更优雅的定义一个函数，和普通函数相比，有以下几点差异：1、函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。2、不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。3、不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。4、不可以使用 new 命令，因为：没有自己的 this，无法调用 call，apply。没有 prototype 属性 ，而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的 protonew 过程大致是这样的：fun...
var a = {n: 1}; var b = a; a.x = a = {n: 2}; console.log(a.x)//undefined console.log(b.x)//{n:2}语句的执行永远是先求值，后运算，求值顺序是从左到右，得到值之后，再根据运算符优先级运算。对于同级运算符，又分为左结合和右结合，赋值运算符为右结合，所以有从右到左一说。a.x = a = { n: 2 } 这行语句是这样的结构：[表达式 A] [赋值运算符] [表达式 B] [赋值运算符] [表达式 C]执行过程：求值：a.x -> 返回 a.x 的引用 ref1 求值：a -> 返回...
var obj = { '2': 3, '3': 4, 'length': 2, 'splice': Array.prototype.splice, 'push': Array.prototype.push } obj.push(1) obj.push(2) console.log(obj)1.使用第一次push，obj对象的push方法设置 obj[2]=1;obj.length+=12.使用第二次push，obj对象的push方法设置 obj[3]=2;obj.length+=1执行结果为{ 2: 1, 3: 2, le...
[3, 15, 8, 29, 102, 22].sort() 的结果是 [102, 15, 22, 29, 3, 8]。这个结果可能看起来有些奇怪，因为 sort() 方法默认将数组的元素视为字符串进行排序。当比较数字字符串时，它们会按照其 Unicode 值的顺序进行排序，这可能导致不符合预期的排序结果。要对数字进行正确的排序，可以传入一个比较函数给 sort() 方法。比较函数应该返回负值、零或正值，分别表示第一个参数应该排在前面、两个参数位置不变、第二个参数应该排在前面。示例如下：[3, 15, 8, 29, 102, 22].sort((a, b) => a - b);这样...
var a = 10; (function () { console.log(a) a = 5 console.log(window.a) var a = 20; console.log(a) })()在这段代码中，有一个自执行函数，里面涉及了变量 a 的赋值和作用域。让我们来逐步分析这段代码的执行过程：1. 全局变量 a 的赋值：var a = 10;这行代码定义了一个全局变量 a，并将其赋值为 10。2. 自执行函数：(function () { console.log(a); // undefined a = 5; c...
var b = 10; (function b() { b = 20; console.log(b) })()几个例子：var b = 10; (function b() { // 内部作用域，会先去查找是有已有变量b的声明，有就直接赋值20，确实有了呀。发现了具名函数 function b(){}，拿此b做赋值； // IIFE的函数无法进行赋值（内部机制，类似const定义的常量），所以无效。 // （这里说的“内部机制”，想搞清楚，需要去查阅一些资料，弄明白IIFE在JS引擎的工作方式，堆栈存储IIFE的方式等） b = 20; consol...
在 JavaScript 中，const 和 let 声明的变量不会被添加到全局对象（如浏览器中的 window）上。相反，它们只在声明它们的块级作用域内可见。具体来说，const 和 let 声明的变量的作用域由它们所在的块级作用域决定。块级作用域是指由一对花括号 {} 包裹起来的代码块，例如函数、循环或条件语句的代码块。举个例子：// 在全局作用域中 const x = 10; let y = 20; function foo() { // 在函数作用域中 const z = 30; let w = 40; console.log(x); // 可访问，输出 10...
JavaScript 的模块化发展历程经历了多个阶段，包括早期的命名空间模式、立即执行函数模式、CommonJS、AMD、UMD、ES6 模块等。以下是 JavaScript 模块化发展的主要阶段：1. 命名空间模式：早期的 JavaScript 中，为了避免全局命名冲突，开发者通常使用命名空间模式来组织代码。通过创建全局对象的属性，将相关的函数和变量封装在这个对象中，以模拟命名空间的概念。2. 立即执行函数模式：立即执行函数模式是在命名空间模式基础上的改进。开发者将代码封装在匿名函数中，并立即执行这个函数，这样可以创建一个私有作用域，避免了变量的污染和冲突。3. CommonJS：Co...
1. Object.prototype.toString.call()每一个继承 Object 的对象都有 toString 方法，如果 toString 方法没有重写的话，会返回 [Object type]，其中 type 为对象的类型。但当除了 Object 类型的对象外，其他类型直接使用 toString 方法时，会直接返回都是内容的字符串，所以我们需要使用call或者apply方法来改变toString方法的执行上下文。const an = ['Hello','An']; an.toString(); // "Hello,An" Object.prototyp...
Symbol类型是 JavaScript 中的基本数据类型，与字符串、数字等不同。Symbol是一种原始值，它不是对象，并且没有 toString 方法。这是因为 Symbol 是一种独一无二的值，用于创建唯一的标识符。每个 Symbol 值都是唯一的，即使它们的描述（也称为 Symbol 的名称）相同，它们也是不相等的。由于 Symbol 的唯一性，它们不需要被转换成字符串或其他形式。虽然 Symbol 实例本身没有 toString 方法，但您可以使用 String() 函数或模板字符串将 Symbol 转换为字符串。例如：const mySymbol = Symbol('mySym...
JavaScript 中的基本类型有以下几种：数字（Number）：包括整数和浮点数。字符串（String）：包括单引号、双引号和反引号括起来的文本。布尔值（Boolean）：true 或 false。空值（Null）：表示一个空值或不存在的值。未定义（Undefined）：表示一个未定义的值。符号（Symbol）：ES6 中新增的数据类型，表示独一无二的值。大整数（BigInt）：ES10 中新增的数据类型，用于表示任意精度的整数。当 Function.call() 方法的参数是基本类型时，非严格模式下JavaScript 引擎会将这些基本类型的值转换为相应的包装对象类型，然后将这些对...
在计算机中，浮点数的精度有限，因此在进行浮点数运算时可能会出现精度损失的情况。这就是为什么在某些情况下，例如 0.1 + 0.2 并不精确等于 0.3 的原因。要在 JavaScript 中进行浮点数的相等比较，可以使用一种技巧，即判断它们的差值是否小于某个很小的数值（例如 Number.EPSILON），以确定它们是否近似相等。以下是一个示例：const num1 = 0.1; const num2 = 0.2; const sum = num1 + num2; const target = 0.3; if (Math.abs(sum - target) < Number.EP...
最近评论