前端杂学录（三）

最新推荐文章于 2024-10-01 17:27:19 发布
最新推荐文章于 2024-10-01 17:27:19 发布
阅读量925 收藏 15
点赞数 24
分类专栏： 前端 文章标签： 前端 html5 css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wcm2577/article/details/142591579
版权

1.如何实现网页变灰

给页面的html元素设置 styele：filter：grayscale（1）

针对某一区域：同样给该区域的style设置  filter：grayscale（1）

2.原型与原型链

原型

每个函数都有一个prototype属性，它默认指向一个Object空（实例）对象（即原型对象）（但Object 不满足）


空对象指没有我们定义的属性或者方法

添加我们的方法（实例对象可以访问）：

fn.prototype.test= function(){
    console.log('test')
}

原型对象中一个属性constructor，它指向函数对象

构造函数和它的原型对象相互引用（Type 可以当做上面的 fn）

函数的所有实例对象自动拥有原型中的属性（方法）

 每个函数function都有一个prototype，即显示原型（属性）

每个实例对象都有一个__proto__，即隐式原型（属性）

对象的隐式原型的值为其对应构造函数的显示原型的值f.__proto 和 fn.prototype 的值都是一个相同的地址值

 函数的prototype属性在定义函数时自动添加，默认值是一个Object空对象

对象的__proto__属性，创建对象时自动添加，默认值为构造函数的prototype属性值

程序员能直接操作显示 原型属性，但最好不要直接操作隐式原型属性

原型链（隐式原型链）

作用：查找对象的属性

访问一个对象的属性时，先在自身属性中查找，找到返回
如果没有找到，在沿着__proto__这条链向上查找，找到返回
如果最终没找到，返回undefined

 构造函数/原型/实例对象的关系(图解)：
var o1 = new Object();
var o2 = {};
实例对象的__proto = 函数对象的prototype   指向Object原型对象


构造函数/原型/实例对象的关系2(图解)：

function Foo(){  }

 函数对象的prototype指向空的Object对象

所有的函数都是一个实例（Function 的实例），因此存在__proto__指向Function的显示原型
可以说所有的函数都有隐式原型和显示原型属性

所有的函数都是Function的实例（包括Function）


实例对象的隐式原型属性=构造函数的显示原型属性（说明Function是new自己创建的 ：Function = new Function） --> 所有函数的__proto__都是一样的
Object（）是 Function 的实例

总图：

读取对象的属性时，会自动到原型链中查找

设置对象的属性值时，不会查找原型链，如果当前对象中没有此属性，直接添加此属性并设置其值 

3.instanceof是如何判断的

表达式： A instanceof B   A是一个实例，B是一个构造函数对象

如果B函数的显示原型对象在A对象的原型链上，返回true，否则返回false
实例对象的隐式原型指向构造函数的显示原型

4.原型面试题

 

 

5.JavaScript如何实现异步编程，可以详细描述EventLoop机制

JavaScript 的异步编程主要通过回调函数、Promise 和 async/await 来实现。理解 JavaScript 的事件循环（Event Loop）机制是理解异步编程的关键。

1. 异步编程的方式

  • 回调函数：最基础的异步方式，通过在异步操作完成后调用回调函数。
  • Promise：更现代的异步处理方式，允许更清晰地处理成功和失败的情况，支持链式调用。
  • async/await：基于 Promise 的语法糖，使异步代码看起来更像同步代码，提升可读性。

2. Event Loop 机制

JavaScript 是单线程的，意味着同一时间只能执行一个任务。为了处理异步操作，JavaScript 使用了事件循环机制，其主要组成部分如下：

a. 执行栈（Call Stack）
  • 用于管理当前执行的函数。每当一个函数被调用时，会被推入栈中；执行完毕后会从栈中弹出。
b. Web APIs
  • 浏览器提供的一些异步操作，比如 setTimeout、HTTP 请求、事件监听等。这些操作会在后台处理，当处理完成后，会将回调函数推入消息队列。
c. 消息队列（Callback Queue）
  • 当异步操作完成后，对应的回调函数会被放入消息队列中，等待主线程空闲时执行。
d. 事件循环（Event Loop）
  • 事件循环的任务是监视执行栈和消息队列。如果执行栈为空，事件循环会从消息队列中取出第一个任务，将其推入执行栈并执行。

3. 事件循环的执行流程

  1. 执行栈中的任务：首先，JavaScript 运行主线程上的任务，将其推入执行栈并执行。
  2. 异步操作的调用：当遇到异步操作（如 setTimeout），会将其传递给 Web APIs 处理，并继续执行后续代码。
  3. 任务完成：一旦异步操作完成，对应的回调会被放入消息队列。
  4. 事件循环：事件循环检查执行栈是否为空。如果为空，它会从消息队列中取出一个任务，推入执行栈并执行。
  5. 重复过程：这个过程持续进行，直到所有任务都被处理。

示例

console.log('Start');

setTimeout(() => {
    console.log('Timeout 1');
}, 0);

new Promise((resolve) => {
    console.log('Promise 1');
    resolve();
}).then(() => {
    console.log('Promise 1 Resolved');
});

setTimeout(() => {
    console.log('Timeout 2');
}, 0);

new Promise((resolve) => {
    console.log('Promise 2');
    resolve();
}).then(() => {
    console.log('Promise 2 Resolved');
});

console.log('End');

输出顺序

Start
Promise 1
Promise 2
End
Promise 1 Resolved
Promise 2 Resolved
Timeout 1
Timeout 2

解析输出顺序

  1. Start：首先输出。
  2. Promise 1 和 Promise 2：同步代码执行。
  3. End：最后的同步输出。
  4. Promise 1 Resolved 和 Promise 2 Resolved：微任务（Promise）在宏任务（setTimeout）之前执行。
  5. Timeout 1 和 Timeout 2：最后执行的宏任务。

6.宏任务和微任务分别有哪些? 结合浏览器渲染怎么解释清楚

1. 宏任务（Macrotasks）

宏任务是指那些在事件循环中需要较长时间执行的任务。每次从消息队列中取出并执行一个宏任务时，会执行到这个任务结束。常见的宏任务包括：

  • setTimeout 和 setInterval
  • I/O 操作
  • UI 事件（如鼠标点击、键盘输入等）
  • requestAnimationFrame

2. 微任务（Microtasks）

微任务是一类比宏任务更优先执行的任务。微任务会在当前执行栈清空后立即执行，而在下一个宏任务之前。常见的微任务包括：

  • Promise 的 .then() 和 .catch()
  • MutationObserver
  • async/await

3. 执行顺序

在事件循环中，执行顺序如下：

  1. 执行栈中的同步代码。
  2. 当执行栈为空时，首先执行所有微任务队列中的任务，直到微任务队列为空。
  3. 然后执行一个宏任务队列中的任务。
  4. 重复步骤 2 和 3，直到所有任务都执行完。

4. 结合浏览器渲染

浏览器渲染涉及到多个步骤，如计算样式、布局、绘制等。理解宏任务和微任务如何影响渲染过程非常重要。

  • 宏任务：
    • 一般与用户交互和定时器相关，如点击事件和定时器回调。
    • 在每次事件循环中，浏览器可能会在执行宏任务前进行一次渲染。
  • 微任务：
    • 主要用于处理异步操作的结果（如 Promise 的回调），在浏览器进行渲染之前会先处理所有微任务。
    • 因此，微任务可以在事件循环的过程中频繁执行，而不会触发额外的渲染。

示例

console.log('Start');

setTimeout(() => {
    console.log('Timeout 1');
}, 0);

Promise.resolve().then(() => {
    console.log('Promise 1 Resolved');
}).then(() => {
    console.log('Promise 2 Resolved');
});

setTimeout(() => {
    console.log('Timeout 2');
}, 0);

console.log('End');

输出顺序

Start
End
Promise 1 Resolved
Promise 2 Resolved
Timeout 1
Timeout 2

解析输出顺序

  1. Start 和 End：同步代码执行，输出顺序为先 Start 后 End。
  2. Promise 1 Resolved 和 Promise 2 Resolved：微任务优先于宏任务执行。
  3. Timeout 1 和 Timeout 2：最后执行宏任务。

7.如何快速分析一个复杂的异步嵌套逻辑，并掌握分析方法

1. 理解基本概念

在深入分析之前，确保你理解以下基本概念：

  • 异步操作：比如 setTimeout、Promise、async/await 等。
  • 事件循环：了解如何处理宏任务和微任务。
  • 回调函数：异步操作完成后执行的函数。

2. 绘制流程图

通过绘制流程图来可视化异步逻辑的执行顺序，可以帮助你理清思路。

  • 标记每个异步操作：标明何时发起、何时返回、何时调用回调。
  • 指明数据流：记录数据在不同异步操作之间的传递。

3. 拆分逻辑

将复杂的逻辑拆分成更小的部分，逐一分析。

  • 识别函数：将代码中的函数和回调提取出来，关注它们的输入和输出。
  • 检查依赖：了解每个函数之间的依赖关系，识别哪些操作是顺序执行的，哪些是并行的。

4. 确定执行顺序

根据异步操作的类型（回调、Promise、async/await）来确定它们的执行顺序。

  • 使用日志输出：在关键位置添加 console.log，查看代码执行的先后顺序。
  • 关注微任务和宏任务：记住微任务在宏任务之前执行，利用这一点来分析执行顺序。

5. 示例分析

让我们通过一个复杂的异步嵌套逻辑示例来实践这些方法：

function asyncFunction1() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('Function 1 complete');
            resolve(1);
        }, 1000);
    });
}

function asyncFunction2(value) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('Function 2 complete with value:', value);
            resolve(value + 1);
        }, 500);
    });
}

async function main() {
    const result1 = await asyncFunction1(); // 1秒
    const result2 = await asyncFunction2(result1); // 0.5秒
    console.log('Final result:', result2);
}

main();

6. 分析步骤

  1. 识别异步操作：

    • asyncFunction1 和 asyncFunction2 都是返回 Promise 的异步函数。

  2. 绘制流程图：

    • main 函数调用 asyncFunction1，等待其完成。
    • 一旦 asyncFunction1 完成，执行 asyncFunction2。

  3. 确定执行顺序：

    • asyncFunction1 先开始执行，经过 1 秒后输出 "Function 1 complete"。
    • asyncFunction2 开始执行，经过 0.5 秒后输出 "Function 2 complete with value: 1"。
    • 最后输出 "Final result: 2"。

  4. 输出分析：

    • 通过 console.log 记录的输出可以清晰地跟踪每个异步操作的完成时间和顺序。

7. 优化和重构

分析完后，可以考虑是否可以优化或重构代码，例如使用 Promise.all 来并行执行独立的异步操作，或使用 async/await 简化回调地狱的结构。

8.如何使用Promise实现串行

1. 基本思路

  • 链式调用：在一个 Promise 的 then 方法中返回下一个 Promise，这样可以保证它们按顺序执行。
  • 每个 Promise 完成后：在下一个 Promise 中处理后续逻辑。

2. 示例代码

以下示例展示如何使用 Promise 实现串行操作：

function asyncOperation1() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('Operation 1 complete');
            resolve(1); // 返回结果
        }, 1000);
    });
}

function asyncOperation2(value) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('Operation 2 complete with value:', value);
            resolve(value + 1); // 使用前一个操作的结果
        }, 500);
    });
}

function asyncOperation3(value) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('Operation 3 complete with value:', value);
            resolve(value + 1);
        }, 300);
    });
}

// 串行执行
asyncOperation1()
    .then(result1 => asyncOperation2(result1))
    .then(result2 => asyncOperation3(result2))
    .then(finalResult => {
        console.log('Final result:', finalResult); // 输出最终结果
    })
    .catch(error => {
        console.error('Error:', error); // 错误处理
    });

3. 输出顺序

运行上述代码时，输出将是：

Operation 1 complete
Operation 2 complete with value: 1
Operation 3 complete with value: 2
Final result: 3

4. 使用 async/await

另外，你也可以使用 async/await 来实现更简洁的串行执行：

async function executeInSeries() {
    try {
        const result1 = await asyncOperation1(); // 等待第一个操作完成
        const result2 = await asyncOperation2(result1); // 等待第二个操作
        const finalResult = await asyncOperation3(result2); // 等待第三个操作
        console.log('Final result:', finalResult); // 输出最终结果
    } catch (error) {
        console.error('Error:', error); // 错误处理
    }
}

executeInSeries();

9.Node与浏览器EventLoop的差异

1. 环境和用途

  • 浏览器：主要用于处理用户界面、DOM 操作和用户事件。它需要处理渲染、用户输入等。
  • Node.js：主要用于服务器端开发，处理文件 I/O、网络请求等。它更专注于后端逻辑。

2. 事件循环的结构

  • 浏览器：

    • 拥有渲染队列，处理 DOM 更新和绘制。每次完成一个宏任务后，浏览器会进行一次渲染。
    • 使用宏任务和微任务，微任务（如 Promise 的 .then）会在每个宏任务结束后执行，保证了微任务在渲染之前执行。

  • Node.js：

    • 没有渲染相关的操作，因此没有渲染队列。
    • 将 I/O 操作的回调放在不同的队列中，如 timers（定时器）、I/O callbacks、idle, prepare、poll、check 和 close callbacks。

3. 异步操作的处理

  • 浏览器：常见的异步操作包括用户事件、网络请求、定时器等，直接与 UI 交互。
  • Node.js：侧重于文件系统、网络请求等与后端交互的操作，通常通过 API 提供支持。

4. 微任务和宏任务的处理顺序

  • 浏览器：

    • 微任务在每个宏任务完成后立即执行，这样确保所有微任务在下一次渲染之前都被处理。

  • Node.js：

    • 微任务（如 Promise 的处理）会在每个事件循环的结束时执行，不一定会在所有宏任务之前处理。Node.js 中的微任务会在 I/O 操作后执行。

5. 实现细节

  • 浏览器：处理的是 UI 相关的复杂性，因此需要考虑渲染和用户交互。
  • Node.js：更多关注服务器性能和高并发，因此设计上针对 I/O 密集型任务进行了优化。

示例对比

以下是简单的示例，说明两者在事件循环中的表现：

浏览器示例
console.log('Start');

setTimeout(() => {
    console.log('Timeout');
}, 0);

Promise.resolve().then(() => {
    console.log('Promise');
});

console.log('End');
Node.js 示例
console.log('Start');

setTimeout(() => {
    console.log('Timeout');
}, 0);

Promise.resolve().then(() => {
    console.log('Promise');
});

console.log('End');

输出顺序

在浏览器和 Node.js 中，输出顺序都是：

Start
End
Promise
Timeout

10.如何在保证页面运行流畅的情况下处理海量数据

1. 虚拟滚动（Virtual Scrolling）

  • 实现方法：只渲染可视区域内的数据项，而不是整个数据集。随着用户滚动，动态加载新的数据项。
  • 优点：显著减少 DOM 节点数量，提高渲染性能。

2. 分页（Pagination）

  • 实现方法：将数据分成多个页，每次只加载和渲染一部分数据。
  • 优点：降低初始加载时间和内存占用，提高用户体验。

3. 懒加载（Lazy Loading）

  • 实现方法：仅在需要时（如用户滚动到某个部分）加载数据。
  • 优点：减少初始数据量，减轻页面负担。

4. Web Workers

  • 实现方法：使用 Web Workers 在后台线程处理数据，避免阻塞主线程。
  • 优点：保证页面流畅性，尤其是在进行复杂计算或数据处理时。

5. 数据节流（Throttling）和防抖（Debouncing）

  • 实现方法：限制事件触发的频率，比如在用户输入时减少请求次数。
  • 优点：避免短时间内大量操作导致性能问题。

6. 数据格式优化

  • 实现方法：选择高效的数据格式，如 JSON，而不是 XML 或其他复杂格式，减少解析时间。
  • 优点：减少数据传输和解析的开销。

7. 使用 CDN 和缓存

  • 实现方法：利用内容分发网络（CDN）和浏览器缓存减少数据加载时间。
  • 优点：加快数据获取速度，减轻服务器负担。

8. 优化渲染性能

  • 使用 CSS 动画：使用 CSS 而不是 JavaScript 来处理动画，利用 GPU 加速。
  • 减少重排和重绘：合并 DOM 操作，尽量减少样式改变次数，避免频繁的重排和重绘。

9. 使用框架和库

  • 选择合适的框架：一些现代框架（如 React、Vue.js）提供虚拟 DOM 和高效的渲染机制，可以更好地处理海量数据。
  • 利用组件化：将数据展示拆分成多个可复用的组件，优化渲染和更新逻辑。

10. 数据合并与聚合

  • 实现方法：在前端减少数据量，比如合并相似数据项，或只加载用户最需要的信息。
  • 优点：减少需要处理和渲染的数据量。

11. 使用合适的图表库

  • 实现方法：如果数据需要可视化，选择高性能的图表库（如 D3.js、Chart.js），并采用简化的数据模型。
  • 优点：提高数据展示的流畅性和交互性。

示例：虚拟滚动实现

const container = document.getElementById('container');
const itemHeight = 30; // 每个项的高度
const visibleCount = 10; // 可见项数量
const totalCount = 1000; // 总项数

function render(startIndex) {
    const items = Array.from({ length: visibleCount }, (_, i) => {
        const index = startIndex + i;
        return `<div style="height: ${itemHeight}px;">Item ${index}</div>`;
    }).join('');
    
    container.innerHTML = items;
}

container.addEventListener('scroll', () => {
    const scrollTop = container.scrollTop;
    const startIndex = Math.floor(scrollTop / itemHeight);
    render(startIndex);
});

// 初始化
render(0);

11.理解ECMAScript和JavaScript的关系

1. 定义

  • ECMAScript：是由 ECMA 国际组织制定的标准，定义了一种脚本语言的规范。它描述了语言的基本语法、类型、对象、流程控制等核心特性。

  • JavaScript：是 ECMAScript 标准的一种实现，通常被称为“脚本语言”，由 Netscape 在 1995 年首次推出。JavaScript 增加了许多 ECMAScript 所没有的功能，如 DOM 操作、浏览器 API 等。

2. 规范与实现

  • ECMAScript 规范：每个版本的 ECMAScript（如 ES5、ES6/ES2015、ES2020 等）都会在语言的基础上引入新特性和改进。

  • JavaScript 实现：JavaScript 引擎（如 V8、SpiderMonkey）会根据 ECMAScript 的规范来实现这些特性。不同的引擎可能在某些特性上有细微差别，但它们都遵循 ECMAScript 的基本规则。

3. 版本迭代

  • ECMAScript 版本：随着时间的推移，ECMAScript 不断更新，引入新的语法和功能（如箭头函数、async/await、类等）。

  • JavaScript 版本：虽然 JavaScript 跟随 ECMAScript 的更新，但它也会添加特定于浏览器或平台的功能，这些功能不一定会出现在 ECMAScript 标准中。

4. 兼容性

  • 兼容性问题：由于不同浏览器和环境对 ECMAScript 的支持程度不同，JavaScript 的行为在不同平台上可能会有所不同。这导致开发者在编写 JavaScript 代码时，需要考虑兼容性问题。

12.es5、es6提供的语法规范

ES5 主要特性

  1. 严格模式（Strict Mode）

    • 使用 "use strict"; 声明，启用严格模式，帮助捕获潜在错误。

  2. 数组方法

    • 新增了 forEach、map、filter、reduce、some 和 every 等数组处理方法。

  3. JSON 支持

    • 原生支持 JSON，提供 JSON.parse() 和 JSON.stringify() 方法。

  4. Object 方法

    • 新增 Object.create()、Object.defineProperty()、Object.keys() 等方法。

  5. Getter 和 Setter

    • 支持对象的访问器属性（getter 和 setter）。

  6. 函数绑定（bind）

    • Function.prototype.bind() 方法用于改变 this 的上下文。

ES6 主要特性

  1. 块级作用域

    • 引入 let 和 const 关键字，创建块级作用域的变量。

  2. 箭头函数

    • 使用箭头语法定义函数，自动绑定 this。

    const add = (a, b) => a + b;

  3. 模板字符串

    • 使用反引号 (`) 定义多行字符串，并支持插值。

    const name = 'World'; console.log(`Hello, ${name}!`);

  4. 解构赋值

    • 允许从数组或对象中提取值并赋值给变量。

    const arr = [1, 2, 3]; const [a, b] = arr; // a = 1, b = 2

  5. 默认参数

    • 函数参数可以设置默认值。

    function multiply(a, b = 1) { return a * b; }

  6. 模块化

    • 引入 import 和 export 语法，支持模块化编程。

    // myModule.js export const name = 'Module';

  7. Promises

    • 提供原生的 Promise 对象，简化异步编程。

    const promise = new Promise((resolve, reject) => { // 异步操作 });

  8. 类（Class）

    • 支持面向对象编程的类语法。

    class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name} makes a noise.`); } }

  9. 扩展运算符

    • 使用 ... 语法展开数组或对象。

    const arr1 = [1, 2]; const arr2 = [...arr1, 3]; // arr2 = [1, 2, 3]

  10. Map 和 Set

    • 新增 Map 和 Set 数据结构。

13.JavaScript提供的全局对象（例如Date、Math）、全局函数（例如decodeURI、isNaN）、全局属性（例如Infinity、undefined）

1. 全局对象

1.1 Date

用于处理日期和时间。

  • 创建日期：

    const now = new Date(); // 当前日期和时间
const specificDate = new Date('2023-09-29'); // 特定日期

  • 常用方法：

    • getFullYear(): 获取年份。
    • getMonth(): 获取月份（0-11）。
    • getDate(): 获取日（1-31）。
    • getTime(): 获取时间戳（毫秒）。
1.2 Math

用于执行数学常数和函数的对象。

  • 常用属性：

    • Math.PI: 圆周率。
    • Math.E: 自然对数的底数。

  • 常用方法：

    • Math.abs(x): 返回绝对值。
    • Math.ceil(x): 向上取整。
    • Math.floor(x): 向下取整。
    • Math.random(): 返回 0 到 1 之间的随机数。
    • Math.max(...args): 返回最大值。
    • Math.min(...args): 返回最小值。

2. 全局函数

2.1 decodeURI 和 encodeURI

用于处理 URL 的编码和解码。

  • decodeURI:

    const decoded = decodeURI('https%3A%2F%2Fexample.com'); // "https://example.com"

  • encodeURI:

    const encoded = encodeURI('https://example.com'); // "https://example.com"
2.2 isNaN

用于判断一个值是否为 NaN（Not-a-Number）。

console.log(isNaN(NaN)); // true
console.log(isNaN('text')); // true
console.log(isNaN(123)); // false
2.3 parseInt 和 parseFloat

用于将字符串解析为整数或浮点数。

  • parseInt:

    const intValue = parseInt('42'); // 42

  • parseFloat:

    const floatValue = parseFloat('3.14'); // 3.14

3. 全局属性

3.1 Infinity

表示无穷大的数值。

console.log(Infinity); // Infinity
console.log(1 / 0); // Infinity
3.2 NaN

表示非数值（Not-a-Number），通常用于数学运算失败的结果。

console.log(NaN); // NaN
console.log(0 / 0); // NaN
3.3 undefined

表示未定义的变量或对象属性。

let a;
console.log(a); // undefined

14.如何使用map、reduce、filter 等高阶函数解决问题

1. map

map 用于对数组中的每个元素执行指定的函数，并返回一个新数组。

示例：将数组中的每个数字平方
const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16, 25]

2. filter

filter 用于过滤数组中的元素，返回满足条件的新数组。

示例：获取数组中所有的偶数
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

3. reduce

reduce 用于将数组中的所有元素通过指定的函数汇总成单一值。

示例：计算数组中所有数字的总和
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); // 15

综合应用示例

结合这三者，可以解决更复杂的问题。例如，从一组用户对象中提取特定信息。

示例：提取用户的名字并计算名字长度的总和
const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 35 }
];

// 1. 提取名字
const names = users.map(user => user.name); // ['Alice', 'Bob', 'Charlie']

// 2. 过滤出长度大于 3 的名字
const longNames = names.filter(name => name.length > 3); // ['Alice', 'Charlie']

// 3. 计算长度的总和
const totalLength = longNames.reduce((acc, name) => acc + name.length, 0); // 13

console.log(totalLength); // 13

4. 总结

  • map：用于转换数组中的每个元素，返回新数组。
  • filter：用于过滤数组中的元素，返回满足条件的新数组。
  • reduce：用于将数组汇总成单一值，适合进行累加、求和等操作。

15.setInterval需要注意的点，使用settimeout实现setInterval

使用 setInterval 时的注意事项

  1. 清除定时器：

    • 使用 clearInterval 清除定时器，以防止内存泄漏或不必要的操作。 
      const intervalId = setInterval(() => {
    console.log("Interval running");
}, 1000);

// 清除定时器
clearInterval(intervalId);

  2. 执行时间超过间隔：

    • 如果定时器的回调函数执行时间超过设定的间隔，可能导致回调被堆积。要谨慎处理长时间运行的任务。

  3. 环境不一致：

    • 在浏览器和 Node.js 中，定时器的精确性可能有所不同，尤其是在高负载情况下。

  4. 不准确的时间间隔：

    • setInterval 可能会在高负载情况下不准确，建议使用 setTimeout 来实现更可靠的定时操作。

使用 setTimeout 实现 setInterval

可以通过递归调用 setTimeout 来模拟 setInterval 的行为，这样可以确保每次执行时都会考虑上一次执行的时间。

示例：
function setIntervalUsingTimeout(callback, interval) {
    let timerId;

    const start = () => {
        callback();
        timerId = setTimeout(start, interval);
    };

    start();

    return {
        clear: () => clearTimeout(timerId)
    };
}

// 使用示例
const myInterval = setIntervalUsingTimeout(() => {
    console.log("Interval running");
}, 1000);

// 清除定时器
setTimeout(() => {
    myInterval.clear();
    console.log("Interval cleared");
}, 5000);

总结

  • 使用 setInterval 时，要注意清除定时器、处理执行时间过长的情况以及在不同环境中的表现。
  • 通过 setTimeout 递归实现 setInterval 可以确保定时的精确性和执行的可靠性。
真的不想学习啦
关注
专栏目录
转行做前端的学习心得，深情交流
qq_43623970的博客
07-02 1002
一、Why choose front-end 2015.07毕业后，进了一家游戏公司做运营策划，写过营销方案、做过内容编辑、知道广告投放和换量，还得兼职产品经理画原型。 每天9.30-23.00以后，周末经常加班，像无头苍蝇一样碰撞一年后，我没有任何成就感，我开始思考自己每天做的是什么，将来会做什么，做的这份工作是自己喜欢的吗？在这个领域上将来会有所成就吗？ 1、重复而繁杂 => No，我喜欢专心研磨一个东西，直到做好它 2、各种会议和无数遍的方案修改 => No，我做事的时候不喜欢被打扰，但这
杂学之(前端localStorage).docx
04-22
在HTML5中，`localStorage`是一项重要的前端存储技术，它为开发者提供了更高效的数据存储解决方案，弥补了传统Cookie存储容量的不足。Cookie每个条目的存储限制为4KB，而`localStorage`通常支持5MB的数据存储，尽管...
前端杂学录（二）
wcm2577的博客
09-27 824
字符串转数组：常用方法有split()、扩展运算符、等。字符串转数字：常用方法有Number()parseInt()和一元加号等。IIFE 是一种有效的 JavaScript 编程模式，能够创建局部作用域，避免全局变量污染，并且在需要立即执行代码的场景中非常实用。随着 ES6 的模块化功能引入，IIFE 的使用逐渐减少，但在某些场合依然非常有用词法作用域：作用域在编写代码时确定，基于代码结构。大多数现代语言使用此机制。动态作用域：作用域在运行时确定，取决于函数的调用顺序。
前端杂学录（一）
wcm2577的博客
09-27 958
原始类型：存储在栈内存中，值是直接存储的，数据大小固定，访问速度快。引用类型：存储在堆内存中，变量保存的是对数据的引用，数据大小动态变化，适合复杂的数据结构。垃圾回收：JavaScript 自动管理内存，使用垃圾回收器清理不再使用的对象，以防止内存泄漏。改变原数组的方法push()pop()shift()unshift()splice()sort()reverse()。不改变原数组的方法map()filter()reduce()slice()concat()find()some()every()。
前端杂学录（四）
wcm2577的博客
10-01 473
用于创建一个新对象，指定原型。：用于定义或修改对象的属性，可以控制属性的特性（如可写、可枚举等）。：用于获取对象的可枚举属性的键名数组。
前端杂学录（五）
最新发布
wcm2577的博客
10-01 700
Service Workers 是一种在浏览器与网络之间运行的脚本，能够拦截和处理网络请求。它们在后台运行，与网页分开，因此可以在没有页面加载的情况下进行操作。Cache API 是一种存储和检索 HTTP 请求及其相应的响应的机制。它通常与 Service Workers 一起使用，允许开发者在离线时提供快速的资源访问。Canvas API 是一种以位图方式进行绘图的技术，可以在网页上动态绘制图形、动画和游戏。SVG（可缩放矢量图形）是一种基于 XML 的图形格式，适合用于矢量图形和动画。
前端杂学1
小蜗牛的博客
02-27 214
1.MVVM是什么将MVC中的V变为了MVVM，实现了双向绑定。其中VM就是vue的作用，这样页面的动态化可以通过vue来操作，而不是页面直接与后端操作，实现了前后端的分离2.为什么vue采用异步渲染？调用1次nexttick这样可以理解为渲染节流:异步方法，返回promise 是微任务4.5.vue生命周期6.null和undefied的区别8.箭头函数和普通函数区别不用return：没有花括号 或者只有一句9.json的理解。
前端笔记67——键盘事件
裕博的博客
01-28 446
前言 在上一篇博客中有分享到鼠标有关的事件。PC端操作中有鼠标当然就少不了键盘有关的事件，下面分享JavaScript关于键盘的事件操作。 键盘事件 简单理解，和键盘有关的事件。 事件名称和触发场景 事件名称 事件的触发场景 onkeydown 当键盘按下的时候触发 onkeyup 当键盘抬起的时候触发 举个例子 ...
80后老阿姨转行做前端的学习心得，深情交流！
BOM485480的博客
07-03 2015
一、Why choose front-end 2012.07毕业后，进了一家游戏公司做运营策划，写过营销方案、做过内容编辑、知道广告投放和换量，还得兼职产品经理画原型。 每天9.30-23.00以后，周末经常加班，像无头苍蝇一样碰撞一年后，我没有任何成就感，我开始思考自己每天做的是什么，将来会做什么，做的这份工作是自己喜欢的吗？在这个领域上将来会有所成就吗？ 1、重复而繁杂 => No，我喜欢专心研磨一个东西，直到做好它 2、各种会议和无数遍的方案修改 => No，我做事的时候不喜欢被打扰，但这
前端笔记71——利用键盘码来控制div移动
裕博的博客
01-29 246
前言 在生活中肯定有玩过贪吃蛇的游戏，那么要怎么样用键盘码来实现div的移动呢？下面就分享一个Demo。 利用键盘码来控制div移动源码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style ty
图解杂学Linux
09-27
《图解杂学Linux》是一本面向初学者和爱好者，由伊藤幸夫编著的图书，旨在通过直观的图表和简洁的语言，帮助读者轻松掌握Linux操作系统的基础知识和实用技能。这本书涵盖了Linux系统的核心概念、安装与配置、常用...
杂学电荷泵倍压输出电路
09-26
电荷泵倍压输出电路是一种利用电容储能和开关元件实现电压提升的电路技术，尤其在需要小电流高电压的应用中十分常见。电荷泵的基本原理是通过控制开关元件（通常为MOSFET或BJT）的状态，使得电容在不同时间连接到...
杂学热插拔及电源输入EOS分析
09-26
在电子硬件设计中，热插拔以及电源输入的电气过应力（EOS）分析是至关重要的环节，因为这直接影响到功率集成电路（Power IC）的稳定性和寿命。本文将深入探讨这些问题，并提供改善策略。 首先，电源芯片的工作电压...
day01
JiangMeiXue的博客
09-25 252
目录。
登录功能开发 P167重点
2303_81204446的博客
09-30 136
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 792
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 1939
Webpack 打包后文件过大，如何优化？
前端规范工程-2：JS代码规范（Prettier + ESLint）
Vinca@的博客
09-26 712
Prettier 主要关注代码的格式，而 ESLint 则关注代码的质量和规范。结合使用这两个工具，可以极大地提高代码的可读性和维护性，同时减少潜在的错误和不一致性。
python的numpy库杂学
08-30
嗨！很高兴回答你关于Python的NumPy库的问题。NumPy是一个强大的科学计算库，提供了高性能的数组对象和各种功能丰富的数学函数。 首先，你可以使用以下命令安装NumPy库： ```python pip install numpy ``` 一旦安装完成，你可以在Python脚本中导入NumPy库： ```python import numpy as np ``` 现在让我们来看一些NumPy的常用功能。 1. 创建NumPy数组： - 使用`np.array()`函数从Python列表或元组创建数组。 - 使用`np.zeros()`创建一个元素全为0的数组。 - 使用`np.ones()`创建一个元素全为1的数组。 - 使用`np.random`模块生成随机数组。 2. 数组操作： - 通过索引访问和修改数组的元素。 - 使用切片操作提取子数组。 - 使用数组的形状、大小和维度等属性。 3. 数学函数： - NumPy提供了丰富的数学函数，例如平方根(`np.sqrt()`)、指数函数(`np.exp()`)、对数函数(`np.log()`)等。 - 通过在数组上应用这些函数，可以进行元素级别的数学操作。 4. 数组运算： - NumPy支持基本的数组运算，如加法、减法、乘法和除法。 - 这些运算可以在两个数组之间进行，也可以在数组和标量之间进行。 5. 线性代数： - NumPy提供了许多线性代数操作的函数，如矩阵乘法(`np.dot()`)、矩阵求逆(`np.linalg.inv()`)、特征值和特征向量(`np.linalg.eig()`)等。 这只是NumPy库的一小部分功能，但对于进行科学计算和数据分析来说非常重要。你可以参考NumPy官方文档以了解更多详细信息：https://numpy.org/doc/ 希望这些信息能帮助你开始学习NumPy库！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

真的不想学习啦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值