20个常用的JavaScript简写技巧

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"任何编程语言的简写技巧都能够帮助你编写更简练的代码，让你用更少的代码实现你的目标。让我们一个个来看看JavaScript的简写技巧吧。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"1. 声明变量"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\/\/Longhand \nlet x; \nlet y = 20; \n\n\n\/\/Shorthand \nlet x, y = 20;"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"2. 给多个变量赋值"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们可以使用数组解构来在一行中给多个变量赋值。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\/\/Longhand \nlet a, b, c; \na = 5; \nb = 8; \nc = 12;\n \n\/\/Shorthand \nlet [a, b, c] = [5, 8, 12];"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"3. 三元运算符"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们可以使用三元（条件）运算符在这里节省 5行代码。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\/\/Longhand \nlet marks = 26; \nlet result; \nif(marks >= 30){\n result = 'Pass'; \n}else{ \n result = 'Fail'; \n} \n\/\/Shorthand \nlet result = marks >= 30 ? 'Pass' : 'Fail';"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"4. 赋默认值"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们可以使用OR(||)短路运算来给一个变量赋默认值，如果预期值不正确的情况下。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\/\/Longhand \nlet imagePath; \nlet path = getImagePath(); \nif(path !== null && path !== undefined && path !== '') { \n imagePath = path; \n} else { \n imagePath = 'default.jpg'; \n} \n\n\n\/\/Shorthand \nlet imagePath = getImagePath() || 'default.jpg';"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"5. 与(&&) 短路运算"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果你只有当某个变量为true时调用一个函数，那么你可以使用"},{"type":"codeinline","content":[{"type":"text","text":"与(&&)"}]},{"type":"text","text":" 短路形式书写。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\/\/Longhand \nif (isLoggedin) {\n goToHomepage(); \n} \n\n\n\/\/Shorthand \nisLoggedin && goToHomepage();"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当你在React中想要有条件地渲染某个组件时，这个"},{"type":"codeinline","content":[{"type":"text","text":"与(&&)"}]},{"type":"text","text":" 短路写法比较有用。例如："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"

{ this.state.isLoading && } "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"6. 交换两个变量"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"为了交换两个变量，我们通常使用第三个变量。我们可以使用数组解构赋值来交换两个变量。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"let x = 'Hello', y = 55; \n\/\/Longhand \nconst temp = x; \nx = y; \ny = temp; \n\n\n\/\/Shorthand \n[x, y] = [y, x];"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"7. 箭头函数"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\/\/Longhand \nfunction add(num1, num2) { \n return num1 + num2; \n} \n\n\n\/\/Shorthand \nconst add = (num1, num2) => num1 + num2;"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"参考: "},{"type":"link","attrs":{"href":"https:\/\/jscurious.com\/javascript-arrow-function\/","title":"","type":null},"content":[{"type":"text","text":"JavaScript Arrow function"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"8. 模板字符串"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们一般使用+运算符来连接字符串变量。使用ES6的模板字符串，我们可以用一种更简单的方法实现这一点。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\/\/Longhand \nconsole.log('You got a missed call from ' + number + ' at ' + time); \n\n\n\/\/Shorthand \nconsole.log(`You got a missed call from ${number} at ${time}`);"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"9. 多行字符串"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"对于多行字符串，我们一般使用+运算符以及一个新行转义字符（\\n）。我们可以使用(`)以一种更简单的方式实现。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\/\/Longhand \nconsole.log('JavaScript, often abbreviated as JS, is a\\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\/\/Shorthand \nconsole.log(`JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm.`);"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"10. 多条件检查"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"对于多个值匹配，我们可以将所有的值放到数组中，然后使用"},{"type":"codeinline","content":[{"type":"text","text":"indexOf()"}]},{"type":"text","text":" 或"},{"type":"codeinline","content":[{"type":"text","text":"includes()"}]},{"type":"text","text":" 方法。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\/\/Longhand \nif (value === 1 || value === 'one' || value === 2 || value === 'two') { \n \/\/ Execute some code \n} \n\n\n\/\/ Shorthand 1\nif ([1, 'one', 2, 'two'].indexOf(value) >= 0) { \n \/\/ Execute some code \n}\n\/\/ Shorthand 2\nif ([1, 'one', 2, 'two'].includes(value)) { \n \/\/ Execute some code \n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"11. 对象属性复制"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果变量名和对象的属性名相同，那么我们只需要在对象语句中声明变量名，而不是同时声明键和值。JavaScript会自动将键作为变量的名，将值作为变量的值。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"let firstname = 'Amitav'; \nlet lastname = 'Mishra'; \n\/\/Longhand \nlet obj = {firstname: firstname, lastname: lastname}; \n\n\n\/\/Shorthand \nlet obj = {firstname, lastname};"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"12. 字符串转成数字"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}