2. 给多个变量赋值

  我们可以通过数组解构给在同一行中的多个变量赋值。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//普通写法  let a, b, c;  a = 5;  b = 8;  c = 12;   //简写  let [a, b, c] = [5, 8, 12]; </pre>

  3. 三元运算符

  我们可以用三元（条件）运算符节省5行代码。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//普通写法  let marks = 26;  let result;  if(marks >= 30){  result = 'Pass';  }else{   result = 'Fail';  }  //简写  let result = marks >= 30 ? 'Pass' : 'Fail'; </pre>

  4. 分配默认值

  如果发现期望值为false，则可以使用OR(||)短路求值法为变量分配默认值。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//普通写法  let imagePath;  let path = getImagePath();  if(path !== null && path !== undefined && path !== '') {    imagePath = path;  } else {    imagePath = 'default.jpg';  }  //简写  let imagePath = getImagePath() || 'default.jpg'; </pre>

  5. AND(&&)短路求值法

  如果仅在变量为true的情况下才调用函数，则可以使用AND(&&)短路求值法作为替代方法。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//普通写法  if (isLoggedin) {  goToHomepage();  }  //简写  isLoggedin && goToHomepage(); </pre>

  当你想要根据条件来渲染组件时，AND(&&)短路求值简写方式在React中更有用。例如：

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"> { this.state.isLoading &&  }  </pre>

  6. 交换两个变量

  要交换两个变量，我们经常要用到第三个变量。但是，我们也可以通过数组解构赋值，从而轻松地交换变量。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">let x = 'Hello', y = 55;  //普通写法  const temp = x;  x = y;  y = temp;  //简写  [x, y] = [y, x]; </pre>

  7. 箭头函数

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//普通写法  function add(num1, num2) {     return num1 + num2;  }  //简写  const add = (num1, num2) => num1 + num2; </pre>

  8. 模板字面量

  我们通常使用+运算符将字符串值与变量连接在一起。但是，我们也可以使用ES6模板字面量这个更简单的实现方式。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//普通写法  console.log('You got a missed call from ' + number + ' at ' + time);  //简写  console.log(You got a missed call from ${number} at ${time}); </pre>

  9. 多行字符串

  对于多行字符串，我们通常将+运算符与换行转义符(n)配合使用。但是通过使用反引号(`)，我们可以更轻松地完成此操作。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//普通写法  console.log('JavaScript, often abbreviated as JS, is a\n' +             'programming language that conforms to the \n' +  'ECMAScript specification. JavaScript is high-level,\n' +  'often just-in-time compiled, and multi-paradigm.' );  //简写  console.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.) </pre>

  10. 多条件检查

  对于多值匹配，我们可以将所有的值放入数组中，并使用indexOf()或includes()方法。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//普通写法  if (value === 1 || value === 'one' || value === 2 || value === 'two') {       // Execute some code  }  //简写 1 if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {      // Execute some code  } //简写 2 if ([1, 'one', 2, 'two'].includes(value)) {      // Execute some code  } </pre>

  11. 对象属性赋值

  如果变量名和对象键名相同js 匹配换行符，那么我们只需在对象字面量中提及变量名即可，而不需要键和值。JavaScript会自动给与变量名相同的键设置变量值，例如：

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">let firstname = 'Amitav';  let lastname = 'Mishra';  //普通写法  let obj = {firstname: firstname, lastname: lastname};  //简写  let obj = {firstname, lastname}; </pre>

  12. 将字符串转换为数字

  为了将字符串转换为数字，我们可以使用诸如parseInt和parseFloat之类的内置方法。我们还可以通过在字符串值前面简单地添加一元运算符（+）来实现此目的。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//普通写法  let total = parseInt('453');  let average = parseFloat('42.6');  //简写  let total = +'453';  let average = +'42.6'; </pre>

  13. 多次重复一个字符串

  若字符串要重复指定的次数，可以使用for循环。但是，使用repeat()方法，一行代码就可以搞定了。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">//普通写法  let str = '';  for(let i = 0; i  {      if(typeof obj[key] === 'object'){        newObject[key] = makeDeepClone(obj[key]);      } else {        newObject[key] = obj[key];      }    });   return newObject;  }  const cloneObj = makeDeepClone(obj);  //简写  const cloneObj = JSON.parse(JSON.stringify(obj)); //Shorthand for single level object let obj = {x: 20, y: 'hello'}; const cloneObj = {...obj}; </pre>

  改进：如果对象属性包含函数、undefined或NaN作为值，则简写方法JSON.parse(JSON.stringify(obj))不起作用。因为当JSON.stringify对象时，包含函数、undefined或NaN作为值的属性将从对象中删除。

  因此，当对象仅包含字符串和数字时，请使用JSON.parse(JSON.stringify(obj))。

  20. 从字符串中获取字符

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">let str = 'jscurious.com';  //普通写法  str.charAt(2); // c  //简写  str[2]; // c </pre>

  这些简写技术中有些可能与项目的使用不相关，但是多学一点总不会错。编码愉快！

  （文本完）