江苏龙网

  1. 主页 > 生活百科 > >

20个常用的JavaScript简写技巧

JavaScript

作者 | Amitav Mishra
译者 | 清风依旧
策划 | 田晓旭
本文发布在 jscurious.com
任何编程语言的简写技巧都能够帮助你编写更简练的代码，让你用更少的代码实现你的目标 。让我们一个个来看看 JAVAScript 的简写技巧吧 。
1. 声明变量
//Longhandlet x;let y = 20;//Shorthandlet x, y = 20;2. 给多个变量赋值
我们可以使用数组解构来在一行中给多个变量赋值 。
//Longhandlet a, b, c;a = 5;b = 8;c = 12;//Shorthandlet [a, b, c] = [5, 8, 12];3. 三元运算符
我们可以使用三元（条件）运算符在这里节省 5 行代码 。
//Longhandlet marks = 26;let result;if(marks >= 30){ result = 'Pass';}else{ result = 'Fail';}//Shorthandlet result = marks >= 30 ? 'Pass' : 'Fail';4. 赋默认值
我们可以使用 OR(||) 短路运算来给一个变量赋默认值，如果预期值不正确的情况下 。
//Longhandlet imagePath;let path = getImagePath();if(path !== null && path !== undefined && path !== '') {  imagePath = path;} else {  imagePath = 'default.jpg';}//Shorthandlet imagePath = getImagePath() || 'default.jpg';5. 与 (&&) 短路运算
如果你只有当某个变量为 true 时调用一个函数，那么你可以使用与 (&&)短路形式书写 。
//Longhandif (isLoggedin) { goToHomepage();}//ShorthandisLoggedin && goToHomepage();当你在 React 中想要有条件地渲染某个组件时，这个与 (&&)短路写法比较有用 。例如：
<div> { this.state.isLoading && <Loading /> } </div>6. 交换两个变量
【20个常用的JavaScript简写技巧】为了交换两个变量，我们通常使用第三个变量 。我们可以使用数组解构赋值来交换两个变量 。
let x = 'Hello', y = 55;//Longhandconst temp = x;x = y;y = temp;//Shorthand[x, y] = [y, x];7. 箭头函数
//Longhandfunction add(num1, num2) {   return num1 + num2;}//Shorthandconst add = (num1, num2) => num1 + num2;参考:JavaScript Arrow function
https://jscurious.com/javascript-arrow-function/
8. 模板字符串
我们一般使用 + 运算符来连接字符串变量 。使用 ES6 的模板字符串，我们可以用一种更简单的方法实现这一点 。
//Longhandconsole.log('You got a missed call from ' + number + ' at ' + time);//Shorthandconsole.log(`You got a missed call from ${number} at ${time}`);9. 多行字符串
对于多行字符串，我们一般使用 + 运算符以及一个新行转义字符（n） 。我们可以使用 (`) 以一种更简单的方式实现 。
//Longhandconsole.log('JavaScript, often abbreviated as JS, is an' + 'programming language that conforms to the n' +'ECMAScript specification. JavaScript is high-level,n' +'often just-in-time compiled, and multi-paradigm.' );//Shorthandconsole.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.`);10. 多条件检查
对于多个值匹配，我们可以将所有的值放到数组中，然后使用indexOf()或includes()方法 。
//Longhandif (value === 1 || value === 'one' || value === 2 || value === 'two') {     // Execute some code}// Shorthand 1if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {    // Execute some code}// Shorthand 2if ([1, 'one', 2, 'two'].includes(value)) {    // Execute some code}11. 对象属性复制
如果变量名和对象的属性名相同，那么我们只需要在对象语句中声明变量名，而不是同时声明键和值 。JavaScript 会自动将键作为变量的名，将值作为变量的值 。
let firstname = 'Amitav';let lastname = 'Mishra';//Longhandlet obj = {firstname: firstname, lastname: lastname};//Shorthandlet obj = {firstname, lastname};12. 字符串转成数字
有一些内置的方法，例如parseInt和parseFloat可以用来将字符串转为数字 。我们还可以简单地在字符串前提供一个一元运算符 (+) 来实现这一点 。


推荐阅读


上一篇：jojo里的经典台词日语?jojo里的经典台词谐音

下一篇：连上 Wi-Fi 就能上网了吗？健全家庭网络需要这些设备