最近有点不太知道要干啥了,昨天看了集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());