2024年你必须知道的 20 个 JavaScript 高效技巧

689 阅读5分钟

大家好,我是CodeQi! 一位热衷于技术分享的码仔。

作为一个程序员,编写简洁高效的代码始终是追求的目标。而 JavaScript 是我们每天接触最多的语言之一。随着技术的进步,我们也不断发现一些新的技巧和最佳实践来提升开发体验。下面是我在 2024 年为大家推荐的 20 个必知的 JavaScript 技巧,掌握它们,能让你的代码更加简洁、优雅且高效!🌟

1. 使用 let 和 const 代替 var 🚫

var 曾是 JavaScript 的老朋友,但它的提升问题作用域混乱常常带来意外的错误。let 和 const 是更现代的选择,提供了块级作用域

let name = '小明';
const age = 30;

✍️ 建议:使用 const 声明不可变的值,let 用于那些会发生变化的值。

2. 解构赋值 🌿

解构赋值让我们可以更加简洁地从数组或对象中提取值。比起以前繁琐的写法,解构能让代码看起来更加清晰。

const person = { name'小红'age25 };
const { name, age } = person;

const numbers = [123];
const [first, second] = numbers;

3. 模板字面量 💬

模板字面量让字符串插值和多行字符串变得更加直观,告别 + 拼接的烦恼!

const name = '小明';
const greeting = `你好,${name}!`;

✍️ 提示:模板字面量不仅支持变量插值,还可以嵌入表达式和函数调用,功能非常强大。

4. 默认参数值 🛠️

在函数定义中设置默认参数值,可以避免未传递参数时出现的 undefined 错误,代码更具健壮性。

function greet(name = '游客') {
  return `你好,${name}!`;
}

5. 箭头函数 🎯

箭头函数让代码更加简洁,并且解决了 this 绑定问题。在回调函数中尤其实用。

const add = (a, b) => a + b;

6. 扩展运算符 ... 🌀

扩展运算符是处理数组和对象的利器。无论是合并数组还是克隆对象,都变得非常简单。

const arr1 = [123];
const arr2 = [...arr1, 45];

const obj1 = { name'小明' };
const obj2 = { ...obj1, age30 };

✍️ 提示:使用扩展运算符合并或克隆数据结构,比起传统的循环复制,代码更具可读性。

7. 剩余参数 ... 🌟

剩余参数允许我们在函数中接受不确定数量的参数,并将它们作为数组处理。

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

8. 短路求值 && 和 || 🛠️

通过短路求值,我们可以简化条件判断,还能为变量设置默认值。

const user = { name'小明' };
const name = user.name || '游客';

const isAdmin = user.isAdmin && '管理员';

9. 对象属性简写 🚀

如果对象的属性名和变量名一致,可以使用简写语法,这能让代码更加简洁。

const name = '小明';
const age = 30;
const person = { name, age };

10. 可选链式调用 ?. 🛡️

可选链式调用允许我们安全地访问深层嵌套的对象属性,避免未定义的值导致错误。

const user = { name'小明'address: { city'北京' } };
const city = user.address?.city;

11. 空值合并 ?? ⚡

空值合并运算符允许我们为 null 或 undefined 提供一个默认值,而不会像 || 那样误判断为 false 或 0

const user = { name'小明' };
const name = user.name ?? '游客';

12. 数组方法:map()filter()reduce() 🎯

利用数组的高阶函数 map()filter() 和 reduce(),我们可以以函数式编程的风格来处理数组数据,告别繁琐的循环。

const numbers = [12345];

const doubled = numbers.map(num => num * 2);
const evens = numbers.filter(num => num % 2 === 0);
const sum = numbers.reduce((total, num) => total + num, 0);

13. Promise 链和 async/await 🌐

处理异步操作时,Promise 和 async/await 是我们最好的选择。它们让代码更清晰、可读性更高。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

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

14. 防抖与节流 🔄

防抖和节流是优化频繁触发事件的好办法,尤其在处理滚动、调整窗口大小等场景时非常有用。

function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

window.addEventListener('resize'debounce(() => {
  console.log('窗口调整大小');
}, 300));

function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

window.addEventListener('scroll'throttle(() => {
  console.log('页面滚动');
}, 300));

15. 使用 for...of 迭代

for...of 是一种更简洁的迭代数组、字符串等可迭代对象的方式。

const numbers = [12345];

for (const number of numbers) {
  console.log(number);
}

16. 克隆对象和数组

克隆对象和数组可以使用扩展运算符或 Object.assign(),无需手动遍历属性。

const original = { name'小明'age30 };
const clone = { ...original };

const arr = [123];
const arrClone = [...arr];

17. 动态属性名称 🧠

通过计算属性名称,我们可以动态地设置对象的属性名。

const propName = 'age';
const person = {
  name'小明',
  [propName]: 30
};

18. 使用 setTimeout 和 setInterval ⏲️

这两个函数允许我们定时执行代码,创建延迟或者循环任务。

setTimeout(() => {
  console.log('2秒后执行');
}, 2000);

const intervalId = setInterval(() => {
  console.log('每3秒执行一次');
}, 3000);

// 停止循环
clearInterval(intervalId);

19. 字符串方法:includes()startsWith()endsWith() 💡

这些现代字符串方法让我们更方便地处理文本。

const str = '你好,世界!';

console.log(str.includes('世界')); // true
console.log(str.startsWith('你好')); // true
console.log(str.endsWith('!')); // true

20. 有效使用 console 进行调试 🐛

console 是我们调试时最常用的工具。利用不同的 console 方法,可以更高效地排查问题。

console.log('简单的日志');
console.warn('这是一个警告');
console.error('这是一个错误');
console.table([{ name'小明'age30 }, { name'小红'age25 }]);

总结

这些 JavaScript 技巧不仅可以让你的代码更加简洁和高效,还能提升可读性和性能。在 2024 年,掌握它们将是每个开发者必须具备的技能。