大水文之------端午练练JS好了

最近有点不太知道要干啥了,昨天看了集cocos的介绍,下载了个DashBoard,看了看里面的内容,确实有点小震惊,还有些免费的源码可以学习,挺好的。

昨天学习ts,感觉自己的js水平好像不太行,今天看看js题提升下好了。

防抖

含义:也就是王者的回城,一直点是回不去的,点了等会儿就回去了,就是你在一定时间内猛点,他都不管你,你点了100次,会等你点完当做一次来执行。

代码:定义了个防抖函数,可以通过传输需要防抖的函数和防抖时间调用,并且用了闭包访问同一个timer。到这边可以思考一下,这边为什么要使用apply,我直接使用fn()好像也行。我试了下。这里是为了保证传参不丢失,但这边用的例子是不带参的。

// 防抖
function debounce(fn, delay) {let timerreturn function (...args) {if (timer) {clearTimeout(timer)}timer = setTimeout(() => {fn.apply(this, args)}, delay)}
}
function task() {console.log('start')
}
const debounceTask = debounce(task, 1000)
window.addEventListener('scroll', debounceTask)

这边可以了解下apply,更好的了解他

const person = {name: 'Alice'
};function greet(greeting, punctuation) {console.log(greeting + ', ' + this.name + punctuation);
}// 使用 apply 调用 greet 函数,并将 this 设置为 person 对象
greet.apply(person, ['Hello', '!']); // 输出: Hello, Alice!

节流

function throttle(fn, delay) {let last = 0 // 上次触发时间return (...args) => {const now = Date.now()if (now - last > delay) {last = nowfn.apply(this, args)}}
}// 测试
function task() {console.log('run task')
}
const throttleTask = throttle(task, 1000)
window.addEventListener('scroll', throttleTask)

跟防抖基本一样,没啥好说的

深拷贝

//   深拷贝
function deepClone(obj, cache = new WeakMap()) {if (typeof obj !== 'object') return objif (obj === null) return objif (cache.get(obj)) return cache.get(obj) // 防止循环引用,程序进入死循环if (obj instanceof Date) return new Date(obj)if (obj instanceof RegExp) return new RegExp(obj)// 找到所属原型上的constructor,所属原型上的constructor指向当前对象的构造函数let cloneObj = new obj.constructor()cache.set(obj, cloneObj) // 缓存拷贝的对象,用于处理循环引用的情况for (let key in obj) {if (obj.hasOwnProperty(key)) {cloneObj[key] = deepClone(obj[key], cache) // 递归拷贝}}return cloneObj}// 测试const obj = { name: 'Jack', address: { x: 100, y: 200 } }obj.a = obj // 循环引用const newObj = deepClone(obj)console.log(newObj.address === obj.address) // false

这边可以看到定义了一个weakMap, 我以前是没用过,不知道大家见过么

// 创建一个 WeakMap
let metadata = new WeakMap();// 定义对象
let obj1 = {};
let obj2 = {};
let obj3 = {};// 向这些对象添加元数据
metadata.set(obj1, { info: 'Metadata for obj1' });
metadata.set(obj2, { info: 'Metadata for obj2' });
metadata.set(obj3, { info: 'Metadata for obj3' });// 在不改变对象本身的情况下,可以获取对象的元数据
console.log(metadata.get(obj1)); // { info: 'Metadata for obj1' }
console.log(metadata.get(obj2)); // { info: 'Metadata for obj2' }
console.log(metadata.get(obj3)); // { info: 'Metadata for obj3' }// 当对象不再被引用时,其元数据也会被自动回收
obj1 = null;
console.log(metadata.get(obj1)); // undefined

在这个例子中,metadata 是一个 WeakMap,用于存储对象的元数据。每个对象都可以有自己独立的元数据,而不会修改对象本身的结构。当对象不再被引用时,其对应的元数据也会被自动回收,从而防止内存泄漏。

weakMap的key名只能为对象,无法遍历。key顺序不确定。这是weakmap的缺点

map和foreach的区别

明明经常用。看到这个题目的时候突然也说不上来了,gg。map不改变原数组,foreach改变

// 示例数组
const array = [1, 2, 3, 4, 5];// 使用 map
const mappedArray = array.map(x => x * 2);
console.log(mappedArray); // [2, 4, 6, 8, 10]
console.log(array); // [1, 2, 3, 4, 5]  原数组未改变// 使用 forEach
array.forEach((value, index, arr) => {arr[index] = value * 2;
});
console.log(array); // [2, 4, 6, 8, 10]  原数组被改变

用set求数组的并集和交集。

这个确实完全不了解,set对象的用法

const array1 = [1, 2, 3, 4];
const array2 = [3, 4, 5, 6];// 创建两个 Set 对象
const set1 = new Set(array1);
const set2 = new Set(array2);// 求并集
const unionSet = new Set([...set1, ...set2]);// 求交集
const intersectionSet = new Set([...set1].filter(x => set2.has(x)));// 将 Set 转换为数组
const unionArray = [...unionSet];
const intersectionArray = [...intersectionSet];console.log("并集:", unionArray); // 输出并集
console.log("交集:", intersectionArray); // 输出交集

一个选择框,因数据过多造成卡死,除了懒加载有什么优化方法

1.虚拟滚动、

2.分页加载

3.搜索功能。。。

感觉本质其实也就是懒加载,

computed和watch的区别

一个计算属性一个监视器,comupted只会计算一次,在依赖变化的时候重新计算缓存结果,watch在监听数据变化时触发回调,不局限于计算属性

rpx px em rem的区别

px就是像素点,因该是最常用的

rpx是自适应,常用微信小程序,1rpx大概等于屏幕宽度的1/750

em是相对长度单位,相对父亲的。比如父亲为20px,我是1.5em,那我就是30px

rem是相对于根元素的。即html。比如html为16px,1.5rem就是24px

写一个函数,能随机选出10-100的10个数并放到一个数组中,升序排列

function getRandomNumbers() {const numbers = [];// 生成10个10到100之间的随机数并存入数组for (let i = 0; i < 10; i++) {const randomNumber = Math.floor(Math.random() * 91) + 10; // 生成10到100之间的随机数numbers.push(randomNumber);}// 对数组进行升序排列numbers.sort((a, b) => a - b);return numbers;
}// 调用函数并输出结果
console.log(getRandomNumbers());

参考博文:2024前端面试12个手写题,你确定会?_前端手写面试题-CSDN博客

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

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

相关文章

Functional ALV系列 (10) - 将填充FieldCatalog封装成函数

在前面的博文中&#xff0c;已经讲了封装的思路和实现&#xff0c;主要是利用 cl_salv_data_descr>read_structdescr () 方法来实现。在这里&#xff0c;贴出代码方便大家参考。 编写获取内表组件的通用方法 form frm_get_fields using pt_data type any tablechanging…

排序---基数排序

前言 个人小记 一、简介 基数排序是一种非比较排序&#xff0c;所以排序速度较快&#xff0c;当为32位int整数排序时&#xff0c;可以将数分为个位十位分别为2^16,使得拷贝只需要两轮&#xff0c;从而达到2*n&#xff0c;然后给一个偏移量&#xff0c;使得可以对负数排序。以…

C++期末复习提纲(血小板)

目录 1.this指针 2.静态成员变量 3.面向对象程序设计第一阶段 4.面向对象程序设计第二阶段 5.面向对象程序设计第三阶段 6.简答题 &#xff08;1&#xff09;拷贝构造函数执行的三种情况&#xff1a; &#xff08;2&#xff09;虚析构函数的作用&#xff1a; &#xff…

55.ReentrantReadWriteLock应用于缓存

简单的缓存案例 模拟一个数据层dao @Slf4j public class GenericDao {public <T> T queryOne(Class<T> beanClass, String sql, Object... args) {try {log.debug("进入数据库查询.....");Constructor<T> constructor = beanClass.getDeclaredCo…

如何看待华为去google化自己做鸿蒙系统,对开发人员有什么影响

华为去Google化并自主研发鸿蒙系统是一个重要的战略决策&#xff0c;这一决策对开发人员产生了深远的影响。以下是对这一决策及其对开发人员影响的详细分析&#xff1a; 一、华为去Google化自主研发鸿蒙系统的背景 在美国的技术封锁和限制下&#xff0c;华为面临着使用Androi…

Python基础——字符串

一、Python的字符串简介 Python中的字符串是一种计算机程序中常用的数据类型【可将字符串看作是一个由字母、数字、符号组成的序列容器】&#xff0c;字符串可以用来表示文本数据。 通常使用一对英文的单引号&#xff08;&#xff09;或者双引号&#xff08;"&#xff09;…

html接口响应断言

接口响应值除类json格式&#xff0c;还有html格式 断言步骤 第一步&#xff1a;替换空格replace 原本返回的格式和网页内容一致&#xff0c;每行前面有很多空格&#xff0c;需要去除这些空格 第二步&#xff1a;分割split 因为行与行之前有回车符&#xff0c;所以把回车符替…

Spring之SpringMVC源码

SpringMVC源码 一、SpringMVC的基本结构 1.MVC简介 以前的纯Servlet的处理方式&#xff1a; Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String type req.getParameter(Constant.REQUEST_PA…

【Java面试】十六、并发篇:线程基础

文章目录 1、进程和线程的区别2、并行和并发的区别3、创建线程的四种方式3.1 Runnable和Callable创建线程的区别3.2 线程的run和start 4、线程的所有状态与生命周期5、新建T1、T2、T3&#xff0c;如何保证线程的执行顺序6、notify和notifyAll方法有什么区别7、wait方法和sleep方…

QT-轻量级的笔记软件MyNote

MyNote v2.0 一个轻量级的笔记软件&#x1f4d4; Github项目地址: https://github.com/chandlerye/MyNote/tree/main 应用简介 MyNote v2.0 是一款个人笔记管理软件&#xff0c;没有复杂的功能&#xff0c;旨在提供便捷的笔记记录、管理以及云同步功能。基于Qt 6.6.3 个人开…

MATLAB入门知识

目录 原教程链接&#xff1a;数学建模清风老师《MATLAB教程新手入门篇》https://www.bilibili.com/video/BV1dN4y1Q7Kt/ 前言 历史记录 脚本文件&#xff08;.m&#xff09; Matlab帮助系统 注释 ans pi inf无穷大 -inf负无穷大 i j虚数单位 eps浮点相对精度 0/&a…

Edge浏览器视频画中画可拉动进度条插件Separate Window

平时看一些视频的时候&#xff0c;一般需要编辑一些其他的东西&#xff0c;于是开启画中画&#xff0c;但是画中画没有进度条&#xff0c;需要大幅度的倒退前进得回到原视频&#xff0c;很麻烦。这里推荐插件Separate Window&#xff0c;可实现画中画进度条拉动和播放sudu的调节…

Transparent 且 Post-quantum zkSNARKs

1. 引言 前序博客有&#xff1a; SNARK原理示例SNARK性能及安全——Prover篇SNARK性能及安全——Verifier篇 上图摘自STARKs and STARK VM: Proofs of Computational Integrity。 上图选自&#xff1a;Dan Boneh 斯坦福大学 CS251 Fall 2023 Building a SNARK 课件。 SNARK…

工业通讯现场中关于EtherCAT转TCPIP网关的现场应用

在当今工业自动化的浪潮中&#xff0c;EtherCAT技术以其高效、实时的特性成为了众多制造业的首选。然而&#xff0c;随着工业互联网的发展&#xff0c;对于数据的远程访问和云平台集成的需求日益增长&#xff0c;这就需要将EtherCAT协议转化为更为通用的TCP/IP协议。于是开疆智…

Verilog实现的数字钟

在Verilog中实现一个数字钟通常会涉及到几个部分&#xff1a;时钟源&#xff08;通常是一个外部晶振或PLL&#xff09;、计数器、以及显示逻辑&#xff08;可能是七段数码管或LCD显示&#xff09;。这里&#xff0c;我将给出一个简化的Verilog代码示例&#xff0c;用于演示一个…

kafka-消费者-消费异常处理(SpringBoot整合Kafka)

文章目录 1、消费异常处理1.1、application.yml配置1.2、注册异常处理器1.3、消费者使用异常处理器1.4、创建生产者发送消息1.5、创建SpringBoot启动类1.6、屏蔽 kafka debug 日志 logback.xml1.7、引入spring-kafka依赖1.8、消费者控制台&#xff1a;1.8.1、第一次启动SpringK…

日进2000,我怎么做到的

昨天遇到一个有意思的项目&#xff0c;让我一天进账2000&#xff0c;一个字&#xff1a;爽。 这几天接洽了一位新客户&#xff0c;主要诉求就是优化系统&#xff0c;基于LNMP的系统优化。正好这个领域我比较熟悉&#xff0c;以前都是在公司做项目&#xff0c;也不怎么涉猎系统优…

Vue2计算属性(computed)和侦听器(watch)

文章目录 1.计算属性1.1 什么是计算属性1.2 计算属性怎么用&#xff1f;1.3 计算属性的作用 2.侦听器(watch)3.computed和watch选择4.什么时候用箭头函数什么时候用普通函数 1.计算属性 1.1 什么是计算属性 &#xff08;1&#xff09;Vue的原有属性&#xff1a;data对象当中的…

HCIP-Datacom-ARST自选题库_10_其他判断【23道题】

1.端到端时延等于路径上所有处理时延与队列时延之和。 2.部署PPP Multilink之后&#xff0c;数据将根据源地址和目的地址均匀的分配在各条成员链路上。 3.流镜像分为本地流镜像和远程流镜像两种方式。√ 4.IP报文中用Tos字段进行Q0S标记&#xff0c;Tos字段中是使用前6bit来…

知识图谱的应用---智能电网

文章目录 智能电网典型应用 智能电网 智能电网以物理电网为基础&#xff0c;将现代先进的传感测量技术、通讯技术、信息技术、计算机技术和控制技术与物理电网高度集成而形成的新型电网。它以充分满足用户对电力的需求和优化资源配置、确保电力供应的安全性、可靠性和经济性、满…