大水文之------端午练练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博客