45 个提升 JavaScript 效率的超级技巧

夕阳_醉了

已于 2024-09-14 14:19:04 修改

阅读量1.3k

点赞数 7

文章标签：前端 javascript 开发语言

于 2024-09-14 10:50:15 首次发布

本文链接：https://blog.csdn.net/w807139809/article/details/142252784

版权

JavaScript 是一门用途广泛且功能强大的语言，是现代网页开发必不可少的工具。这篇文章将分享一些超级技巧，帮助你成为更高效、更有效的 JavaScript 开发者。每个技巧都包含详细的解释和示例。

1. 使用 `let` 和 `const` 代替 `var`

问题： var 拥有函数作用域，可能会导致 bug 和不可预测的行为。

解决方案： 使用 let 和 const，它们拥有块级作用域。

let count = 0;
const PI = 3.14;

使用 let 和 const 可以帮助防止作用域相关的 bug，确保变量仅在定义它们的块内可访问。

2. 默认参数

问题： 如果没有提供参数，函数可能会失败。

解决方案： 使用默认参数来设置备用值。

function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}
console.log(greet()); // "Hello, Guest!"

默认参数确保函数拥有合理的默认值，防止错误并使代码更健壮。

3. 模板字面量

问题： 字符串连接可能很繁琐且容易出错。

解决方案： 使用模板字面量来进行更简洁、更易读的字符串插值。

const name = 'John';
const greeting = `Hello, ${name}!`;
console.log(greeting); // "Hello, John!"

模板字面量使创建包含嵌入式表达式和多行字符串的字符串变得更加容易。

4. 解构赋值

问题： 从对象和数组中提取值可能很冗长。

解决方案： 使用解构赋值来更简洁地提取值。

const user = { name: 'Jane', age: 25 };
const { name, age } = user;
console.log(name, age); // "Jane" 25

解构赋值允许你轻松地将对象的属性和数组中的元素提取到不同的变量中。

5. 箭头函数

问题： 传统函数表达式可能很冗长，并且不会将 this 按词法绑定。

解决方案： 使用箭头函数来简化语法并进行词法绑定 this。

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

箭头函数为函数表达式提供了简洁的语法，并确保 this 被词法绑定。

6. 展开运算符

问题： 组合数组或对象可能很繁琐。

解决方案： 使用展开运算符来轻松组合数组和对象。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

展开运算符允许你将数组或对象的元素展开到另一个数组或对象中。

7. rest 参数

问题： 处理可变数量的函数参数可能很棘手。

解决方案： 使用 rest 参数将所有参数捕获到数组中。

function sum(...args) {
  return args.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

rest 参数允许你将不定数量的参数作为数组处理，使你的函数更加灵活。

8. 短路评估

问题： 编写条件语句可能很冗长。

解决方案： 使用短路评估来编写简洁的条件。

const isLoggedIn = true;
const user = isLoggedIn && { name: 'Jane', age: 25 };
console.log(user); // { name: 'Jane', age: 25 }

短路评估使用逻辑 && 和 || 运算符来简化条件表达式。

9. 可选链

问题： 访问深层嵌套的属性可能会导致错误，如果链中的任何部分为 null 或 undefined。

解决方案： 使用可选链来安全地访问嵌套属性。

const user = { profile: { name: 'Jane' } };
const userName = user?.profile?.name;
console.log(userName); // "Jane"

可选链允许你安全地访问嵌套属性，而无需显式检查链的每一级是否为 null 或 undefined。

10. 空值合并运算符

问题： 使用 || 来提供默认值可能会在值为 0 或 "" 时产生意外结果。

解决方案： 使用空值合并运算符 ?? 仅在值为 null 或 undefined 时提供默认值。

const user = { name: '', age: 0 };
const userName = user.name ?? 'Anonymous';
const userAge = user.age ?? 18;
console.log(userName); // ""
console.log(userAge); // 0

空值合并运算符允许你仅在左侧表达式为 null 或 undefined 时提供默认值。

11. 对象属性简写

问题： 将变量赋值给对象的属性可能很重复。

解决方案： 使用属性简写来简化对象创建。

const name = 'Jane';
const age = 25;
const user = { name, age };
console.log(user); // { name: 'Jane', age: 25 }

属性简写允许你在属性名与变量名相匹配时省略属性名，使代码更简洁。

12. 动态属性名

问题： 创建具有动态属性名的对象可能很冗长。

解决方案： 使用计算属性名来动态创建对象属性。

const propName = 'age';
const user = { name: 'Jane', [propName]: 25 };
console.log(user); // { name: 'Jane', age: 25 }

计算属性名允许你使用表达式的值作为属性名来动态创建对象属性。

13. 数组 `map()`、`filter()` 和 `reduce()`

问题： 遍历数组以转换、过滤或累加值可能很重复。

解决方案： 使用 map()、filter() 和 reduce() 来执行常见的数组操作。

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 15

这些数组方法提供了一种函数式方法来转换、过滤和减少数组，使你的代码更具表达性和简洁性。

14. 字符串 `includes()`、`startsWith()` 和 `endsWith()`

问题： 检查字符串是否包含、以...开头或以...结尾可能很冗长。

解决方案： 使用 includes()、startsWith() 和 endsWith() 来简化字符串检查。

const str = 'Hello, world!';
console.log(str.includes('world')); // true
console.log(str.startsWith('Hello')); // true
console.log(str.endsWith('!')); // true

这些字符串方法提供了一种简单易懂的方式来检查子字符串的存在、开始或结束。

15. 函数参数中的数组和对象解构

问题： 提取作为函数参数传递的数组或对象的可能很冗长。

解决方案： 在函数参数中使用解构来直接提取值。

const user = { name: 'Jane', age: 25 };
function greet({ name, age }) {
  return `Hello, ${name}! You are ${age} years old.`;
}
console.log(greet(user)); // "Hello, Jane! You are 25 years old."

函数参数中的解构允许你直接从传递给函数的对象或数组中提取值，使代码更简洁易读。

16. 解构中的默认值

问题： 在解构对象时处理缺失的属性可能很繁琐。

解决方案： 在解构中使用默认值来提供备用值。

const user = { name: 'Jane' };
const { name, age = 18 } = user;
console.log(name); // "Jane"
console.log(age); // 18

解构中的默认值允许你为可能缺失的属性提供备用值，使你的代码更健壮。

17. 对象 `assign()`

问题： 克隆或合并对象可能很冗长且容易出错。

解决方案： 使用 Object.assign() 来克隆或合并对象。

const target = { a: 1 };
const source = { b: 2 };
const merged = Object.assign(target, source);
console.log(merged); // { a: 1, b: 2 }

Object.assign() 允许你高效地克隆或合并对象，减少手动复制的需要。

18. 数组 `find()` 和 `findIndex()`

问题： 在数组中使用循环查找元素或其索引可能很繁琐。

解决方案： 使用 find() 和 findIndex() 来编写更易读的代码。

const users = [
  { id: 1, name: 'Jane' },
  { id: 2, name: 'John' },
];
const user = users.find(u => u.id === 1);
console.log(user); // { id: 1, name: 'Jane' }
const index = users.findIndex(u => u.id === 1);
console.log(index); // 0

这些数组方法提供了一种简单的方式来根据条件查找元素或其索引，提高代码的可读性。

19. 数组 `some()` 和 `every()`

问题： 检查数组中的一些或所有元素是否满足条件可能很冗长。

解决方案： 使用 some() 和 every() 来编写更简洁的代码。

const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // false

这些数组方法允许你以简洁的方式检查数组中的一些或所有元素是否满足条件。

20. 数组 `flat()` 和 `flatMap()`

问题： 展平嵌套数组或映射和展平数组可能很繁琐。

解决方案： 使用 flat() 和 flatMap() 来编写更易读的代码。

const nested = [1, [2, [3, [4]]]];
const flat = nested.flat(2);
console.log(flat); // [1, 2, 3, [4]]
const mapped = [1, 2, 3].flatMap(x => [x, x * 2]);
console.log(mapped); // [1, 2, 2, 4, 3, 6]

这些数组方法提供了一种简单的方式来展平嵌套数组，并在单个步骤中进行映射和展平。

21. 数组 `from()` 和 `of()`

问题： 从可迭代对象或参数创建数组可能很冗长。

解决方案： 使用 Array.from() 和 Array.of() 来编写更简洁的代码。

const set = new Set([1, 2, 3]);
const arrFromSet = Array.from(set);
console.log(arrFromSet); // [1, 2, 3]
const arrOfNumbers = Array.of(1, 2, 3);
console.log(arrOfNumbers); // [1, 2, 3]

Array.from() 允许你从可迭代对象创建数组，而 Array.of() 允许你从参数列表创建数组。

22. 回调函数中的参数解构

问题： 访问传递给回调函数的对象的属性可能很冗长。

解决方案： 在回调函数参数中使用解构来编写更简洁的代码。

const users = [
  { id: 1, name: 'Jane' },
  { id: 2, name: 'John' },
];
users.forEach(({ id, name }) => {
  console.log(`User ID: ${id}, User Name: ${name}`);
});

回调函数参数中的解构允许你直接访问传递给回调函数的对象的属性，使代码更简洁。

23. 可选回调函数

问题： 处理可选回调函数可能很繁琐。

解决方案： 使用短路评估来调用可选回调函数。

function fetchData(url, callback) {
  fetch(url)
    .then(response => response.json())
    .then(data => {
      callback && callback(data);
    });
}

短路评估允许你仅在提供可选回调函数时调用它，使代码更健壮。

24. 将回调函数 Promise 化

问题： 将基于回调的函数转换为 Promise 可能很繁琐。

解决方案： 使用实用函数将回调函数 Promise 化。

function promisify(fn) {
  return function (...args) {
    return new Promise((resolve, reject) => {
      fn(...args, (err, result) => {
        if (err) reject(err);
        else resolve(result);
      });
    });
  };
}
const readFile = promisify(require('fs').readFile);
readFile('path/to/file.txt', 'utf8')
  .then(data => console.log(data))
  .catch(err => console.error(err));

Promise 化允许你将基于回调的函数转换为 Promise，使使用异步/等待语法变得更容易。

25. 使用异步/等待编写类似同步的代码

问题： 使用 Promise 编写异步代码可能很冗长且难以阅读。

解决方案： 使用异步/等待以同步的方式编写异步代码。

async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}
fetchData('https://api.example.com/data');

异步/等待提供了一种编写异步代码的方式，使其看起来和行为像同步代码一样，提高可读性和可维护性。

26. 链式 Promise

问题： 按顺序处理多个异步操作可能很繁琐。

解决方案： 链式 Promise 来处理多个异步操作。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log('Data:', data);
    return fetch('https://api.example.com/more-data');
  })
  .then(response => response.json())
  .then(moreData => {
    console.log('More Data:', moreData);
  })
  .catch(error => {
    console.error('Error:', error);
  });

链式 Promise 允许你按顺序处理多个异步操作，提高可读性和可维护性。

27. `Promise.all` 用于并发执行

问题： 并发处理多个异步操作可能很困难。

解决方案： 使用 Promise.all 来处理并发异步操作。

const fetchData1 = fetch('https://api.example.com/data1').then(response => response.json());
const fetchData2 = fetch('https://api.example.com/data2').then(response => response.json());
Promise.all([fetchData1, fetchData2])
  .then(([data1, data2]) => {
    console.log('Data 1:', data1);
    console.log('Data 2:', data2);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Promise.all 允许你并发处理多个异步操作，并在所有操作完成后继续执行。

28. 防抖函数

问题： 频繁的函数调用，例如在窗口大小调整事件期间，可能会降低性能。

解决方案： 使用防抖函数来限制函数执行的频率。

function debounce(func, wait) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}
window.addEventListener('resize', debounce(() => {
  console.log('Window resized');
}, 200));

防抖函数确保函数仅在一段时间的空闲期后才被调用，从而提高性能。

29. 节流函数

问题： 限制频繁发生的事件（如滚动或大小调整）的函数执行频率。

解决方案： 使用节流函数来限制函数的执行频率。

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function (...args) {
    if (!lastRan) {
      func.apply(this, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(() => {
        if (Date.now() - lastRan >= limit) {
          func.apply(this, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}
window.addEventListener('scroll', throttle(() => {
  console.log('Window scrolled');
}, 200));

节流函数确保函数在指定时间段内最多只调用一次，从而提高频繁发生的事件的性能。

30. 深度克隆对象

问题： 克隆嵌套对象可能很棘手且容易出错。

解决方案： 使用结构化克隆或 Lodash 等库来深度克隆对象。

const obj = { a: 1, b: { c: 2 } };
const deepClone = JSON.parse(JSON.stringify(obj));
console.log(deepClone); // { a: 1, b: { c: 2 } }

深度克隆确保嵌套对象按值复制，而不是按引用复制，从而防止对原始对象的意外修改。

31. 记忆化

问题： 重复调用昂贵的函数可能会降低性能。

解决方案： 使用记忆化来缓存昂贵的函数调用的结果。

function memoize(func) {
  const cache = new Map();
  return function (...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = func.apply(this, args);
    cache.set(key, result);
    return result;
  };
}
const expensiveFunction = memoize((num) => {
  console.log('Computing...');
  return num * 2;
});
console.log(expensiveFunction(2)); // "Computing..." 4
console.log(expensiveFunction(2)); // 4

记忆化通过缓存昂贵的函数调用的结果并为相同参数的后续调用返回缓存的结果来提高性能。

32. 柯里化函数

问题： 创建具有多个参数的函数可能很繁琐。

解决方案： 使用柯里化来创建具有部分应用参数的函数。

function curry(func) {
  return function curried(...args) {
    if (args.length >= func.length) {
      return func.apply(this, args);
    }
    return function (...nextArgs) {
      return curried.apply(this, args.concat(nextArgs));
    };
  };
}
const sum = (a, b, c) => a + b + c;
const curriedSum = curry(sum);
console.log(curriedSum(1)(2)(3)); // 6
console.log(curriedSum(1, 2)(3)); // 6

柯里化允许你创建可以被更少参数调用的函数，并返回一个接收剩余参数的新函数。

33. 部分应用

问题： 使用重复参数调用函数可能很乏味。

解决方案： 使用部分应用将一些参数预先应用到函数中。

function partial(func, ...presetArgs) {
  return function (...laterArgs) {
    return func(...presetArgs, ...laterArgs);
  };
}
const multiply = (a, b, c) => a * b * c;
const double = partial(multiply, 2);
console.log(double(3, 4)); // 24

部分应用允许你通过预先应用一些参数来创建新的函数，使你的代码更灵活和可重用。

34. 函数组合

问题： 将多个函数组合成一个操作可能很繁琐。

解决方案： 使用函数组合来组合多个函数。

const compose = (...funcs) => (arg) =>
  funcs.reduceRight((prev, fn) => fn(prev), arg);
const add = (x) => x + 1;
const multiply = (x) => x * 2;
const addThenMultiply = compose(multiply, add);
console.log(addThenMultiply(5)); // 12

函数组合允许你通过组合多个函数来创建一个新的函数，使你的代码更模块化和可重用。

35. 函数管道

问题： 将一系列函数应用于一个值可能很冗长。

解决方案： 使用函数管道按顺序应用一系列函数。

const pipe = (...funcs) => (arg) =>
  funcs.reduce((prev, fn) => fn(prev), arg);
const add = (x) => x + 1;
const multiply = (x) => x * 2;
const addThenMultiply = pipe(add, multiply);
console.log(addThenMultiply(5)); // 12

函数管道允许你按顺序将一系列函数应用于一个值，提高代码的可读性和可维护性。

36. 自执行函数

问题： 在定义时立即执行一个函数可能很繁琐。

解决方案： 使用立即调用函数表达式 (IIFE)。

(function () {
  console.log('This runs immediately!');
})();

IIFE 允许你在定义时立即执行一个函数，这对于创建隔离作用域和避免污染全局命名空间很有用。

37. 避免使用全局变量

问题： 全局变量会导致冲突和意外副作用。

解决方案： 使用局部变量和模块来避免污染全局命名空间。

// 使用局部变量
function doSomething() {
  let localVariable = 'This is local';
  console.log(localVariable);
}
// 使用模块
const myModule = (function () {
  let privateVariable = 'This is private';
  return {
    publicMethod() {
      console.log(privateVariable);
    },
  };
})();
myModule.publicMethod(); // "This is private"

避免使用全局变量有助于防止冲突和意外副作用，使你的代码更模块化和可维护。

38. 使用闭包进行封装

问题： 公开函数的内部细节可能会导致误用。

解决方案： 使用闭包来封装内部细节。

function createCounter() {
  let count = 0;
  return {
    increment() {
      count++;
      return count;
    },
    decrement() {
      count--;
      return count;
    },
  };
}
const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1

闭包允许你封装内部细节，只公开必要的函数，从而提高代码的安全性 and 可维护性。

39. 模块模式

问题： 将代码组织成可重用的模块可能很困难。

解决方案： 使用模块模式来创建可重用且封装的代码。

const myModule = (function () {
  let privateVariable = 'This is private';
  function privateMethod() {
    console.log(privateVariable);
  }
  return {
    publicMethod() {
      privateMethod();
    },
  };
})();
myModule.publicMethod(); // "This is private"

模块模式允许你创建可重用且封装的代码，提高代码的组织性和可维护性。

40. 单例模式

问题： 确保只创建一个类的实例可能很困难。

解决方案： 使用单例模式来创建一个实例。

const singleton = (function () {
  let instance;
  function createInstance() {
    return {
      name: 'Singleton Instance',
    };
  }
  return {
    getInstance() {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    },
  };
})();
const instance1 = singleton.getInstance();
const instance2 = singleton.getInstance();
console.log(instance1 === instance2); // true

单例模式确保只创建一个类的实例，这对于管理共享资源或配置很有用。

41. 工厂模式

问题： 创建具有复杂初始化的对象可能很繁琐。

解决方案： 使用工厂模式来创建对象。

function createUser(name, role) {
  return {
    name,
    role,
    sayHello() {
      console.log(`Hello, my name is ${this.name} and I am a ${this.role}`);
    },
  };
}
const admin = createUser('Alice', 'admin');
const user = createUser('Bob', 'user');
admin.sayHello(); // "Hello, my name is Alice and I am an admin"
user.sayHello(); // "Hello, my name is Bob and I am a user"

工厂模式允许你以灵活和可重用的方式创建具有复杂初始化的对象。

42. 观察者模式

问题： 管理状态更改并通知多个组件可能很困难。

解决方案： 使用观察者模式来管理状态更改并通知观察者。

function Subject() {
  this.observers = [];
}
Subject.prototype = {
  subscribe(observer) {
    this.observers.push(observer);
  },
  unsubscribe(observer) {
    this.observers = this.observers.filter((obs) => obs !== observer);
  },
  notify(data) {
    this.observers.forEach((observer) => observer.update(data));
  },
};
function Observer(name) {
  this.name = name;
}
Observer.prototype.update = function (data) {
  console.log(`${this.name} received data: ${data}`);
};
const subject = new Subject();
const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');
subject.subscribe(observer1);
subject.subscribe(observer2);
subject.notify('New data available'); // "Observer 1 received data: New data available" "Observer 2 received data: New data available"

观察者模式允许你管理状态更改并通知多个观察者，提高代码的组织性和可维护性。

43. 事件委托

问题： 为多个元素添加事件监听器可能会降低性能。

解决方案： 使用事件委托来有效地管理事件。

document.getElementById('parent').addEventListener('click', (event) => {
  if (event.target && event.target.matches('button.className')) {
    console.log('Button clicked:', event.target.textContent);
  }
});

事件委托允许你通过向一个公共父元素添加单个事件监听器并处理多个子元素的事件来有效地管理事件。

44. 避免使用 `eval()`

问题： 使用 eval() 会导致安全漏洞和性能问题。

解决方案： 避免使用 eval()，并使用更安全的替代方案。

// 避免
const code = 'console.log("Hello, world!")';
eval(code); // "Hello, world!"
// 使用更安全的替代方案
const func = new Function('console.log("Hello, world!")');
func(); // "Hello, world!"

避免使用 eval() 有助于防止安全漏洞和性能问题，使你的代码更安全 and 高效。

45. 使用 `for...of` 进行迭代

问题： 使用 for...in 迭代数组可能容易出错。

解决方案： 使用 for...of 来迭代数组和其他可迭代对象。

const arr = [1, 2, 3, 4, 5];
for (const value of arr) {
  console.log(value);
}
// 1
// 2
// 3
// 4
// 5

for...of 提供了一种简单 and 安全的方式来迭代数组和其他可迭代对象。

无论你是想要提升技能的资深开发者，还是渴望学习的初学者，这份集合都适合所有人。深入探索，发现成为 JavaScript 大师的秘诀！

感谢阅读！