返回

20个技巧,让你的JS代码更高效!

前端

在 JavaScript 开发中,高效、简洁的代码至关重要。而简写是实现这一目标的有效手段之一。本文整理了 20 个超实用的 JS 简写技巧,帮助你快速提升代码质量和开发效率。

1. 使用三元运算符代替 if/else 语句

let result = condition ? true : false;

2. 利用箭头函数简化函数语法

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

3. 使用 spread 运算符展开数组或对象

const arr = [...array1, ...array2];

4. 使用解构赋值简化变量声明

const [first, second] = [1, 2];

5. 利用可选链操作符安全访问嵌套属性

const name = obj?.name ?? 'default';

6. 使用 nullish 运算符合并空值

const result = value ?? 'default';

7. 采用模板字符串简化字符串拼接

const message = `Hello, ${name}!`;

8. 利用正则表达式查找和替换

const newString = string.replace(/old/g, 'new');

9. 使用 Array.from() 将类数组转换为数组

const arr = Array.from(document.querySelectorAll('p'));

10. 借助 Object.assign() 合并对象

const newObj = Object.assign({}, obj1, obj2);

11. 使用 Array.prototype.reduce() 累积值

const sum = arr.reduce((a, b) => a + b);

12. 采用 Set 数据结构去重

const uniqueValues = [...new Set(arr)];

13. 利用 Map 数据结构存储键值对

const map = new Map([['key1', 'value1'], ['key2', 'value2']]);

14. 使用 forEach() 遍历数组

arr.forEach((item) => {
  // do something with item
});

15. 采用 slice() 复制数组部分

const newArr = arr.slice(start, end);

16. 利用 indexOf() 查找数组元素

const index = arr.indexOf('value');

17. 使用 filter() 过滤数组

const filteredArr = arr.filter((item) => item > 10);

18. 借助 sort() 排序数组

const sortedArr = arr.sort((a, b) => a - b);

19. 使用 map() 转换数组

const newArr = arr.map((item) => item * 2);

20. 采用 find() 查找满足条件的元素

const foundItem = arr.find((item) => item === 'value');

掌握这些技巧后,你将能够编写更简洁、高效、易于维护的 JavaScript 代码。不断练习,将这些技巧融入你的日常开发中,你的前端开发效率将得到显著提升。