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

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

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

防抖

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

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

javascript 复制代码
// 防抖
function debounce(fn, delay) {
  let timer
  return 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,更好的了解他

javascript 复制代码
const person = {
  name: 'Alice'
};

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

// 使用 apply 调用 greet 函数,并将 this 设置为 person 对象
greet.apply(person, ['Hello', '!']); // 输出: Hello, Alice!

节流

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

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

深拷贝

javascript 复制代码
//   深拷贝
function deepClone(obj, cache = new WeakMap()) {
    if (typeof obj !== 'object') return obj
    if (obj === null) return obj
    if (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, 我以前是没用过,不知道大家见过么

javascript 复制代码
// 创建一个 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改变

javascript 复制代码
// 示例数组
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对象的用法

javascript 复制代码
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个数并放到一个数组中,升序排列

javascript 复制代码
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博客

相关推荐
m0_748247801 分钟前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
qq_433554548 分钟前
C++ 面向对象编程:+号运算符重载,左移运算符重载
开发语言·c++
数据小爬虫@27 分钟前
如何高效利用Python爬虫按关键字搜索苏宁商品
开发语言·爬虫·python
ZJ_.28 分钟前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
Narutolxy34 分钟前
深入探讨 Go 中的高级表单验证与翻译:Gin 与 Validator 的实践之道20241223
开发语言·golang·gin
Hello.Reader41 分钟前
全面解析 Golang Gin 框架
开发语言·golang·gin
禁默1 小时前
深入浅出:AWT的基本组件及其应用
java·开发语言·界面编程
Code哈哈笑1 小时前
【Java 学习】深度剖析Java多态:从向上转型到向下转型,解锁动态绑定的奥秘,让代码更优雅灵活
java·开发语言·学习
joan_851 小时前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
程序猿进阶1 小时前
深入解析 Spring WebFlux:原理与应用
java·开发语言·后端·spring·面试·架构·springboot