在本文中，我們將分享一些可以幫助你編寫干凈的 JavaScript 代碼的技巧。無論你是初級(jí)職位還是高級(jí)職位，它都一定會(huì)幫助你提高實(shí)踐水平。

01、使用對(duì)象解構(gòu)來獲得更清晰的代碼

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

02、利用擴(kuò)展語法進(jìn)行對(duì)象和數(shù)組操作

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

03、避免直接修改函數(shù)參數(shù)

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

04、使用模板文字進(jìn)行字符串插值

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

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

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

06、在函數(shù)參數(shù)中使用數(shù)組和對(duì)象解構(gòu)

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

07、避免深度嵌套代碼和過度縮進(jìn)

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

08、使用 Array.prototype.reduce() 進(jìn)行復(fù)雜的數(shù)組操作

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

09、使用提前返回和保護(hù)子句避免不必要的嵌套

// 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、對(duì)私有數(shù)據(jù)使用閉包

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

12、實(shí)施記憶以優(yōu)化性能

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

13、避免改變對(duì)象和數(shù)組

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

14、將復(fù)雜的功能分解成更小的、可重用的功能

// 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、遵循單一職責(zé)原則 (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}`);

總結(jié)

以上就是我今天與你分享的15個(gè)關(guān)于寫出更好JS的小技巧，希望對(duì)你有用。

感謝你的閱讀，祝編程愉快！

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)

15個(gè)幫助你寫出更簡潔JavaScript的技巧

學(xué)習(xí)更多技能請(qǐng)點(diǎn)擊下方公眾號(hào)

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)