常用的前端小知识_世间万物皆不如你

大大的周 02-07 5484

1.水平垂直居中

两种方式定位或者flex

//定位 div { width: 100px; height: 100px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } //flex 父级控制子集 .parent { display: flex; justify-content: center; align-items: center; } 2.css一行文本超出… overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 3. 多行文本超出显示 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 4. localStorage localStorage.name = 'yd'; // 获取 localStorage.name; // yd // 删除 delete localStorage.name; // 清除全部 localStorage.clear(); // 遍历 for (let i = 0; i < localStorage.length; i++) { const key = localStorage.key(i); // 获取本地存储的Key localStorage[key]; // 获取本地存储的value } 5.防抖 function debounce(fn, delay) { let timer return function (...args) { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { fn.apply(this, args) }, delay) } } // 测试 function task() { console.log('run task') } const debounceTask = debounce(task, 1000) window.addEventListener('scroll', debounceTask) 6. 节流 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) 7. 深拷贝 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 8.promise class MyPromise { constructor(executor) { // executor执行器 this.status = 'pending' // 等待状态 this.value = null // 成功或失败的参数 this.fulfilledCallbacks = [] // 成功的函数队列 this.rejectedCallbacks = [] // 失败的函数队列 const that = this function resolve(value) { // 成功的方法 if (that.status === 'pending') { that.status = 'resolved' that.value = value that.fulfilledCallbacks.forEach(myFn => myFn(that.value)) //执行回调方法 } } function reject(value) { //失败的方法 if (that.status === 'pending') { that.status = 'rejected' that.value = value that.rejectedCallbacks.forEach(myFn => myFn(that.value)) //执行回调方法 } } try { executor(resolve, reject) } catch (err) { reject(err) } } then(onFulfilled, onRejected) { if (this.status === 'pending') { // 等待状态，添加回调函数到成功的函数队列 this.fulfilledCallbacks.push(() => { onFulfilled(this.value) }) // 等待状态，添加回调函数到失败的函数队列 this.rejectedCallbacks.push(() => { onRejected(this.value) }) } if (this.status === 'resolved') { // 支持同步调用 console.log('this', this) onFulfilled(this.value) } if (this.status === 'rejected') { // 支持同步调用 onRejected(this.value) } } } // 测试 function fn() { return new MyPromise((resolve, reject) => { setTimeout(() => { if(Math.random() > 0.6) { resolve(1) } else { reject(2) } }, 1000) }) } fn().then( res => { console.log('res', res) // res 1 }, err => { console.log('err', err) // err 2 }) 9. sort排序 // 对数字进行排序，简写 const arr = [3, 2, 4, 1, 5] arr.sort((a, b) => a - b) console.log(arr) // [1, 2, 3, 4, 5] // 对字母进行排序，简写 const arr = ['b', 'c', 'a', 'e', 'd'] arr.sort() console.log(arr) // ['a', 'b', 'c', 'd', 'e'] 10.Set 去重 cosnt newArr = [...new Set(arr)]