{"id":12194,"date":"2020-12-09T00:00:00","date_gmt":"2020-12-08T16:00:00","guid":{"rendered":"https:\/\/fgchen.com\/wpedu2\/2020\/12\/09\/%e3%80%90javascript%e3%80%9120%e5%80%8bjavascript%e9%80%9f%e5%af%ab%e6%8a%80%e5%b7%a7\/"},"modified":"2026-03-30T14:40:13","modified_gmt":"2026-03-30T06:40:13","slug":"%e3%80%90javascript%e3%80%9120%e5%80%8bjavascript%e9%80%9f%e5%af%ab%e6%8a%80%e5%b7%a7","status":"publish","type":"post","link":"https:\/\/fgchen.com\/wpedu\/2020\/12\/%e3%80%90javascript%e3%80%9120%e5%80%8bjavascript%e9%80%9f%e5%af%ab%e6%8a%80%e5%b7%a7\/","title":{"rendered":"\u3010JavaScript\u301120\u500bJavaScript\u901f\u5beb\u6280\u5de7"},"content":{"rendered":"

\u53c3\u8003\u8cc7\u6599\u4f86\u6e90\uff1aTop 20 JavaScript Shorthand Techniques that will save your time<\/a><\/h2>\n\n

\u591a\u8b8a\u6578\u7684\u5ba3\u544a<\/h2>\n\n
\/\/\u6a19\u6e96\u5beb\u6cd5 \nlet x; let y = 20; \n\n\/\/\u901f\u5beb\u6cd5 \nlet x, y = 20;<\/code><\/pre>\n\n
\u6307\u5b9a\u591a\u500b\u8b8a\u6578\u7684\u503c (\u89e3\u69cb\u8ce6\u503c)<\/h2>\n\n\u89e3\u69cb\u8ce6\u503c (Destructuring assignment)\uff1a\u628a\u9663\u5217\u6216\u7269\u4ef6\u4e2d\u7684\u8cc7\u6599\u89e3\u958b\u64f7\u53d6\u6210\u70ba\u7368\u7acb\u8b8a\u6578\u3002\n\n
\/\/\u6a19\u6e96\u5beb\u6cd5  \nlet a, b, c; \na = 5; \nb = 8; \nc = 12;\n\n\/\/\u901f\u5beb\u6cd5\nlet [a, b, c] = [5, 8, 12];<\/code><\/pre>\n\n
\u00a0\u4e09\u5143\u904b\u7b97\u5b50<\/h2>\n\n\u53ef\u5c075\u884c\u7684\u7a0b\u5f0f\u78bc\u4ee51\u884c\u7a0b\u5f0f\u78bc\u53d6\u4ee3\n\n
\/\/\u6a19\u6e96\u5beb\u6cd5\nlet number = 26; \nlet isEven; \nif(number % 2){\n isEven = true; \n}else{ \n isEven = false; \n} \n\n\/\/\u901f\u5beb\u6cd5 \nlet isEven = number % 2 ? true : false;<\/code><\/pre>\n\n
\u6307\u5b9a\u9810\u8a2d\u503c<\/h2>\n\n\u6211\u5011\u53ef\u4ee5\u4f7f\u7528 OR(||)<\/code> \u5feb\u6377\u6c42\u503c\u6cd5\u4f86\u6307\u5b9a\u8b8a\u6578\u7684\u9810\u8a2d\u503c\n\n
\/\/\u6a19\u6e96\u5beb\u6cd5\nlet imagePath; \nlet path = getImagePath(); \nif(path !== null && path !== undefined && path !== '') { \n  imagePath = path; \n} else { \n  imagePath = 'default.jpg'; \n} \n\n\/\/\u901f\u5beb\u6cd5 \nlet imagePath = getImagePath() || 'default.jpg';<\/code><\/pre>\n\n
AND(&&) \u5feb\u6377\u6c42\u503c\u6cd5<\/h2>\n\n\u5982\u679c\u5728\u4e00\u500b\u689d\u4ef6\u6210\u7acb\u4e0b\u9032\u884c\u51fd\u5f0f\/\u65b9\u6cd5\u7684\u547c\u53eb\u6642\uff0c\u53ef\u4ee5\u4f7f\u7528 AND(&&)<\/code> \u5feb\u6377\u6c42\u503c\u6cd5\u5c07\u7a0b\u5f0f\u78bc\u6e1b\u5316\u62101\u884c\u3002\n\n
\n\/\/\u6a19\u6e96\u5beb\u6cd5\nif (isLoggedin) {\n goToHomepage(); \n} \n\n\/\/\u901f\u5beb\u6cd5\nisLoggedin && goToHomepage();<\/code><\/pre>\n\n\u53ea\u6709\u5728isLoggedin<\/code> \u662fTrue\u7684\u60c5\u6cc1\u4e0b\uff0c&& \u5f8c\u9762\u7684goToHomepage()<\/code>\u00a0\u624d\u6703\u57f7\u884c\u3002\nA && B \u662fA\u82e5\u662fFALSE\uff0cB\u5c31\u4e0d\u5fc5\u770b\u3002\n\nA || B \u5247\u662fA\u662fTRUE\u7684\u8a71\uff0cB\u5c31\u4e0d\u5fc5\u770b\u3002\n\n
\u4ea4\u63db2\u500b\u8b8a\u6578\u7684\u503c<\/h2>\n\n\u4e00\u822c\u89e3\u6cd5\u662f\u7528\u4e2d\u9593\u8b8a\u6578\u4f86\u4ea4\u63db2\u500b\u8b8a\u6578\u7684\u503c\uff0c\u6211\u5011\u53ef\u4ee5\u4f7f\u7528\u89e3\u69cb\u8ce6\u503c (Destructuring assignment)\u4f86\u4ea4\u63db2\u500b\u8b8a\u6578\u7684\u503c\u3002\n\n
let x = 'Hello', y = 55; \n\n\/\/\u6a19\u6e96\u5beb\u6cd5\nconst temp = x; \nx = y; \ny = temp; \n\n\/\/\u901f\u5beb\u6cd5\n[x, y] = [y, x];<\/code><\/pre>\n\n
Arrow Function\/\u7bad\u982d\u51fd\u5f0f<\/h2>\n\n
\/\/\u6a19\u6e96\u5beb\u6cd5\nfunction add(num1, num2) { \n   return num1 + num2; \n} \n\n\/\/\u901f\u5beb\u6cd5\nconst add = (num1, num2) => num1 + num2;<\/code><\/pre>\n\n
Template Literals\/\u6a23\u7248\u5b57\u7b26<\/h2>\n\n\u4e00\u822c\u6211\u5011\u6703\u4f7f\u7528 + \u9019\u500b\u904b\u7b97\u5b50\u4f86\u9023\u63a5 \u5b57\u4e32\u8207\u8b8a\u6578\uff0cES6\u5c0e\u5165\u4e86\u6a23\u7248\u5b57\u7b26\u53ef\u4ee5\u66f4\u7c21\u55ae\u5730\u505a\u5230\u5b57\u4e32\u8207\u8b8a\u6578\u7684\u9023\u63a5\u3002(\u8ddf\u5b57\u4e32\u7684\u55ae\u5f15\u865f\u4e0d\u540c\uff0c`\u662f1\u65c1\u908a\u7684\u6309\u9375\uff0c\u9019\u500b\u5b57\u5143\u53ebbackticks\u3002)\n\n
\/\/\u6a19\u6e96\u5beb\u6cd5\nconsole.log('You got a missed call from ' + number + ' at ' + time); \n\n\/\/\u901f\u5beb\u6cd5\nconsole.log(`You got a missed call from ${number} at ${time}`);<\/code><\/pre>\n\n
Multi-line String \u591a\u884c\u5b57\u4e32<\/h2>\n\n\u591a\u884c\u5b57\u4e32\u50b3\u7d71\u7684\u65b9\u5f0f\u662f\u4f7f\u7528’n’\u8ddf’+’\u904b\u7b97\u5b50\u4f86\u9054\u6210\uff0cES6\u63d0\u4f9b\u4e86\u4e00\u500b\u8f03\u5feb\u7684\u65b9\u6cd5\uff0c\u4f7f\u7528’`’ backtick\u5b57\u5143\u8207”\u5b57\u5143\u3002\n\n
\/\/\u6a19\u6e96\/\u50b3\u7d71\u5beb\u6cd5 \n\nconsole.log('JavaScript, often abbreviated as JS, is an' + \n'programming language that conforms to the n' + \n'ECMAScript specification. JavaScript is high-level,n' + \n'often just-in-time compiled, and multi-paradigm.' ); \n\n\/\/\u901f\u5beb\u6cd5\nconsole.log(`JavaScript, often abbreviated as JS, \nis a programming language that conforms to the \nECMAScript specification. JavaScript is high-level, \noften just-in-time compiled, and multi-paradigm.`);<\/pre>\n\n
Multiple condition checking \u591a\u689d\u4ef6\u6aa2\u67e5<\/h2>\n\n\u91dd\u5c0d\u591a\u500b\u6578\u503c\u7684\u6bd4\u5c0d\uff0c\u6211\u5011\u53ef\u4ee5\u5c07\u6240\u6709\u7684\u503c\u653e\u5230\u9663\u5217\u88cf\uff0c\u4e26\u4e14\u4f7f\u7528indexOf()\u65b9\u6cd5\uff0c<\/code>\n\n
\/\/\u6a19\u6e96\u5beb\u6cd5\nif (value === 1 || value === 'one' || value === 2 || value === 'two') { \n\/\/ Execute some code \n} \n\n\/\/\u901f\u5beb\u6cd5\nif ([1, 'one', 2, 'two'].indexOf(value) >= 0) { \n\/\/ Execute some code \n}<\/code><\/pre>\n\n
Object Property Assignment\u7269\u4ef6\u5c6c\u6027\u503c\u6307\u5b9a<\/h2>\n\n\u5982\u679c\u7269\u4ef6\u7684\u5c6c\u6027(key)\u8207\u503c(value)\u662f\u4e00\u6a23\u7684\uff0c\u90a3\u9ebc\u5c31\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528let obj = {firstname, lastname};<\/code>JavaScript\u6703\u81ea\u52d5\u5730\u6307\u5b9a\u8207\u5c6c\u6027\u540d\u7a31\u4e00\u6a23\u7684\u503c\u3002\n\n
let firstname = 'Amitav'; \nlet lastname = 'Mishra'; \n\n\/\/\u6a19\u6e96\u5beb\u6cd5\nlet obj = {firstname: firstname, lastname: lastname}; \n\n\/\/\u901f\u5beb\u6cd5\nlet obj = {firstname, lastname};<\/code><\/pre>\n\n
String into a Number\u5b57\u4e32\u81ea\u52d5\u8f49\u6210\u6578\u503c<\/h2>\n\nJavaScript\u6709\u5167\u5efa\u7684parseInt<\/code> \u548c parseFloat<\/code>\u65b9\u6cd5\u5c07\u5b57\u4e32\u8f49\u6210\u6574\u6578\u6216\u6d6e\u9ede\u6578\uff0c\u53ef\u4ee5\u7528 (+)\u00a0 \u5728\u5b57\u4e32\u524d\u9762\uff0c\u53ef\u4ee5\u5f97\u5230\u4e00\u6a23\u7684\u7d50\u679c\u3002\n\n
\/\/\u6a19\u6e96\u5beb\u6cd5\nlet total = parseInt('453'); \nlet average = parseFloat('42.6'); \n\n\/\/\u901f\u5beb\u6cd5\nlet total = +'453'; \nlet average = +'42.6';<\/code><\/pre>\n\n
Repeat a string for multiple times\u91cd\u8986\u5b57\u4e32\u591a\u6b21<\/h2>\n\n\u7c21\u55ae\u4f7f\u7528\u5b57\u4e32\u65b9\u6cd5\u00a0repeat()<\/code>\u00a0\u53ef\u4ee5\u91cd\u8986\u5b57\u4e32\u591a\u6b21\u3002 method we can do it in a single line.\n\n
\/\/\u6a19\u6e96\u5beb\u6cd5\nlet str = ''; \nfor(let i = 0; i < 5; i ++) { \n  str += 'Hello '; \n} \nconsole.log(str); \/\/ Hello Hello Hello Hello Hello \n\n\/\/\u901f\u5beb\u6cd5\n'Hello '.repeat(5);<\/code><\/pre>\n\n
Exponent Power \u6b21\u65b9\/\u4e58\u51aa\/\u6307\u6578\u904b\u7b97<\/h2>\n\n\u4e00\u822c\u6211\u5011\u53ef\u4ee5\u4f7f\u7528Math.pow()<\/code> \u65b9\u6cd5\u53d6\u5f97\u4e00\u500b\u6578\u503c\u7684\u4e58\u51aa\uff0c\u6211\u5011\u53ef\u4ee52\u500b**\u76f4\u63a5\u53d6\u5f97\u6b21\u65b9\u503c\u3002\n\n
\/\/\u6a19\u6e96\u5beb\u6cd5\nconst power = Math.pow(4, 3); \/\/ 64 \n\n\/\/\u901f\u5beb\u6cd5\nconst power = 4**3; \/\/ 64<\/code><\/pre>\n\n
Double NOT bitwise operator (~~) \u7121\u689d\u4ef6\u6368\u53bb\u5c0f\u6578<\/h2>\n\n<\/code>\u5728\u6b63\u6578\u7684\u60c5\u6cc1\u4e0b\uff0c\u525b\u597d\u7b49\u6548\u65bcMath.floor (\u5e95\u4e0b\u7684\u4f8b\u5b50)\n\n
\/\/\u6a19\u6e96\u5beb\u6cd5\nconst floor = Math.floor(6.8); \/\/ 6 \n\n\/\/\u901f\u5beb\u6cd5\nconst floor = ~~6.8; \/\/ 6<\/code><\/pre>\n\n
Find max and min number in array \u627e\u51fa\u4e00\u500b\u9663\u5217\u4e2d\u6700\u5927\u8207\u6700\u5c0f\u7684\u503c<\/h2>\n\n
\/\/\u901f\u5beb\u6cd5\nconst arr = [2, 8, 15, 4]; \nMath.max(...arr); \/\/ 15 \nMath.min(...arr); \/\/ 2<\/code><\/pre>\n\n
For loop<\/h2>\n\nfor...of<\/code>\u00a0\u8fed\u4ee3\u9663\u5217\u88cf\u7684\u503c\n\nfor...in<\/code>\u8fed\u4ee3\u9663\u5217\u7684\u7d22\u5f15\u503c\n\n
let arr = [10, 20, 30, 40]; \n\n\/\/\u6a19\u6e96\u5beb\u6cd5\nfor (let i = 0; i < arr.length; i++) { \n  console.log(arr[i]); \n} \n\/\/\u901f\u5beb\u6cd5\n\/\/for of loop \nfor (const val of arr) { \n  console.log(val); \n} \n\/\/for in loop \nfor (const index in arr) { \n  console.log(arr[index]); \n}<\/code><\/pre>\n\n\u6211\u5011\u53ef\u4ee5\u7528for...in<\/code> \u4f86\u8fed\u4ee3\u4e00\u500b\u7269\u4ef6\u7684\u5c6c\u6027\u3002\n\n
let obj = {x: 20, y: 50}; \nfor (const key in obj) { \n  console.log(obj[key]); \n}<\/code><\/pre>\n\n
Merging of arrays \u9663\u5217\u7684\u5408\u4f75<\/h2>\n\n
let arr1 = [20, 30]; \n\n\/\/\u6a19\u6e96\u5beb\u6cd5\nlet arr2 = arr1.concat([60, 80]); \n\/\/ [20, 30, 60, 80] \n\n\/\/\u901f\u5beb\u6cd5\nlet arr2 = [...arr1, 60, 80]; \n\/\/ [20, 30, 60, 80]<\/code><\/pre>\n\n
Deep cloning of multi-level object \u591a\u5c64\u7269\u4ef6\u7684\u6df1\u5ea6\u589e\u751f(\u8907\u88fd)<\/h2>\n\n\u82e5\u4e00\u500b\u7269\u4ef6\u5305\u542b\u53e6\u4e00\u500b\u7269\u4ef6\uff0c\u53c8\u5305\u542b\u53e6\u4e00\u500b\u7269\u4ef6\uff0c\u9019\u53eb\u591a\u5c64\u7269\u4ef6\uff0c\u8981\u8d70\u8a2a\u9019\u500b\u591a\u5c64\u7269\u4ef6\uff0c\u9700\u8981\u4e00\u500b\u7269\u4ef6\u4e00\u500b\u7269\u4ef6\u8fed\u4ee3\u2026(\u905e\u8ff4)\n\n\u6211\u5011\u53ef\u4ee5\u7528 JSON.stringify()<\/code> \u548c JSON.parse()<\/code> \u4f86\u9054\u5230\u540c\u6a23\u7684\u76ee\u7684\u3002\n\n
let obj = {x: 20, y: {z: 30}}; \n\n\/\/\u6a19\u6e96\u5beb\u6cd5\nconst makeDeepClone = (obj) => { \n  let newObject = {}; \n  Object.keys(obj).map(key => { \n    if(typeof obj[key] === 'object'){ \n      newObject[key] = makeDeepClone(obj[key]); \n    } else { \n      newObject[key] = obj[key]; \n    } \n  }); \n return newObject; \n} \nconst cloneObj = makeDeepClone(obj); \n\n\/\/\u901f\u5beb\u6cd5\nconst cloneObj = JSON.parse(JSON.stringify(obj));<\/code><\/pre>\n\n
Get character from string \u53d6\u5f97\u5b57\u4e32\u4e2d\u7684\u5b57\u5143<\/h2>\n\n
let str = 'jscurious.com'; \n\n\/\/\u6a19\u6e96\u5beb\u6cd5\nstr.charAt(2); \/\/ c \n\n\/\/\u901f\u5beb\u6cd5\nstr[2]; \/\/ c<\/code><\/pre>","protected":false},"excerpt":{"rendered":"
\u53c3\u8003\u8cc7\u6599\u4f86\u6e90\uff1aTop 20 JavaScript Shorthand Techn … <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[266],"tags":[],"class_list":["post-12194","post","type-post","status-publish","format-standard","hentry","category-266"],"_links":{"self":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/12194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/comments?post=12194"}],"version-history":[{"count":1,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/12194\/revisions"}],"predecessor-version":[{"id":13764,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/12194\/revisions\/13764"}],"wp:attachment":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/media?parent=12194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/categories?post=12194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/tags?post=12194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}