JavaScript基础知识避坑指南:28个实用技巧让你代码跑得更快
最近我一直在学前端开发,发现JavaScript的基础知识特别重要。从判断数据类型到处理数组、函数,很多小技巧能解决大问题。今天整理了28个实战中常用的代码方法,都是在项目里踩过坑后总结的。
比如判断对象类型,用Object.prototype.toString比typeof可靠。它能区分基本类型和包装对象,不过有个注意事项,要是传入基本数据别用call绑定,否则会出错。还有array的map和filter方法,自己写循环实现其实不难,但要注意稀疏数组的问题,得用hasOwnProperty判断元素是否存在。
reduce这个函数特别神奇,既能代替map,也能代替filter,还能处理flat降维。但深度降维得递归调用,传Infinity参数才能把多维数组全打平。类继承也有讲究,ES6的class语法底层用Object.create创建原型链,子类的prototype要指向父类才能继承静态方法。
函数柯里化听起来复杂,其实就是把多参数函数拆成单参数函数链。加上占位符后更灵活,能随时替换参数位置。bind方法绑定this指针时,还要考虑new调用的情况,得调整返回函数的length属性。
斐波那契数列优化用记忆法,把中间结果存在对象里能省时间,但内存消耗大。动态规划更好,空间利用率高。实现call方法可以把函数挂到临时对象上执行,用Symbol当属性名防冲突。
防抖和节流在处理高频事件如scroll时很实用。防抖是最后一次动作触发,节流是按时间间隔执行。懒加载图片用IntersectionObserver更高效,不用自己写scroll监听了。
new关键字创建对象的过程挺多步的,先造空对象再绑定proto最后执行构造函数。私有变量得用闭包或WeakMap存,公开方法通过get访问才安全。洗牌算法要随机交换元素,chrome以前排序不乱真的问题现在解决了。
Promise的包装器promisify能把回调转成异步await,配合onerror捕获错误更方便。单例模式用Proxy拦截new操作,保证全局只有一个实例。发布订阅像发消息一样解耦组件,还能设置一次性事件。
这些都是工作中常遇到的问题,具体代码都在我的github上有注释。掌握这些技巧,写代码时遇到的bug会少很多。现在看这些可能有点抽象,等实际用了就明白了。