中级前端工程师必须要掌握的27个JavaScript 技巧

和许多其他语言一样,JavaScript 也需要靠很多小技巧去完成各种不同的事情。有的可能早已经广为人知,有的却可能会让你感到有些迷惑。接下来先介绍27个马上就能用起来的 JavaScript技巧,下面和小编一起来看看吧!

1.判断数据类型

中级前端工程师必须要掌握的27个JavaScript 技巧

使用 Object.prototype.toString 配合闭包,在保证判断数据类型的准确性时,同时能让这个函数非常灵活,通过传入不同的判断类型来返回不同的判断函数(注意传入 type 参数时首字母大写)。

2. ES5 实现数组 map 方法

中级前端工程师必须要掌握的27个JavaScript 技巧

值得一提的是,map 的第二个参数为第一个参数回调中的 this 指向,如果第一个参数为箭头函数,那设置第二个 this 会因为箭头函数的词法绑定而失效。

3. 使用 reduce 实现数组 map 方法

中级前端工程师必须要掌握的27个JavaScript 技巧

4. ES5 实现数组 filter 方法

中级前端工程师必须要掌握的27个JavaScript 技巧

5. 使用 reduce 实现数组 filter 方法

中级前端工程师必须要掌握的27个JavaScript 技巧

6. ES5 实现数组的 some 方法

中级前端工程师必须要掌握的27个JavaScript 技巧

执行 some 方法的数组如果是一个空数组,最终始终会返回 false,而另一个数组的 every 方法中的数组如果是一个空数组,会始终返回 true。

7. ES5 实现数组的 reduce 方法

中级前端工程师必须要掌握的27个JavaScript 技巧

8. 使用 reduce 实现数组的 flat 方法

中级前端工程师必须要掌握的27个JavaScript 技巧

因为 selfFlat 是依赖 this 指向的,所以在 reduce 遍历时需要指定 selfFlat 的 this 指向,否则会默认指向 window 从而发生错误。

原理通过 reduce 遍历数组,遇到数组的某个元素仍是数组时,通过 ES6 的扩展运算符对其进行降维(ES5 可以使用 concat 方法),而这个数组元素可能内部还嵌套数组,所以需要递归调用 selfFlat。

同时原生的 flat 方法支持一个 depth 参数表示降维的深度,默认为 1 即给数组降一层维度。

中级前端工程师必须要掌握的27个JavaScript 技巧

传入 Inifity 会将传入的数组变成一个一维数组。

中级前端工程师必须要掌握的27个JavaScript 技巧

原理是每递归一次将 depth 参数减 1,如果 depth 参数为 0 时,直接返回原数组。

9.实现 ES6 的 class 语法

中级前端工程师必须要掌握的27个JavaScript 技巧

ES6 的 class 内部是基于寄生组合式继承,它是目前最理想的继承方式,通过 Object.create 方法创造一个空对象,并将这个空对象继承 Object.create 方法的参数,再让子类(subType)的原型对象等于这个空对象,就可以实现子类实例的原型等于这个空对象,而这个空对象的原型又等于父类原型对象(superType.prototype)的继承关系。

而 Object.create 支持第二个参数,即给生成的空对象定义属性和属性描述符/访问器描述符,我们可以给这个空对象定义一个 constructor 属性更加符合默认的继承行为,同时它是不可枚举的内部属性(enumerable:false)。

而 ES6 的 class 允许子类继承父类的静态方法和静态属性,而普通的寄生组合式继承只能做到实例与实例之间的继承,对于类与类之间的继承需要额外定义方法,这里使用 Object.setPrototypeOf 将 superType 设置为 subType 的原型,从而能够从父类中继承静态方法和静态属性。

10. 函数柯里化

中级前端工程师必须要掌握的27个JavaScript 技巧

使用方法:

中级前端工程师必须要掌握的27个JavaScript 技巧

柯里化是函数式编程的一个重要技巧,将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/c6c15d98738fcc2d42698e2a4df0b408.html