让你成为优化开发者的5个javascript技巧

93 阅读3分钟

image.png

  • Currying
  • Reflect
  • 复合函数(Composition)
  • Coalescing
  • 闭包

Currying

currying是指对带有多个参数的函数求值,并将它们分解为带有单个参数的函数序列。因此,函数不是一次接受所有参数,而是接受第一个参数并返回一个新函数,新函数接受第二个参数并返回一个新函数,新函数接受第三个参数……以此类推,直到提供所有参数并执行最后一个函数。

currying可以帮助您将函数划分为较小的可重用函数,这些函数处理单一的责任。这使您的函数更纯粹,更不容易出错,更容易测试。

const transaction = (fee, balance, amount) => (balance + amount - fee)
// curry简单实现
const curry = (fn, ...args) => {
    return (..._arg) => fn(...args, ..._arg)
}
// 逻辑调用
const freeTransaction = curry(transaction, 10)

freeTransaction(100, 200) // 290

在上面的示例中,我们创建了自己的简单实现,用于套用恰好有三个参数的函数。作为一种通用的解决方案,我建议使用Ramda或类似的方法,它支持带有任意数量参数的curry函数,也支持使用占位符更改参数的顺序。

Reflect

Reflect是一个全局对象,它为元编程提供了一些有用的方法。Reflect不是一个函数,也不是可构造的。它唯一的工作是为反射提供静态方法。这些方法可以分为两类,内省方法是非破坏性的,而修改方法是破坏性的,因为它们会改变对象或其行为。

const person = {
    name: "LBJ",
    [Symbol('email')]: "LBJ@NBA.com"
}

Reflect.get(person, 'name')  // LBJ
Reflect.has(person, 'email') // = true
Reflect.has(person, 'phone') // = false
Reflect.getPrototypeOf(person)
Reflect.getOwnPropertyDescriptor(person, 'name')
Reflect.ownKeys(person) // [name, Symbol(email)]

Reflect.defineProperty(person, 'phone', { writable: true})
Reflect.has(person, 'phone')
Reflect.set(person, 'phone', '13234234')

Reflect.deleteProperty(person, 'phone')
Reflect.has(person, 'phone') // = true

关于更多Reflect的使用,可以点击这里;

复合函数

将一个函数的结果传递给下一个函数,再将下一个函数传递给下一个函数,以此类推……直到执行最后一个函数并计算出某些结果。函数组合可以由任意数量的函数组成

// Compose
const compose = (...fns) => x => fns.reduce((y, fn) => fn(y), x)

const addFee = amount => amount + 2
const addDiscount = amount => amount - 5

const composition = compose(addFee, addDiscount)(100)

Coalescing

null合并操作符??是一种逻辑运算符,当其左操作数为空或未定义时返回其右操作数,否则返回其左操作数。当您想使用假值作为默认值时,??合并操作符非常方便。

const value = 0 ?? 100  // = 0
const value = false ?? true  // = false

const value = null ?? 100  // = 100
const value = undefined ?? 100  // = 100

闭包

闭包是一个函数,它保留对外部函数的变量和参数(作用域)的访问,即使外部函数已经完成执行。闭包对于在JavaScript中隐藏实现细节非常有用。换句话说,像这样创建私有变量或函数会很有用

function counter () {
    let count = 0

    function increment() {
        return count += 1
    }
    return increment
}

const sum = counter();
sum() // = 1
sum() // = 2
sum() // = 3

最后,可以关注微信公众号“大前端攻城狮”学习更多关于编程的小技巧!!!