随着 JavaScript 在现代网络开发中变得越来越无处不在，对于高级工程师来说，对语言及其先进技术有深刻的了解至关重要。JavaScript 是一种动态、灵活的语言，可允许从面向对象到功能编程的各种编程范例，从面向对象到功能编程。以至于，跟上最新技术和最佳实践是具有相当大的挑战。

1.缓存（memo）

缓存函数调用结果以提高性能的一种技术。通过将复杂的函数调用结果存储在缓存中，然后再次调用相同参数的函数时返回缓存结果。例如：

function expensiveFunction(arg) {
  console.log('Caculating resulting ...');
  return arg * 2;
}

function memorize(fn) {
  const cache = new Map();
  return function (arg) {
    // 相同的参数
    if (cache.has(arg)) {
      console.log('Returning cached result ...');
      return cache.get(arg);
    }

    const result = fn(arg);
    cache.set(arg, result);
    return result;
  };
}

const memorizedExpensiveFunction = memorize(expensiveFunction);

console.log(memorizedExpensiveFunction(2)); // 输出：Caculating resulting ... 4
console.log(memorizedExpensiveFunction(2)); // 输出：Returning cached result  ... 4

function expensiveFunction(arg) {
  console.log('Caculating resulting ...');
  return arg * 2;
}

function memorize(fn) {
  const cache = new Map();
  return function (arg) {
    // 相同的参数
    if (cache.has(arg)) {
      console.log('Returning cached result ...');
      return cache.get(arg);
    }

    const result = fn(arg);
    cache.set(arg, result);
    return result;
  };
}

const memorizedExpensiveFunction = memorize(expensiveFunction);

console.log(memorizedExpensiveFunction(2)); // 输出：Caculating resulting ... 4
console.log(memorizedExpensiveFunction(2)); // 输出：Returning cached result  ... 4

2.柯里化（currying）

柯里化是一种通过部分应用函数及其参数来创建新函数的技术。它通过返回一次需要一个参数的新函数来起作用，直到提供了所有参数并调用原始功能。例如：

function add(a, b, c) {
  return a + b + c;
}

function curry(fn) {
  return function curried(...args) {
    // fn.length 即 fn 的参数个数
    if (args.length >= fn.length) {
      return fn(...args);
    } else {
      return function (...moreArgs) {
        return curried(...args, ...moreArgs);
      };
    }
  };
}

const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 输出：6

function add(a, b, c) {
  return a + b + c;
}

function curry(fn) {
  return function curried(...args) {
    // fn.length 即 fn 的参数个数
    if (args.length >= fn.length) {
      return fn(...args);
    } else {
      return function (...moreArgs) {
        return curried(...args, ...moreArgs);
      };
    }
  };
}

const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 输出：6

简单创建一个有三个参数的 add 函数，并返回参数之和。柯里化函数 curry 返回一个匿名函数，缓存了参数不足的函数，并在参数满足 add 函数时，调用 add 函数并返回计算结果。

3.缓存柯里化（memoized currying）

结合缓存、柯里化技术，在函数参数有多个且函数计算复杂的场景使用。

function expensiveFunction(arg1, arg2, arg3) {
  console.log('Caculating resulting ...');
  return arg1 + arg2 + arg3;
}

function memorize(fn) {
  const cache = new Map();
  return function memoried(...args) {
    const key = args.join('-'); // 参数转为数组 arg1- 或 arg1-arg2 或 arg1-arg2-arg3
    if (cache.get(key)) {
      console.log('Returning cached result...');
      return cache.get(key);
    } else {
      const result = fn(...args);
      cache.set(key, result);

      return result;
    }
  };
}

function curry(fn) {
  return function memoried(...args) {
    if (args.length >= fn.length) {
      return fn(...args);
    } else {
      return function (...moreArgs) {
        return memoried(...args, ...moreArgs);
      };
    }
  };
}

const memoriedCurriedFunction = memorize(curry(expensiveFunction));

console.log(memoriedCurriedFunction(1)(2)(3)); // 输出：Caculating resulting ... 6
console.log(memoriedCurriedFunction(1)(2)(3)); // 输出：Returning cached result  ... 6

function expensiveFunction(arg1, arg2, arg3) {
  console.log('Caculating resulting ...');
  return arg1 + arg2 + arg3;
}

function memorize(fn) {
  const cache = new Map();
  return function memoried(...args) {
    const key = args.join('-'); // 参数转为数组 arg1- 或 arg1-arg2 或 arg1-arg2-arg3
    if (cache.get(key)) {
      console.log('Returning cached result...');
      return cache.get(key);
    } else {
      const result = fn(...args);
      cache.set(key, result);

      return result;
    }
  };
}

function curry(fn) {
  return function memoried(...args) {
    if (args.length >= fn.length) {
      return fn(...args);
    } else {
      return function (...moreArgs) {
        return memoried(...args, ...moreArgs);
      };
    }
  };
}

const memoriedCurriedFunction = memorize(curry(expensiveFunction));

console.log(memoriedCurriedFunction(1)(2)(3)); // 输出：Caculating resulting ... 6
console.log(memoriedCurriedFunction(1)(2)(3)); // 输出：Returning cached result  ... 6

4.函数组合（composition）

函数组合是一种将多个功能组合到单个函数中以创建更复杂行为的技术。它通过获取一个函数的输出并将其作为输入传递到另一个函数，依此类推。

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

function compose(...fns) {
  return function composed(arg) {
    return fns.reduceRight((prevResult, fn) => {
      return fn(prevResult);
    }, arg);
  };
}

const addThenMultiply = compose(multiply.bind(null, 2), add.bind(null, 1));
console.log(addThenMultiply(3)); // Output: 8

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

function compose(...fns) {
  return function composed(arg) {
    return fns.reduceRight((prevResult, fn) => {
      return fn(prevResult);
    }, arg);
  };
}

const addThenMultiply = compose(multiply.bind(null, 2), add.bind(null, 1));
console.log(addThenMultiply(3)); // Output: 8

5.节流 throttling、防抖 debouncing

节流和防抖是限制可以调用函数的频率，提高性能并减少不必要工作的技术。节流 可以通过在呼叫之间设置最小时间间隔来调用函数的速率； 防抖 通过延迟执行来调用函数的速率，直到自上次调用以来已经通过一定时间。

function expensiveFunction() {
  console.log('Calculating result...');
}

function throttle(fn, delay) {
  let lastTime = 0;

  return function throttled(...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      // 调用间隔 delay
      fn(...args);
      lastTime = now;
    }
  };
}

function debounce(fn, delay) {
  let timerId = null;
  return function debounced(...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      fn(...args);
    }, delay);
  };
}

const throttledExpensiveFunction = throttle(expensiveFunction, 1000);
const debouncedExpensiveFunction = debounce(expensiveFunction, 1000);

throttledExpensiveFunction(); // Output: Calculating result...
throttledExpensiveFunction(); // no output
throttledExpensiveFunction(); // no output
setTimeout(throttledExpensiveFunction, 2000); // Output: Calculating result...

debouncedExpensiveFunction(); // no output
setTimeout(debouncedExpensiveFunction, 500); // no output
setTimeout(debouncedExpensiveFunction, 1500); // no output
setTimeout(debouncedExpensiveFunction, 2500); // Output: Calculating result...

function expensiveFunction() {
  console.log('Calculating result...');
}

function throttle(fn, delay) {
  let lastTime = 0;

  return function throttled(...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      // 调用间隔 delay
      fn(...args);
      lastTime = now;
    }
  };
}

function debounce(fn, delay) {
  let timerId = null;
  return function debounced(...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      fn(...args);
    }, delay);
  };
}

const throttledExpensiveFunction = throttle(expensiveFunction, 1000);
const debouncedExpensiveFunction = debounce(expensiveFunction, 1000);

throttledExpensiveFunction(); // Output: Calculating result...
throttledExpensiveFunction(); // no output
throttledExpensiveFunction(); // no output
setTimeout(throttledExpensiveFunction, 2000); // Output: Calculating result...

debouncedExpensiveFunction(); // no output
setTimeout(debouncedExpensiveFunction, 500); // no output
setTimeout(debouncedExpensiveFunction, 1500); // no output
setTimeout(debouncedExpensiveFunction, 2500); // Output: Calculating result...

6.代理 Proxy

代理对象是 JavaScript 中的特殊对象，可让您拦截和自定义对象行为。您可以使用代理创建与普通对象不同的对象，也可以在现有对象中添加自定义行为。例如：

const target = {
  foo: 'bar',
  baz: 'qux'
};

const handler = {
  get(target, prop, receiver) {
    console.log(`Getting ${prop}...`);
    return target[prop];
  },
  set(target, prop, value, receiver) {
    console.log(`Setting ${prop} to ${value}...`);
    target[prop] = value;
    return true;
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.foo); // Output: Getting foo... bar
proxy.bar = 'quux'; // Output: Setting bar to quux...
console.log(target); // Output: { foo: 'bar', baz: 'qux', bar: 'quux' }

const target = {
  foo: 'bar',
  baz: 'qux'
};

const handler = {
  get(target, prop, receiver) {
    console.log(`Getting ${prop}...`);
    return target[prop];
  },
  set(target, prop, value, receiver) {
    console.log(`Setting ${prop} to ${value}...`);
    target[prop] = value;
    return true;
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.foo); // Output: Getting foo... bar
proxy.bar = 'quux'; // Output: Setting bar to quux...
console.log(target); // Output: { foo: 'bar', baz: 'qux', bar: 'quux' }

7.反射 Reflect

反射 API 是一组用于对对象进行元编程操作的方法，例如定义属性和调用方法。反射 API 的方法被设计为比对象类的等效方法更灵活和一致。

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

const person = new Person('John');

console.log(Reflect.has(person, 'name')); // Output: true
console.log(Reflect.get(person, 'name')); // Output: John
Reflect.set(person, 'name', 'Jane');
console.log(Reflect.get(person, 'name')); // Output: Jane
Reflect.defineProperty(person, 'age', { value: 25 });
console.log(person.age); // Output: 25

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

const person = new Person('John');

console.log(Reflect.has(person, 'name')); // Output: true
console.log(Reflect.get(person, 'name')); // Output: John
Reflect.set(person, 'name', 'Jane');
console.log(Reflect.get(person, 'name')); // Output: Jane
Reflect.defineProperty(person, 'age', { value: 25 });
console.log(person.age); // Output: 25

参考

参考链接: https://medium.com/@asimzaidi/7-javascript-tricks-for-senior-engineers-eff159f0e9b1

7个 JavaScript 技巧