26 个写高效干净JavaScript 的小技巧

发布时间：2024-12-23 11:54

阅读Eloquent JavaScript提高JavaScript技能：https://eloquentjavascript.net/ #生活技巧# #工作学习技巧# #编程学习资源#

作为开发人员，我们努力编写不仅实用而且干净高效的代码。干净的代码对于可维护性、可扩展性和可读性至关重要。在不断发展的 JavaScript 世界中，采用编写干净代码的最佳实践可以显着提高编程效率和项目质量。

今天这篇内容，我们将分享26个JavaScript技巧，可帮助你编写更简洁、更高效的 JavaScript 代码，并附有示例来帮助您实现更好的代码效果。

1.使用const并避免使用 var

避免使用 var 声明变量。相反，对块作用域变量使用 let 和 const 可以提高可读性并减少运行时错误。

// Instead ofvar name = 'Lokesh Prajapati';// Useconst name = 'Lokesh Prajapati'; // for constantslet age = 24; // for variables that may change2. 使用描述性变量名称

选择描述其用途或它们所持有的值的变量和函数名称。

// Instead ofconst d = new Date();// Useconst currentDate = new Date();3. 使用模板文字

模板文字使字符串连接更具可读性。

const name = 'Lokesh';console.log(`Hello, ${name}!`); // More readable4. 解构赋值

解构使得从数组中提取值或从对象中提取属性变得更加容易。

const person = { name: 'Lokesh', age: 24 };const { name, age } = person;5. 默认参数

使用默认参数使您的函数更加健壮。

function greet(name = 'Guest') { console.log(`Hello, ${name}!`);}6. 箭头函数

箭头函数提供简洁的语法并按词法绑定 this 值。

const add = (a, b) => a + b;7. 在异步代码中使用 Promise 和 Async/Await

Promise 和 async/await 语法使异步代码更易于阅读和管理。

async function fetchData() { const data = await fetch('https://api.example.com'); return data.json();}8. 模块

使用模块有效地组织和重用您的代码。

// math.jsexport const add = (a, b) => a + b;// app.jsimport { add } from './math.js';console.log(add(2, 3));9. 短路评估

使用短路求值来表达简洁的条件表达式。

const greet = name => console.log(name || 'Guest');10.三元运算符

三元运算符可以简化 if-else 语句。

const age = 20;const canVote = age >= 18 ? 'Yes' : 'No';11. 扩展运算符

扩展运算符允许迭代器在需要 0+ 参数的地方进行扩展。

const nums = [1, 2, 3];const newNums = [...nums, 4, 5];12. 其余参数

剩余参数允许函数接受不定数量的参数作为数组。

function sum(...nums) { return nums.reduce((acc, curr) => acc + curr, 0);}13. Chain Promises Wisely

Chain 承诺避免“回调地狱”并保持代码整洁。

fetchData() .then(data => processData(data)) .then(result => displayData(result)) .catch(error => console.error(error));14.使用数组（Array)和对象(Object）方法

利用数组和对象的内置方法来获得更简洁和描述性的代码。

const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map(number => number * 2);15. 提前返回

使用提前返回来避免深层嵌套并使您的函数更加清晰。

function processUser(user) { if (!user) return; // Process user}16.避免全局变量

尽量减少全局变量的使用，以减少潜在的冲突和错误。

17. 明智地评论

注释应该解释“为什么”要做某事，而不是“正在做什么”，因为代码本身对于后者应该是不言自明的。好的注释可以防止误解，并为将来阅读您代码的任何人（包括您自己）节省时间。

// Bad: The comment is unnecessary as the code is self-explanatory// Increment the counter by onecounter++;// Good: The comment provides context that the code cannot// We increment the counter here because the user has opened a new sessioncounter++;// Bad: Comment restates the code// Check if the user is logged inif (user.isLoggedIn) { // ...}// Good: Explains why the condition is important// Check if the user is logged in because only logged-in users have access to premium featuresif (user.isLoggedIn) { // Code to provide access to premium features}18. 一致的编码风格

采用一致的编码风格或遵循风格指南（如 Airbnb 的 JavaScript 风格指南）以保持可读性。命名、间距和语法的一致性将使您的代码更易于遵循和维护。

// Bad: inconsistent spacing and namingfunction calculatevalue(a,b){ const total=a+breturn total;}// Good: consistent naming and spacing, following a common style guidefunction calculateValue(a, b) { const total = a + b; return total;}19. 保持职能小而集中

每个功能应该做一件事，并且做好。小型、集中的函数更容易测试和调试。

// Bad: doing too much in one functionfunction handleUserData(user) { if (user.age < 18) { console.log('User is a minor'); } else { console.log('User is an adult'); } // Additional unrelated tasks...}// Good: breaking down into smaller, focused functionsfunction logUserAgeCategory(age) { const category = age < 18 ? 'minor' : 'adult'; console.log(`User is a ${category}`);}20. 模块化你的代码

将您的代码分解为模块或组件。这不仅使其更易于管理，而且增强了可重用性。

// userValidation.jsexport function isValidUser(user) { // Validation logic...}// app.jsimport { isValidUser } from './userValidation.js';if (isValidUser(user)) { // Proceed...}21. 避免使用幻数

用命名常量替换幻数，使代码更具可读性和可维护性。

const MAX_USERS = 10;// Instead ofif (users.length > 10) { // Do something}// Useif (users.length > MAX_USERS) { // Do something}22.简化条件表达式

为了清晰起见，将复杂的条件分解为变量或更小的函数。

const isEligibleForDiscount = (user) => user.age > 65 || user.memberStatus === 'VIP';if (isEligibleForDiscount(user)) { // Apply discount}23. 谨慎使用注释

代码应该尽可能不言自明。使用注释来解释“为什么”而不是“什么”。

// Bad: unnecessary comment// adds one to the numberconst increment = (number) => number + 1;// Good: comment explaining why// We add 1 to include the last day of the rangeconst inclusiveEnd = (start, end) => end - start + 1;24. 更喜欢组合而不是继承

组合提供了更大的灵活性，并降低了与深层继承层次结构相关的复杂性。

const canEat = { eat: function() { console.log('Eating'); }};// Compositionconst person = Object.assign({}, canEat);person.eat(); // Eating25. 封装代码块

封装处理特定任务的代码部分。这提高了可读性和可重用性。

function processOrder(order) { const validateOrder = (order) => { // Validation logic };26. 了解最新功能

JavaScript 不断发展。及时了解最新功能可以帮助您编写更高效、更简洁的代码。

// Old way: callbacksfs.readFile(filePath, function(err, data) { if (err) throw err; console.log(data);});// New way: async/awaitasync function readFileAsync(filePath) { try { const data = await fs.promises.readFile(filePath); console.log(data); } catch (err) { console.error(err); }}总结

接受这些技巧不仅可以提高您的 JavaScript 编码技能，还可以使您的代码库更易于维护且使用起来更愉快。请记住，编写干净代码的目标不仅仅是遵守规则，而是让您的代码尽可能清晰易懂，让其他人（包括未来的您）可以理解。

本文链接：http://www.28at.com/showinfo-26-82359-0.html26 个写高效干净JavaScript 的小技巧

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：聊聊2024最活跃的前端框架是哪个？Vue、React、Angular、Svelte、Ember？

下一篇：您必须了解的 21 个 HTML 技巧

网址：26 个写高效干净JavaScript 的小技巧 https://www.yuejiaxmz.com/news/view/545613

上一篇: 希亦T800洗地机高效深度清洁，

下一篇: 再生铅资源高效利用及清洁生产技改

26 个写高效干净JavaScript 的小技巧

相关内容

随便看看

最新动态分享

热点动态分享

专题

推荐动态分享