15个帮助你写出更简洁JavaScript的技巧

web前端开发

共 3087字,需浏览 7分钟

 ·

2023-06-20 14:45


在本文中,我们将分享一些可以帮助你编写干净的 JavaScript 代码的技巧。无论你是初级职位还是高级职位,它都一定会帮助你提高实践水平。

01、使用对象解构来获得更清晰的代码

// Badconst firstName = user.firstName;const lastName = user.lastName;
// Goodconst { firstName, lastName } = user;

02、利用扩展语法进行对象和数组操作

// Badconst newArray = [...oldArray];
// Goodconst newArray = [...oldArray];

03、避免直接修改函数参数

// Badfunction updateArray(arr) {    arr.push(4);}
// Goodfunction updateArray(arr) { const newArr = [...arr, 4]; return newArr;}

04、使用模板文字进行字符串插值

// Badconst fullName = firstName + ' ' + lastName;
// Goodconst fullName = `${firstName} ${lastName}`;

05、尽可能使用 const 而不是 let

// Badlet counter = 0;
// Goodconst counter = 0;

06、在函数参数中使用数组和对象解构

// Badfunction getUserInfo(user) {    const name = user.name;    const age = user.age;}
// Goodfunction getUserInfo({ name, age }) { // Code to use name and age}

07、避免深度嵌套代码和过度缩进

// Badif (condition1) {    if (condition2) {        if (condition3) {            // Code        }    }}
// Goodif (condition1 && condition2 && condition3) { // Code}

08、使用 Array.prototype.reduce() 进行复杂的数组操作

// Badlet sum = 0;for (let i = 0; i < numbers.length; i++) {    sum += numbers[i];}
// Goodconst sum = numbers.reduce((acc, curr) => acc + curr, 0);

09、使用提前返回和保护子句避免不必要的嵌套

// Badfunction calculateTotal(price, quantity) {    if (price && quantity) {        // Code to calculate total        return total;    }}
// Goodfunction calculateTotal(price, quantity) { if (!price || !quantity) { return; }
// Code to calculate total return total;}

10、用有意义的注释和 JSDoc 注释记录你的代码

// Bad// Increment the counter by 1counter++;
// Good/** * Increments the counter by 1. */counter++;

11、对私有数据使用闭包

const counter = (() => {  let count = 0;  return {    increment: () => {      count++;    },    getCount: () => {      return count;    },  };})();

12、实施记忆以优化性能

const memoizedFunction = (() => {  const cache = {};  return (arg) => {    if (cache[arg]) {      return cache[arg];    }    const result = expensiveOperation(arg);    cache[arg] = result;    return result;  };})();

13、避免改变对象和数组

// Badconst person = {  name: 'John',  age: 30,};person.age = 31;
// Goodconst person = { name: 'John', age: 30,};const updatedPerson = { ...person, age: 31 };

14、将复杂的功能分解成更小的、可重用的功能

// Badfunction processUserData(userData) {  // complex logic...}
// Goodfunction validateUserData(userData) { // validation logic...}
function sanitizeUserData(userData) { // sanitization logic...}
function processUserData(userData) { validateUserData(userData); sanitizeUserData(userData); // remaining logic...}

15、遵循单一职责原则 (SRP)

// Badfunction calculateAreaAndPerimeter(radius) {  const area = Math.PI * radius * radius;  const perimeter = 2 * Math.PI * radius;  console.log(`Area: ${area}, Perimeter: ${perimeter}`);}
// Goodfunction calculateArea(radius) { return Math.PI * radius * radius;}
function calculatePerimeter(radius) { return 2 * Math.PI * radius;}
const area = calculateArea(5);const perimeter = calculatePerimeter(5);console.log(`Area: ${area}, Perimeter: ${perimeter}`);
总结
以上就是我今天与你分享的15个关于写出更好JS的小技巧,希望对你有用。
感谢你的阅读,祝编程愉快!

学习更多技能

请点击下方公众号


浏览 8
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报