灏天阁

十个高阶Javascript知识及用法

· Yin灏

1. 高阶函数

高阶函数是指接受一个或多个函数作为参数，并/或者返回一个函数的函数。这种技巧可以用于将函数组合起来，实现函数的复用。

// 高阶函数示例：将一个数组中的所有元素相加
function add(...args) {
  return args.reduce((a, b) => a + b, 0);
}
function addArrayElements(arr, fn) {
  return fn(...arr);
}
const arr = [1, 2, 3, 4, 5];
const sum = addArrayElements(arr, add);
console.log(sum); // 15

2. 纯函数

纯函数是指没有副作用（不改变外部状态）并且输出仅由输入决定的函数。纯函数可以更容易地进行单元测试和调试，并且可以更好地支持函数式编程的概念。

// 纯函数示例：将一个数组中的所有元素转换为字符串
function arrToString(arr) {
  return arr.map(String);
}
const arr = [1, 2, 3, 4, 5];
const strArr = arrToString(arr);
console.log(strArr); // ["1", "2", "3", "4", "5"]

3. 闭包

闭包是指一个函数可以访问其定义范围之外的变量。这种技巧可以用于将变量“私有化”，从而避免全局变量的滥用。

// 闭包示例：使用闭包实现计数器
function makeCounter() {
  let count = 0;
  return function () {
    count++;
    console.log(count);
  };
}
const counter = makeCounter();
counter(); // 1
counter(); // 2
counter(); // 3

4. 柯里化

柯里化是指将一个接受多个参数的函数转换为一个接受一个参数的函数序列的技巧。这种技巧可以用于将函数变得更加通用化。

// 柯里化示例：将一个接受多个参数的函数转换为一个接受一个参数的函数序列
function add(a) {
  return function (b) {
    return a + b;
  };
}
const add5 = add(5);
console.log(add5(10)); // 15
console.log(add5(20)); // 25

5. 函数组合

函数组合是指将多个函数组合成一个函数的技巧。这种技巧可以用于将多个函数的输出传递给下一个函数，实现函数的复用。

// 函数组合示例：将多个函数组合成一个函数
function add(a, b) {
  return a + b;
}
function multiply(a, b) {
  return a * b;
}
function compose(...fns) {
  return function (x, y) {
    return fns.reduce((acc, fn) => fn(acc, y), x);
  };
}
const addAndMultiply = compose(add, multiply);
console.log(addAndMultiply(2, 3, 4)); // 20

6. 函数记忆化

函数记忆化是指使用缓存来保存函数的结果，从而避免重复计算。这种技巧可以用于提高函数的性能。

// 函数记忆化示例：使用缓存来保存函数的结果
function memoize(fn) {
  const cache = {};
  return function (...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = fn(...args);
    cache[key] = result;
    return result;
  };
}
function add(a, b) {
  console.log("Calculating sum...");
  return a + b;
}
const memoizedAdd = memoize(add);
console.log(memoizedAdd(2, 3)); // Calculating sum... 5
console.log(memoizedAdd(2, 3)); // 5 (from cache)

7. 类和继承

类和继承是指使用面向对象编程的概念来组织代码的技巧。这种技巧可以用于使代码更加模块化和可维护。

// 类和继承示例：使用类和继承实现动物类和猫类
class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  speak() {
    console.log("I am an animal.");
  }
}
class Cat extends Animal {
  constructor(name, age, color) {
    super(name, age);
    this.color = color;
  }
  speak() {
    console.log("Meow!");
  }
}
const cat = new Cat("Fluffy", 2, "black");

8. Generator

Generator 是一种特殊的函数，它可以暂停和恢复执行，并且可以用来生成迭代器。 示例代码：

function* generate() {
  yield 1;
  yield 2;
  yield 3;
}
const iterator = generate();
console.log(iterator.next()); // 输出 { value: 1, done: false }
console.log(iterator.next()); // 输出 { value: 2, done: false }
console.log(iterator.next()); // 输出 { value: 3, done: false }
console.log(iterator.next()); // 输出 { value: undefined, done: true }

9. Proxy

Proxy 是一种对象代理机制，它可以拦截对象的访问、赋值、删除等操作，并且可以用来实现数据校验、数据缓存等功能。 示例代码：

const user = {
  name: "John",
  age: 30,
};
const proxy = new Proxy(user, {
  get(target, key) {
    console.log(`Getting ${key} value.`);
    return target[key];
  },
  set(target, key, value) {
    console.log(`Setting ${key} value to ${value}.`);
    target[key] = value;
  },
});
console.log(proxy.name); // 输出 "Getting name value." 和 "John"
proxy.age = 40; // 输出 "Setting age value to 40."

10. Reflect

Reflect 是一种对象反射机制，它提供了一系列操作对象的方法，并且可以用来替代一些原来只能通过 Object 上的方法来实现的功能。 示例代码：

const user = {
  name: "John",
  age: 30,
};
console.log(Reflect.has(user, "name")); // 输出 true
console.log(Reflect.get(user, "name")); // 输出 "John"
console.log(Reflect.set(user, "age", 40)); // 输出 true
console.log(user.age); // 输出 40

- Book Lists -