{"id":1179,"date":"2024-08-04T07:33:00","date_gmt":"2024-08-03T23:33:00","guid":{"rendered":"https:\/\/www.laoyulaoyu.com\/?p=1179"},"modified":"2024-08-04T07:33:00","modified_gmt":"2024-08-03T23:33:00","slug":"%e5%a6%82%e4%bd%95%e7%bc%96%e5%86%99%e6%9b%b4%e5%b9%b2%e5%87%80%e3%80%81%e6%9b%b4%e6%98%93%e4%ba%8e%e7%bb%b4%e6%8a%a4%e7%9a%84-javascript-%e4%bb%a3%e7%a0%81","status":"publish","type":"post","link":"https:\/\/laoyulaoyu.com\/index.php\/2024\/08\/04\/%e5%a6%82%e4%bd%95%e7%bc%96%e5%86%99%e6%9b%b4%e5%b9%b2%e5%87%80%e3%80%81%e6%9b%b4%e6%98%93%e4%ba%8e%e7%bb%b4%e6%8a%a4%e7%9a%84-javascript-%e4%bb%a3%e7%a0%81\/","title":{"rendered":"\u5982\u4f55\u7f16\u5199\u66f4\u5e72\u51c0\u3001\u66f4\u6613\u4e8e\u7ef4\u62a4\u7684 JavaScript \u4ee3\u7801"},"content":{"rendered":"\n

\u4f5c\u8005\uff1a\u8001\u4f59\u635e\u9c7c<\/a><\/p>\n\n\n\n

\u539f\u521b\u4e0d\u6613\uff0c\u8f6c\u8f7d\u8bf7\u6807\u660e\u51fa\u5904\u53ca\u539f\u4f5c\u8005\u3002<\/mark><\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\n
\u5199\u5728\u524d\u9762\u7684\u8bdd\uff1a<\/strong>\u7f16\u5199\u4e00\u6d41\u7684 JavaScript \u4ee3\u7801<\/mark>\u5e76\u975e\u5728\u4e8e\u5bf9\u6700\u65b0\u6280\u672f\u8d8b\u52bf\u7684\u76f2\u76ee\u8ffd\u9010\uff0c\u4e5f\u5e76\u975e\u8981\u53bb\u6784\u5efa\u7e41\u6742\u7684\u89e3\u51b3\u65b9\u6848\u3002\u672c\u6587\u7ed9\u51fa\u4e86\u82e5\u5e72\u5b9e\u7528\u7684\u6280\u5de7\uff0c\u5b83\u52a9\u529b\u6211\u5199\u51fa\u4e86\u66f4\u4f18\u8d28\u7684\u4ee3\u7801\u3002\u5018\u82e5\u60a8\u4ea7\u751f\u4e86\u50cf\u201c\u5176\u4ed6\u5f00\u53d1\u4eba\u5458\u80fd\u5426\u8f7b\u677e\u8bfb\u61c2\u6b64\u4ee3\u7801\uff1f\u201d\u201c\u6b64\u4ee3\u7801\u80fd\u5426\u6b63\u786e\u5730\u8fdb\u884c\u6269\u5c55\uff0c\u6291\u6216\u5bb9\u6613\u88ab\u9519\u8bef\u4f7f\u7528\uff1f\u201d\u4ee5\u53ca\u201c\u8fd9\u662f\u5426\u5c5e\u4e8e\u6b63\u786e\u7684\u6a21\u5f0f\uff1f\u201d\u8fd9\u822c\u7684\u7591\u95ee\uff0c\u672c\u6587\u6216\u8bb8\u80fd\u591f\u7ed9\u4e88\u60a8\u4e00\u4e9b\u9887\u5177\u4ef7\u503c\u7684\u542f\u793a\u3002\u90a3\u4e48\uff0c\u8ba9\u6211\u4eec\u5373\u523b\u542f\u7a0b\uff01<\/pre>\n<\/blockquote>\n\n\n\n
#1\uff1a\u4f7f\u7528 Lodash<\/strong><\/h2>\n\n\n\n
\u5bf9\u4e8e\u90a3\u4e9b\u4e0d\u77e5\u9053\u7684\u4eba\u6765\u8bf4\uff0cLodash<\/a>\u662f\u4e00\u4e2a\u5305\u542b\u591a\u529f\u80fd\u5de5\u5177\u7684 JS \u5e93\uff0c\u53ef\u4ee5\u7b80\u5316\u7f16\u7801\u4efb\u52a1\u5e76\u4f7f\u65e5\u5e38\u6311\u6218\u66f4\u5bb9\u6613\u5904\u7406\u3002\u4ece\u4ee3\u7801\u89d2\u5ea6\u6765\u770b\uff0c\u5b83\u76f8\u5f53\u4e8e\u745e\u58eb\u519b\u5200\u3002\u5982\u679c\u4f60\u8fd8\u6ca1\u6709\u5c06\u5b83\u7eb3\u5165\u4f60\u7684\u4ee3\u7801\u5e93\uff0c\u4f60\u5e94\u8be5\u8fd9\u6837\u505a\u3002Npm\u8d8b\u52bf\u4e0d\u4f1a\u6492\u8c0e\uff1a\u5b83\u7684\u4e0b\u8f7d\u91cf\u662f<\/a>React \u7684<\/a>\u4e24\u500d\uff0c\u5e76\u4e14\u8fd8\u5728\u7ee7\u7eed\u6500\u5347\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u5b83\u53ef\u4ee5\u8f7b\u677e\u5904\u7406\u65e5\u5e38\u7f16\u7801\u6311\u6218\uff0c\u6539\u8fdb\u60a8\u7684\u4ee3\u7801\u3002\u4ee5\u4e0b\u662f\u5b83\u5982\u4f55\u6539\u8fdb\u60a8\u7684\u4ee3\u7801\u7684\u4e00\u4e9b\u793a\u4f8b\uff1a<\/p>\n\n\n\n
\u63d0\u9ad8\u53ef\u8bfb\u6027<\/strong><\/h3>\n\n\n\n
\u4f8b\u5982\uff0c\u5047\u8bbe\u60a8\u8981\u8f6c\u6362\u5982\u4e0b\u5bf9\u8c61\uff1a<\/p>\n\n\n\n
const obj = {\n  required: false,\n  custom: true,\n  essential: true,\n  default: false,\n};<\/code><\/pre>\n\n\n\n
\u653e\u5165\u53ea\u6709\u5177\u6709\u771f\u503c\u7684\u952e\u7684\u6570\u7ec4\u4e2d\uff1a[\u2018custom\u2019, \u2018essential']<\/mark><\/strong><\/code>\u3002\u4ec5\u4f7f\u7528 JS \u5de5\u5177\uff0c\u60a8\u9700\u8981\u60f3\u51fa\u7c7b\u4f3c\u4ee5\u4e0b\u5185\u5bb9\u7684\u5185\u5bb9\uff1a<\/p>\n\n\n\n
const truthyKeys = Object
   . keys (obj) 
  . filter ( key => obj[key] === true );<\/code><\/pre>\n\n\n\n
\u5f53\u7136\uff0c\u666e\u901a\u7684 JavaScript \u7248\u672c\u4e5f\u53ef\u4ee5\u5de5\u4f5c\uff0c\u4f46\u4e0e Lodash \u7684\u65b9\u6cd5\u76f8\u6bd4\uff0c\u5b83\u7684\u53ef\u8bfb\u6027\u7a0d\u5dee\u4e00\u4e9b\uff1a<\/p>\n\n\n\n
const keys = _.chain (obj) .pickBy ( 
  Boolean ) .keys (
   ) .   value ( ) ;<\/code><\/pre>\n\n\n\n
\u5b83\u63d0\u4f9b\u4e86\u5f88\u591a\u6709\u7528\u7684\u65b9\u6cd5<\/strong><\/h3>\n\n\n\n
\u597d\u5427\uff0c\u4f60\u53ef\u80fd\u4e0d\u592a\u76f8\u4fe1\u3002\u90a3\u4e48\u5408\u5e76\u5d4c\u5957\u5bf9\u8c61\u600e\u4e48\u6837\uff1f<\/p>\n\n\n\n
\u4f7f\u7528 JS\uff1a<\/strong><\/p>\n\n\n\n
const merged = {\n  ...obj1,\n  ...obj2,\n  nested: {\n    ...obj1.nested,\n    ...obj2.nested,\n  },\n};<\/code><\/pre>\n\n\n\n
\u4f7f\u7528Lodash\uff1a<\/strong><\/p>\n\n\n\n
const merged = _.merge({}, obj1, obj2);<\/code><\/pre>\n\n\n\n
\u5b83\u4e0d\u4ec5\u7528\u4e8e\u5408\u5e76\u3002\u60a8\u8fd8\u53ef\u4ee5\u4f7f\u7528 ;\u7b49\u6765.flattenDeep<\/strong><\/mark><\/code>\u5c55\u5e73\u6df1\u5c42\u5d4c\u5957\u7684\u6570\u7ec4\u6216\u6309\u552f\u4e00\u9879\u8fc7\u6ee4\u6570\u7ec4\u3002.uniqBy<\/mark><\/strong><\/code><\/p>\n\n\n\n
\u5f00\u7bb1\u5373\u7528\u7684\u9632\u6296\/\u8282\u6d41<\/strong><\/h3>\n\n\n\n
\u9632\u6296\u6216\u8282\u6d41\u662f\u5e38\u89c1\u7684\u505a\u6cd5\uff0c\u4f46\u5982\u679c\u60a8\u4e0d\u4f7f\u7528 Lodash\uff0c\u60a8\u53ef\u80fd\u6b63\u5728\u7f16\u5199\u81ea\u5df1\u7684\u51fd\u6570\u6216\u4f7f\u7528\u7b2c\u4e09\u65b9\u8f6f\u4ef6\u5305\u3002\u65e2\u7136 Lodash \u6709\u73b0\u6210\u7684\u4f9d\u8d56\u9879\uff0c\u4e3a\u4ec0\u4e48\u8fd8\u8981\u4f7f\u7528\u65b0\u7684\u4f9d\u8d56\u9879\u5462\uff1f<\/p>\n\n\n\n
\u4f7f\u7528 JS\uff1a<\/strong><\/p>\n\n\n\n
\/\/ \u5bfc\u5165\u6216\u521b\u5efa\u81ea\u5df1\u7684\uff1a\n\nfunction  debounce ( func, wait ) { \n  let timeout; \n  return  function ( ...args ) { \n    clearTimeout (timeout); \n    timeout = setTimeout ( () => func.apply ( this , args), wait); \n  }; \n} \n\nconst debouncedFunc = debounce (func, wait)<\/code><\/pre>\n\n\n\n
\u4f7f\u7528Lodash\uff1a<\/strong><\/p>\n\n\n\n
const debouncedFunc = _.debounce ( func , wait);<\/code><\/pre>\n\n\n\n
#2\uff1a\u5c3d\u91cf\u907f\u514d\u4f7f\u7528 Switch Case<\/strong><\/h2>\n\n\n\n
switch<\/code>\u8fd9\u4e9b\u60c5\u51b5\u53ef\u80fd\u5f88\u6709\u7528\uff0c\u4f46\u5b83\u4eec\u4e5f\u6709\u4e00\u4e9b\u7f3a\u70b9\uff0c\u4f7f\u5f97\u5b83\u4eec\u4e0e\u5176\u4ed6\u89e3\u51b3\u65b9\u6848\u76f8\u6bd4\u4e0d\u592a\u7406\u60f3\uff1a<\/p>\n\n\n\n
    \n
  • \u5b83\u4eec\u5f88\u5feb\u5c31\u4f1a\u53d8\u5f97\u5197\u957f\u4e14\u96be\u4ee5\u9605\u8bfb\uff0c<\/li>\n\n\n\n
  • \u5bb9\u6613\u51fa\u73b0\u8bf8\u5982\u7f3a\u5c11break<\/code>\u8bed\u53e5\u4e4b\u7c7b\u7684\u9519\u8bef\uff0c\u4ece\u800c\u5bfc\u81f4\u610f\u5916\u6267\u884c\u591a\u4e2a\u6848\u4f8b\u7684\u5931\u8d25\u9519\u8bef\uff0c<\/li>\n\n\n\n
  • \u4ed6\u4eec\u6bd4\u5176\u4ed6\u66ff\u4ee3\u65b9\u6848\u82b1\u8d39\u4e86\u66f4\u591a\u884c\u6765\u7f16\u5199\u76f8\u540c\u7684\u903b\u8f91\uff0c<\/li>\n\n\n\n
  • \u9ed8\u8ba4\u4fc3\u8fdb\u7f3a\u4e4f\u5173\u6ce8\u70b9\u5206\u79bb\uff08\u5982\u679c\u5fd8\u8bb0\u5206\u79bb\uff0c\u4ee3\u7801\u5c06\u5728\u540e\u7eed\u60c5\u51b5\u4e0b\u7ee7\u7eed\u5931\u8d25\uff09\u3002<\/li>\n<\/ul>\n\n\n\n
    \u90a3\u4e48\uff0c\u6709\u4ec0\u4e48\u66f4\u597d\u7684\u9009\u62e9\u5417\uff1f\u4f7f\u7528\u5bf9\u8c61\u6216\u6620\u5c04\u5c06\u6570\u636e\u548c\u903b\u8f91\u5206\u5f00\uff1a<\/p>\n\n\n\n
    \/\/ instead of:\nconst retrieveStatus (statusCode) => {\n  return switch (statusCode) {\n    case 1:\n      return 'Pending';\n    case 2:\n      return 'In Progress';\n    case 3:\n      return 'Completed';\n    case 4:\n      \/\/ Missing break statement, so default it is\n    default:\n      return 'Unknown';\n  }\n}\n\n\/\/ do this:\nconst statuses = {\n  1: 'Pending',\n  2: 'In Progress',\n  3: 'Completed',\n  4: 'Failed',\n  5: 'Unknown'\n};\n\nconst retrieveStatus = (statusCode) => _.get(statuses, statusCode, statuses.5);<\/code><\/pre>\n\n\n\n
    \u8fd9\u79cd\u65b9\u6cd5\u53ef\u8ba9\u60a8\u7684\u4ee3\u7801\u66f4\u7b80\u6d01\u3001\u66f4\u6613\u8bfb\uff0c\u5e76\u5c06\u903b\u8f91\u96c6\u4e2d\u5728\u4e00\u4e2a\u5730\u65b9\u3002\u8fd9\u6837\uff0c\u60a8\u5c31\u65e0\u9700\u5728\u4e00\u4e2a\u51fd\u6570\u4e2d\u6d4f\u89c8\u5927\u91cf\u6848\u4f8b\u6216\u6761\u4ef6\u3002\u5982\u679c\u60a8\u9700\u8981\u67e5\u770b\u6216\u4fee\u6539\u903b\u8f91\uff0c\u53ef\u4ee5\u68c0\u67e5\u4fdd\u5b58\u5907\u9009\u65b9\u6848\u7684\u5bf9\u8c61\u6216\u6620\u5c04\u3002\u5b83\u66f4\u6613\u4e8e\u9605\u8bfb\u4e14\u6269\u5c55\u6027\u66f4\u597d\u3002<\/p>\n\n\n\n
    #3\uff1a\u907f\u514dif\/else if<\/code>\u58f0\u660e<\/strong><\/h2>\n\n\n\n
    \u4ece\u4e0a\u4e00\u70b9\u7ee7\u7eed\u8bf4\uff0c\u60a8\u8fd8\u5e94\u8be5\u907f\u514d\u4f7f\u7528if\/else if<\/mark><\/strong><\/code>\u5757\u3002<\/p>\n\n\n\n
    \u4f7f\u7528if\/else if<\/mark><\/strong><\/code>\u8bed\u53e5\u5f88\u5feb\u5c31\u4f1a\u53d8\u5f97\u7e41\u7410\u4e14\u96be\u4ee5\u9605\u8bfb\uff0c\u5c24\u5176\u662f\u5728\u5904\u7406\u8bb8\u591a\u6761\u4ef6\u65f6\u3002\u5982\u679c\u60a8\u7f16\u5199\u4e86\u591a\u4e2aif\/else if<\/mark><\/strong><\/code>\u5757\uff0c\u8bf7\u91cd\u65b0\u6784\u9020\u5b83\u4eec\u4ee5\u4f7f\u7528\u5bf9\u8c61\u6216\u6620\u5c04\uff0c\u5c31\u50cf\u6211\u4eec\u5bf9\u6848\u4f8b\u6240\u505a\u7684\u90a3\u6837switch<\/mark><\/strong><\/code>\u3002\u5982\u60a8\u6240\u89c1\uff0cobject + getter \u51fd\u6570\u7edf\u6cbb\u4e86\u5b83\u4eec\u3002<\/p>\n\n\n\n
    \u4f8b\u5982\uff0c\u800c\u4e0d\u662f\uff1a<\/strong><\/p>\n\n\n\n
    function getStatusDescription(statusCode) {\n  if (statusCode === 1) {\n    return 'Pending';\n  } else if (statusCode === 2) {\n    return 'In Progress';\n  } else if (statusCode === 3) {\n    return 'Completed';\n  } else if (statusCode === 4) {\n    return 'Failed';\n  } else {\n    return 'Unknown';\n  }\n}<\/code><\/pre>\n\n\n\n
    \u4f7f\u7528\uff1a<\/strong><\/p>\n\n\n\n
    const statuses = {\n  1: 'Pending',\n  2: 'In Progress',\n  3: 'Completed',\n  4: 'Failed',\n  5: 'Unknown'\n};\n\nconst withdrawStatus = (statusCode) => _.get (statuses, statusCode , statuses .5 );<\/code><\/pre>\n\n\n\n
    \u662f\u7684\uff0c\u5b83\u4e0e switch \u8bed\u53e5\u7684\u5757\u76f8\u540c\u3002<\/em><\/p>\n\n\n\n
    #4\uff1a\u4e0d\u8981\u5d4c\u5957 Ifs \u2014 Use \u6241\u5e73\u7ed3\u6784<\/strong><\/h2>\n\n\n\n
    \u5d4c\u5957if<\/code>\u8bed\u53e5\u4f1a\u5f88\u5feb\u4f7f\u4f60\u7684\u4ee3\u7801\u53d8\u5f97\u4e00\u56e2\u7cdf\u3002\u4e0d\u8981\u5c06if<\/code>\u5757\u5806\u53e0\u5728\u4e00\u8d77\uff0c\u800c\u8981\u4f7f\u7528\u6241\u5e73\u7ed3\u6784\u3002\u8bc6\u522b\u6b64\u6a21\u5f0f\u7684\u4e00\u4e2a\u7b80\u5355\u65b9\u6cd5\u662f\u68c0\u67e5\u4f60\u7684\u4ee3\u7801\u662f\u5426\u770b\u8d77\u6765\u50cf\u7bad\u5934\u3002<\/em>\u4f60\u53ef\u4ee5\u901a\u8fc7\u67e5\u770b\u7f29\u8fdb\u6765\u53d1\u73b0\u8fd9\u4e00\u70b9\uff1a\u6bcf\u6b21\u6709\u65b0\u7684\u5757\u65f6\uff0c\u4ee3\u7801\u770b\u8d77\u6765\u90fd\u4f1a\u50cf\u7bad\u5934\u3002\u6bcf\u6b21\u4f60\u6709\u7bad\u5934\u4ee3\u7801\u65f6\uff0c\u4f60\u90fd\u5e94\u8be5\u91cd\u6784\u5b83<\/strong>\u3002\u8ba9\u6211\u4eec\u6765\u770b\u4e00\u4e2a\u4f8b\u5b50\uff1a<\/p>\n\n\n\n
    const statusHandlers = {\npending: (order) => {\n\/\/ do something\n},\nshipped: (order) => {\n\/\/ do something\n},\ndefault: (order) => {\n\/\/ do something\n},\n};\nconst paymentHandlers = {\ncreditCard: (order) => {\n\/\/ do something\n},\npaypal: (order) => {\n\/\/ do something\n},\ndefault: (order) => {\n\/\/ do something\n},\n};\n\nfunction processOrder(order) {\n\/\/ typeguards and validations always at the top\nif (!order) {\nreturn handleInvalidOrder();\n}\n\nconst { status, paymentMethod } = order;\nconst handleStatus = _.get(statusHandlers, status) || statusHandlers.default;\nconst handlePayment = _.get(paymentHandlers, paymentMethod) || paymentHandlers.default;\n\ntry {\nhandleStatus(order);\nhandlePayment(order);\n} catch (e) {\nreturn `Order failed. Reason: ${e.message}`\n}\n\nreturn \"Order processed\";\n}<\/code><\/pre>\n\n\n\n
    \u770b\u5230\u6241\u5e73\u7ed3\u6784\u5982\u4f55\u8ba9\u4e8b\u60c5\u53d8\u5f97\u66f4\u6e05\u6670\u4e86\u5417\uff1f\u6b64\u5916\uff0c\u5c06\u5176\u5206\u89e3\u6210\u66f4\u5c0f\u7684\u90e8\u5206\u4f7f\u6d4b\u8bd5\u53d8\u5f97\u8f7b\u800c\u6613\u4e3e\uff0c\u5e76\u5141\u8bb8\u60a8\u5c06\u4ee3\u7801\u7ec4\u7ec7\u5230\u4e0d\u540c\u7684\u6587\u4ef6\u4e2d\uff0c\u4ece\u800c\u63d0\u9ad8\u53ef\u8bfb\u6027\u5e76\u4f7f\u4e00\u5207\u4fdd\u6301\u6574\u6d01\u3002<\/p>\n\n\n\n
    \u6b64\u5916\uff0cobject + getter \u51fd\u6570\u518d\u6b21\u8ba9\u6211\u4eec\u7684\u751f\u6d3b\u66f4\u52a0\u8f7b\u677e\u3002\u8fd9\u4e00\u6b21\uff0cgetter \u8fd4\u56de\u4e00\u4e2a\u5b8c\u6574\u7684\u51fd\u6570 \u2014 \u5904\u7406\u7a0b\u5e8f \u2014 \u800c\u4e0d\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u539f\u8bed\u3002<\/p>\n\n\n\n
    #5 \u4e0d\u8981\u4f7f\u7528 let<\/strong><\/h2>\n\n\n\n
    \u81ea ES6 \u4ee5\u6765\uff0c\u5f15\u5165\u4e86let<\/code>\u548cconst<\/code>\u6765\u66ff\u4ee3var<\/code>\u53d8\u91cf\u5b9a\u4e49\u3002\u8bf4\u5b9e\u8bdd\uff0c\u8fd9\u5f88\u68d2\u3002\u4f46\u662f\uff0clets<\/code>\u5e94\u8be5\u5f88\u5c11\u4f7f\u7528\u3002\u540c\u6837\uff0c\u6240\u6709\u9012\u5f52\u51fd\u6570\u90fd\u53ef\u4ee5\u7528\u5faa\u73af\u548c\u663e\u5f0f\u5806\u6808\u6765\u5b9e\u73b0\uff0c\u6240\u6709let<\/code>\u58f0\u660e\u90fd\u53ef\u4ee5\u91cd\u65b0\u5b9a\u4e49\u4e3aconst<\/code>\u3002<\/p>\n\n\n\n
    \u8ba9\u6211\u4eec\u770b\u4e00\u4e2a\u4f8b\u5b50\u3002\u4ee5\u4e0b\u51fd\u6570\u5904\u7406\u8868\u4e2d\u7684\u6392\u5e8f\u3002\u5b83\u63a5\u6536\u5e94\u6309\u5176\u6392\u5e8f\u7684\u5b57\u6bb5\u548c\u65b9\u5411\u3002\u5f53\u5b83\u6536\u5230\u4e00\u4e2a\u65b0\u5143\u7d20\u65f6\uff0c\u5982\u679c\u5176fieldName<\/code>\u4e0d\u540c\uff0c\u5b83\u5e94\u8be5\u5c06\u6392\u5e8f\u91cd\u7f6edirection<\/code>\u4e3a\u540e\u4ee3\uff0c\u65e0\u8bba\u5b83\u5728\u8be5\u5b57\u6bb5\u4e0a\u6536\u5230\u4ec0\u4e48\u6709\u6548\u8f7d\u8377\u3002\u4f46\u5982\u679c\u76f8\u540cfieldname<\/code>\uff0c\u5219\u5e94\u4f7f\u7528\u65b0\u7684\u6392\u5e8f\u65b9\u5411\uff1a<\/p>\n\n\n\n
    type Direction: 'asc' | 'desc'\n\ntype SortOptions {\n  fieldName: string;\n  direction: Direction;\n}\n\nconst sortList = (\n  { newOptions, currentOptions }: { newOptions: SortOptions, currentOptions: SortOptions }\n): SortOptions => {\n  let sortingDirection: Direction;\n\n  if (currentOptions.fieldName !== newOptions.fieldName) {\n    sortingDirection = 'desc';\n  } else {\n    sortingDirection = newOptions.direction;\n  }\n\n  return {\n    fieldName: newOptions.fieldName,\n    direction: sortingDirection,\n  };\n};<\/code><\/pre>\n\n\n\n
    \u6ca1\u5565\u4e0d\u597d\uff0c\u5bf9\u5427\uff1f\u4f46\u662f\u5982\u679c\u6211\u4eec\u5220\u9664\u58f0\u660elet<\/code>\u5e76\u76f4\u63a5\u4f7f\u7528if<\/code>\/else<\/code>\u5462\uff1f<\/p>\n\n\n\n
    type Direction = 'asc' | 'desc';\n\ninterface SortOptions {\n  fieldName: string;\n  direction: Direction;\n}\n\nconst sortList = (\n  { newOptions, currentOptions }: { newOptions: SortOptions, currentOptions: SortOptions }\n): SortOptions => {\n\n  const newDirection = currentFieldName !== newFieldName ? 'desc' : newOptions.direction\n\n  return {\n    fieldName: newOptions.fieldName,\n    direction: newDirection,\n  };\n};<\/code><\/pre>\n\n\n\n
    \u6709\u65f6\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528\u5176\u4ed6\u8bed\u6cd5\uff08\u4f8b\u5982\u4e09\u5143\u8fd0\u7b97\u7b26\uff09\u91cd\u5199\u5b83\u3002\u5728\u5176\u4ed6\u60c5\u51b5\u4e0b\uff0c\u60a8\u9700\u8981\u5c06\u5176\u5916\u5305\u7ed9\u53e6\u4e00\u4e2a\u51fd\u6570\u3002\u4f46\u8fd9\u4e0d\u662f\u5f88\u68d2\u5417\uff1f\u5982\u679c\u60a8\u5c06\u5176\u62c6\u5206\u4e3a\u53e6\u4e00\u4e2a\u51fd\u6570\uff0c\u60a8\u7684\u4ee3\u7801\u5c06\u66f4\u597d\u5730\u9075\u5faa SRP \u539f\u5219\uff0c\u5e76\u4e14\u53d8\u5f97\u66f4\u6613\u4e8e\u6d4b\u8bd5\u3001\u9605\u8bfb\u548c\u7ef4\u62a4\u3002<\/p>\n\n\n\n
    \uff036 \u4e0d\u8981\u4f7f\u7528 else\uff0c\u800c\u8981\u5c3d\u65e9\u8fd4\u56de<\/strong><\/h2>\n\n\n\n
    \u6ca1\u4ec0\u4e48\u95ee\u9898else<\/code>\uff0c\u4f46\u5c3d\u65e9returns<\/code>\u8fd4\u56de\u53ef\u4ee5\u4f7f\u60a8\u7684\u4ee3\u7801\u66f4\u6e05\u6670\u3001\u66f4\u6613\u8bfb\u3002\u5c3d\u65e9\u8fd4\u56de\u6709\u52a9\u4e8e\u907f\u514d\u5d4c\u5957\u6761\u4ef6\u5e76\u4f7f\u5176\u66f4\u6613\u4e8e\u7406\u89e3\uff0c\u4ece\u800c\u964d\u4f4e\u4ee3\u7801\u7684\u590d\u6742\u6027\u3002\u8ba9\u6211\u4eec\u770b\u4e00\u4e2a\u4f8b\u5b50\uff1a<\/p>\n\n\n\n
    const calculateResult = (input: number): number => {\n  let result: number;\n\n  if (input > 10) {\n    result = input * 2;\n  } else {\n    result = input + 5;\n  }\n\n  return result;\n};<\/code><\/pre>\n\n\n\n
    \u4f7f\u7528\u63d0\u524d\u8fd4\u56de\u540e\uff1a<\/p>\n\n\n\n
    const calculateResult = (input: number): number => {\n  if (input > 10) {\n    return input * 2;\n  }\n\n  return input + 5;\n};<\/code><\/pre>\n\n\n\n
    \u65e9\u671f\u8fd4\u56de\u5141\u8bb8\u60a8\u63d0\u524d\u5904\u7406\u8fb9\u7f18\u60c5\u51b5\u6216\u7279\u6b8a\u6761\u4ef6\uff0c\u4ece\u800c\u4f7f\u4e3b\u8981\u903b\u8f91\u66f4\u7b80\u6d01\u3001\u66f4\u96c6\u4e2d\u3002<\/p>\n\n\n\n
    Wrapping up<\/strong><\/h3>\n\n\n\n
    \u6bcf\u5f53\u4f60\u770b\u5230\uff1a<\/p>\n\n\n\n