提升 JavaScript 编程效率的 20 个实用技巧

---

前言

JavaScript 是一种多功能且强大的语言，但也可能难以掌握。以下是每个开发人员都应该知道的 20 个 JavaScript 技巧和提示，帮助你编写更简洁、更高效的代码，并改善开发工作流程。

---

一、正文

1.箭头函数

箭头函数提供了一种简洁的语法，并在词法上绑定 this 值，简化函数声明

function add() {
	return a + b;
}

// 箭头函数简介写法
const add = (a, b) => a + b;

2.使用 let 和 const 代替 var

避免使用 var 声明变量，使用 let 和 const 以确保块级作用域并避免提升问题。对于不会重新分配的变量使用 const，对于需要重新分配的变量使用 let。

let name = 'CodeClear';
const age = 18;

3.解构赋值

解构赋值方便从对象中提取属性值或从数组中提取值到独立的变量中

// 对象提取属性值
const person = { name: 'CodeCler', age: 18};
const { name, age } = person;

// 数组提取值
const numbers = [1, 2, 3];
const [ num1, num2 ] = numbers;

4.展开运算符

展开运算符允许你扩展可迭代对象（如数组）的元素或对象的属性。

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];

const person = { name: 'CodeClear' };
// 混合赋值
const newPerson = {...person, age: 18};

5.模板字面量

模板字面量提供了一种简单的方法将变量和表达式插入到字符串中，相较于原生字符串拼接增强代码可读性。

const name = 'CodeClear'
const greeting = `Hello, ${name}!`

6.默认参数

为函数参数设置默认值以避免未定义错误。

function greet(name = 'CodeClear') {
	console.log(`Hello, ${name}!`)
}

greet()
greet('Bob')

7.剩余参数

剩余参数允许你将不确定数量的参数表示为数组。

function sum(...numbers) {
	return numbers.reduce((a, b) => a + b, 0)
}

console.log(sum(1, 2, 3, 4, 5, 6)) // 21

8.对象属性简写

当属性名称和变量名称相同时，使用简写语法创建对象。

const name = 'CodeClear';
const age = 18;
const person = { name, age };

9.字符串方法

使用现代字符串方法执行常见的字符串操作。

const str = 'Hello, World!';

console.log(str.includes('World')); // true
console.log(str.startsWith('Hello')); // true
console.log(str.endsWith('!')); // true

10.短路运算符

使用短路运算符进行条件表达式和默认值设置。

const user = { name: 'CodeClear' };
const name = user.name || 'Guest';

const isAdmin = user.isAdmin && 'Admin';

11.Array.from()

Array.from() 方法可用于将任何可迭代对象转换为数组。

const str = "Hello!";
const arr = Array.from(str);
console.log(arr); //Output: ['H', 'e', 'l', 'l', 'o', '!']

12.可选链

可选链允许你在不检查每个引用是否有效的情况下安全地访问深层嵌套的属性。

const user = { name: 'CodeClear', address: { city: 'New York' } };

const city = user.address?.city;

13.数组快速去重

您可以使用 Set 从数组中删除重复元素，但是这种去重方式只能去除基本数据类型组成的数组。

const arr = [1, 2, 3, 4, 5, 6];
const arr2 = new Set(arr);
const arr3 = [...arr2];

14.空值合并运算符

空值合并运算符 (??) 提供了一种在左操作数为 null 或未定义时返回右操作数的方法。

const user = { name: 'CodeClear' };
const name = user.name ?? 'Guest';

15.数组方法

使用数组方法如 map(), filter(), 和 reduce() 以函数式的方式对数组进行常见操作。

const numbers = [1, 2, 3, 4, 5];

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

16.使用 for…of 进行迭代

使用 for…of 循环更可读地迭代数组、字符串和其他可迭代对象。

const numbers = [1, 2, 3, 4, 5];

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

17.克隆对象和数组

使用展开运算符或 Object.assign() 克隆对象和数组。

const original = { name: 'CodeClear', age: 18 };
const clone = { ...original };

const arr = [1, 2, 3];
const arrClone = [...arr];

18.动态属性名称

使用动态属性名称动态设置对象属性。

const propName = 'age';
const person = {
  name: 'CodeClear',
  [propName]: 18
};

19.防抖和节流

通过防抖和节流优化频繁调用的函数，如滚动或调整大小事件。

防抖：

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

window.addEventListener('resize', debounce(() => {
  console.log('Resized');
}, 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('Scrolled');
}, 300));

20.有效使用 console 进行调试

利用各种 console 方法进行更有效的调试。

console.log('Simple log');
console.warn('This is a warning');
console.error('This is an error');
console.table([{ name: 'CodeClear', age: 18 }, { name: 'Jane', age: 25 }]);
console.group('Group');
console.log('Message 1');
console.log('Message 2');
console.groupEnd();

---

总结

掌握这些 JavaScript 技巧和提示，不仅能帮助你编写更简洁、更高效的代码，还能极大地改善你的开发工作流程。从使用箭头函数和解构赋值，到合理应用短路运算符和可选链，每个技巧都有其独特的优势。在日常编程中运用这些技巧，可以提高代码的可读性、可维护性和性能。希望这些技巧能为你的 JavaScript 开发之旅带来更多便利和乐趣。继续探索和实践，你会发现更多惊喜和进步！