【博学谷学习记录】超强总结，用心分享|前端开发学习日记-22

总结：

• 防抖和节流是前端开发中常用的性能优化技术，用于控制函数执行的频率。
• 边框1px像素问题在移动端开发中常见，可通过伪元素和CSS变换解决。
• 属性遍历是JavaScript中操作对象属性的基础技能，需注意原型链上的属性。

防抖和节流实现的原理（闭包）：

• 防抖（debounce）：

  原理：在事件被触发后，延迟执行函数，如果在延迟时间内再次触发事件，则重新计时。

  闭包应用：使用闭包保存定时器变量timer，确保每次调用debounce函数时都能访问到同一个timer。

  代码示例：

  function debounce(fn, wait) { let timer = null; return function(...args) { if (timer) clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), wait); };}

• 节流（throttle）：

  原理：在事件持续触发的过程中，确保函数在一定时间间隔内只执行一次。

  闭包应用：同样使用闭包保存定时器变量timer，通过判断timer是否存在来控制函数执行频率。

  代码示例：

  function throttle(fn, wait) { let timer = null; return function(...args) { if (!timer) { timer = setTimeout(() => { fn.apply(this, args); timer = null; }, wait); } };}

解决边框1px像素问题：

• 问题描述：在移动端开发中，由于屏幕像素密度（DPR）的影响，直接设置border: 1px solid #000;可能会导致边框看起来过粗。
• 解决方案：

  使用伪元素（:after或:before）创建边框。

  通过transform: scaleY(0.5)对边框进行缩放，使其看起来更细。

  代码示例：

  .box { position: relative; width: 100px; height: 100px; border: none; background-color: pink;}.box:after { content: ''; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; transform: scaleY(0.5); transform-origin: 0 0;}

属性遍历：

• 问题描述：需要遍历对象的所有可枚举属性（包括自身属性和原型链上的属性，但通常只关心自身属性）。
• 解决方案：

  使用Object.keys()获取对象自身可枚举属性组成的数组。

  结合hasOwnProperty()方法判断属性是否为对象自身属性。

  代码示例：

  function iterate(obj) { let arr = []; Object.keys(obj).forEach(key => { if (obj.hasOwnProperty(key)) { arr.push(`${key}: ${obj[key]}`); } }); return arr;}var C = function() { this.foo = 'bar'; this.baz = 'bim';};C.prototype.bop = 'bip';console.log(iterate(new C())); // 输出: ["foo: bar", "baz: bim"]

  注意：Object.keys()不会获取原型链上的属性，因此在这个例子中，bop属性不会被遍历到。如果需要遍历包括原型链上的所有可枚举属性，可以使用for...in循环。