前端技巧第五期JavaScript函数

函数定义

1. 传统定义方式
// 1. 函数声明(存在提升)function sum(a, b) {  return a + b;}
// 2. 函数表达式const multiply = function(a, b) {  return a * b;};
// 3. 构造函数(不推荐)const div = new Function('a', 'b', 'return a / b');
2. 现代ES6+语法
// 1. 箭头函数(无this/arguments)const pow = (base, exponent) => base ** exponent;
// 2. 简写方法语法const calculator = {  sqrt(x) {    return Math.sqrt(x);  }};
// 3. 生成器函数function* idGenerator() {  let id = 1;  while(true) yield id++;}
// 4. Async函数async function fetchData(url) {  const res = await fetch(url);  return res.json();}
3. 关键差异对比

在这里插入图片描述

作用域与闭包

1. 作用域链解析
	function outer() {  const outerVar = '外层';function inner() {    const innerVar = '内层';    console.log(outerVar); // 访问外层作用域  }return inner;}const closure = outer();closure(); // "外层" (闭包保持outerVar引用)
2. 闭包
实现私有变量
	function createCounter() {  let count = 0;return {   increment() { count++ },    get() { return count },    reset() { count = 0 }  };}const counter = createCounter();counter.increment();console.log(counter.get()); // 1
记忆化缓存
function memoize(fn) {const cache = new Map();return function (...args) {const key = JSON.stringify(args); if (cache.has(key)) return cache.get(key);const result = fn(...args); cache.set(key, result); return result;};
}
const memoizedFib = memoize(fibonacci);
3. 防止内存泄漏
// 错误示例:DOM元素引用未释放
function init() {const element = document.getElementById('bigData');element.addEventListener('click', () => {console.log(element.id);// 闭包保留element引用});
}
// 正确做法:弱引用
function safeInit() {const element = document.getElementById('bigData');const weakRef = new WeakRef(element);element.addEventListener('click', () => { const el = weakRef.deref(); if (el) console.log(el.id); });
}

this的5种绑定规则

1. 绑定规则详解
// 1. 默认绑定(非严格模式)
function showThis() {console.log(this); // window/global
}
// 2. 隐式绑定
const obj = {value: 42,getValue() { return this.value; }
};
// 3. 显式绑定
function logThis() {console.log(this);
}
const boundFunc = logThis.bind({ name: '绑定的this' });
// 4. new绑定
function Person(name) { this.name = name; }
const person = new Person('Alice');
// 5. 箭头函数(继承外层this)
const outerThis = this;
const arrowFunc = () => {console.log(this === outerThis);// true
};
2. 常见问题解决方案
// 回调函数丢失this问题
class Timer {constructor() {// 使用箭头函数保留this this.seconds = 0;setInterval(() => { this.seconds++; }, 1000);}
}
// 多层嵌套this访问
const deepObj = {level1: {level2: {method() {// 使用箭头函数维持this指向        const helper = () => {console.log(this); // 指向level2对象        }; helper();}}}
};

高阶函数与函数式编程

1. 高阶函数应用
// 函数组合
const compose = (...fns) => (value) => fns.reduceRight((acc, fn) => fn(acc), value);
const add5 = x => x + 5;
const double = x => x * 2;
const process = compose(double, add5);
console.log(process(10)); // (10+5)*2=30
// 柯里化实现
function curry(fn) {return function curried(...args) {if (args.length >= fn.length) {return fn.apply(this, args);} else {return (...args2) => curried(...args, ...args2);}};
}
const curriedSum = curry((a, b, c) => a + b + c); 
console.log(curriedSum(1)(2)(3)); // 6
2. 函数式编程实践
// 不可变数据转换
const users = [{ id: 1, name: 'Alice', age: 28 },{ id: 2, name: 'Bob', age: 35 }
];
// 纯函数处理
const getAdults = users => users.filter(user => user.age >= 18).map(({ id, name }) => ({ id, name }));

ES6+ 函数增强特性

1. 参数处理新语法
// 默认参数
function createUser(name, { age = 18, role = 'user' } = {}) {return { name, age, role };
}
// 剩余参数
function sumAll(...numbers) {return numbers.reduce((acc, n) => acc + n, 0);
}
// 参数解构
function draw({ x = 0, y = 0, color = 'black' }) { console.log(`在(${x},${y})绘制${color}`); 
}
2. 元编程能力
// 函数元属性
function demo(a, b) {console.log(demo.name);// "demo"console.log(demo.length);    // 2
}
// Reflect API
const handler = {apply(target, thisArg, args) {console.log(`调用函数并传入参数: ${args}`);return Reflect.apply(...arguments);}
};
const proxiedFunc = new Proxy(sum, handler); 
proxiedFunc(2, 3); // 输出日志并返回5

性能优化与调试技巧

1. 函数性能优化
	// 避免重复创建函数
// 错误示例
elements.forEach(element => {element.addEventListener('click', () => {// 每次循环都创建新函数  });
});
// 优化方案
const handler = function (event) {// 统一处理逻辑}elements.forEach(element => {element.addEventListener('click', handler);});
}
// 尾调用优化(TCO)
function factorial(n, acc = 1) {if (n <= 1) return acc; return factorial(n - 1, n * acc); // 尾递归形式
}
2. 调试技巧
// 函数断点调试
function complexCalculation() {debugger; // 自动暂停执行  // ...
}
// 性能分析
console.time('heavyTask');
heavyTask();
console.timeEnd('heavyTask');
// 函数调用追踪
function trackCalls(fn) {let count = 0;return function (...args) {count++;console.log(`函数第${count}次调用`);return fn(...args);};
}

函数使用特性

1.优先使用箭头函数:处理异步回调和需要保持this的场景
2.合理使用闭包:注意内存管理,必要时使用WeakMap
3.避免过度嵌套:使用函数组合替代深层嵌套
4.函数单一职责:每个函数只完成一个明确任务
5.性能敏感区优化:避免在循环内创建函数
6.严格模式启用:'use strict' 避免隐式错误
7.全面类型检查:使用TypeScript增强函数可靠性

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/34411.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

钉钉(excel)能让表格中不是‘北京’的字符串自动加亮显示(方便查看)以及隔行填充严颜色是斑马色(方便查看)嘛

在钉钉在线表格中&#xff0c;虽然功能相对Excel有所简化&#xff0c;但仍然可以通过条件格式实现对特定内容的高亮显示。以下是具体步骤&#xff1a; 一、在钉钉在线表格中设置条件格式 1. 打开钉钉在线表格 登录钉钉&#xff0c;进入“钉钉在线表格”应用。 打开你需要操作…

王者荣耀道具页面爬虫(json格式数据)

首先这个和英雄页面是不一样的&#xff0c;英雄页面的图片链接是直接放在源代码里面的&#xff0c;直接就可以请求到&#xff0c;但是这个源代码里面是没有的 虽然在检查页面能够搜索到&#xff0c;但是应该是动态加载的&#xff0c;源码中搜不到该链接 然后就去看看是不是某…

基于Python+SQLite实现(Web)验室设备管理系统

实验室设备管理系统 应用背景 为方便实验室进行设备管理&#xff0c;某大学拟开发实验室设备管理系统 来管理所有实验室里的各种设备。系统可实现管理员登录&#xff0c;查看现有的所有设备&#xff0c; 增加设备等功能。 开发环境 Mac OSPyCharm IDEPython3Flask&#xff…

让双向链表不在云里雾里

又来博客留下我的足迹了&#xff0c;哈哈哈&#xff0c;这次是对于双向链表的理解 目录 创建双向链表&#xff1a; 申请结点&#xff1a; 双向链表初始化&#xff1a; 双向链表插入结点&#xff1a; 双向链表删除结点&#xff1a; 双向链表的打印&#xff1a; 双向链表…

基于SpringBoot的Mybatis和纯MyBatis项目搭建的区别

【由于之前学习MyBatis的时候是跟着视频敲的纯MyBatis项目&#xff0c;以至于在突然看到别人在SpringBoot项目里搭建MyBatis方式的时候很懵比…特此文字形式记录一下区别&#xff08;应该还有好多种其他方式是我不知道的&#xff0c;主要应该就是要知道关键的流程步骤&#xff…

UE4-UE5虚幻引擎,前置学习一--Console日志输出经常崩溃,有什么好的解决办法

有些差异 这么牛逼的引擎&#xff0c;居然有这种入门级别的问题&#xff0c;一触发清理&#xff0c;大概率(80%)会崩溃 无论虚幻5还是UE4都有这个问题&#xff0c;挺烦人的 实在忍不了了&#xff0c;这次&#xff0c;今天 就想问问有什么好的处理方法么&#xff1f;&#x…

学习 springboot -Bean 管理(注册条件)

前言 上一篇 博客 :学习springboot-Bean管理&#xff08;Bean 注册&#xff0c;Bean 扫描&#xff09;-CSDN博客我们了解了 bean 注册需要使用到 Bean 和Import 将第三方jar 包的对象 注入到ioc 容器 如下图所示 通过图片&#xff0c;可以看到Country 对象和Province 对象已…

【云原生技术】编排与容器的技术演进之路

一、编排与容器的技术演进之路 1.1 DockerClient 此时 K8s 只是编排领域的一个选择&#xff0c;而 Docker 此时一家独大&#xff0c;所以 K8s 的客户端只 是作为 Docker 的客户端来调用 Docker 引擎来完成服务。 1.2 RUNC&Shim OCI催生 runcrunc&#xff0c;剥离 Docke…

安卓投屏到mac操作

1. 安装 brew install scrcpy2. 打开手机usb调试 3. 安装 brew install android-platform-tools 4. 重启终端&#xff0c;运行命令 adb devices scrcpy 参考&#xff1a;https://zhuanlan.zhihu.com/p/682491037https://zhuanlan.zhihu.com/p/682491037

c#知识点补充

1.静态类无法被继承 2.线程join方法的使用 作用就是让多个线程&#xff0c;按顺序执行 3.线程里lock的作用 保证每次只执行一次 4.线程池的使用

3分钟复现 Manus 超强开源项目 OpenManus

文章目录 前言什么是 OpenManus构建方式环境准备克隆代码仓库安装依赖配置 LLM API运行 OpenManus 效果演示总结个人简介 前言 近期人工智能领域迎来了一位备受瞩目的新星——Manus。Manus 能够独立执行复杂的现实任务&#xff0c;无需人工干预。由于限制原因大部分人无法体验…

电路原理(电容 集成电路NE555)

电容 1.特性&#xff1a;充放电&#xff0c;隔直流&#xff0c;通交流 2.电容是通过聚集正负电荷来存储电能的 3.电容充放电过程可等效为导通回路 4.多电容并联可以把容量叠加&#xff0c;但是多电容串联就不会&#xff0c;只会叠加电容的耐压值。 6.电容充放电时相当于通路&a…

【redis】hash基本命令和内部编码

文章目录 表示形式命令HSET 和 HGET HEXISTSHDELHKEYSHVALSHGETALLHMGETHLENHSETNXHINCRBYHINCRBYFLOAT命令小结内部编码 表示形式 Redis 自身已经是键值对结构了 Redis 自身的键值对就是通过哈希的方式来组织的 把 key 这一层组织完成之后&#xff0c;到了 value 这一层&…

学习路之TP6 --重写vendor目录下的文件(新建命令)

[TOC](学习路之TP6 --重写vendor目录下的文件(新建命令)) 一、新建命令文件 php think make:command CustomWorker二、修改 复制vendor\topthink\think-worker\src\command\Server.php 内容到app\command\CustomWorker.php 修改继承类&#xff1a;class CustomWorker exten…

Python----数据可视化(Pyecharts三:绘图二:涟漪散点图,K线图,漏斗图,雷达图,词云图,地图,柱状图折线图组合,时间线轮廓图)

1、涟漪特效散点图 from pyecharts.globals import SymbolType from pyecharts.charts import EffectScatter from pyecharts.faker import Faker from pyecharts import options as opts from pyecharts.globals import ThemeType # 绘制图表 es (EffectScatter(init_optsop…

Linux内核网络层分析

网络访问层仍受到传输介质的性质以及相关适配器的设备驱动程序的影响很大。网络层与网络适配器的硬件性质几乎完全分离。为什么说几乎&#xff1f;因为该层不仅负责发送和接收数据&#xff0c;还负责在彼此不直接连接的系统之间转发和路由分组。查找最佳路由并选择适当的网络设…

OpenHarmony子系统开发 - Rust编译构建指导

OpenHarmony子系统开发 - Rust编译构建指导 一、Rust模块配置规则和指导 概述 Rust是一门静态强类型语言&#xff0c;具有更安全的内存管理、更好的运行性能、原生支持多线程开发等优势。Rust官方也使用Cargo工具来专门为Rust代码创建工程和构建编译。 OpenHarmony为了集成C…

分享一个免费的CKA认证学习资料

关于CKA考试 CKA&#xff08;Certified Kubernetes Administrator&#xff09;是CNCF基金会&#xff08;Cloud Native Computing Foundation&#xff09;官方推出的Kubernetes管理员认证计划&#xff0c;用于证明持有人有履行Kubernetes管理的知识&#xff0c;技能等相关的能力…

MySQL的一些八股文

1.什么是BufferPool&#xff1f; Buffer Pool基本概念 Buffer Pool&#xff1a;缓冲池&#xff0c;简称BP。其作用是用来缓存表数据与索引数据&#xff0c;减少磁盘IO操作&#xff0c;提升效率。 Buffer Pool由缓存数据页(Page) 和 对缓存数据页进行描述的控制块 组成, 控制…

卷积神经网络(笔记02)

一、简述在卷积神经网络中池化层的作用&#xff0c;并解释其为何能帮助提高模型性能 。 池化层的作用 1. 降低数据维度 池化操作通过对输入特征图进行下采样&#xff0c;减少特征图的空间尺寸。常见的池化方式有最大池化&#xff08;Max Pooling&#xff09;和平均池化&…