在本文中，我们将分享一些可以帮助你编写干净的 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的小技巧，希望对你有用。

感谢你的阅读，祝编程愉快！

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

学习更多技能
请点击下方公众号

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

学习更多技能请点击下方公众号

学习更多技能
请点击下方公众号