JavaScript 简写技巧

1. 声明变量

//普通写法 
let x; 
let y = 20; 

//简写 
let x, y = 20;

2. 给多个变量赋值

//普通写法 
let a, b, c; 
a = 5; 
b = 8; 
c = 12;
 
//简写 
let [a, b, c] = [5, 8, 12];

3. 三元运算符

//普通写法 
let marks = 26; 
let result; 
if(marks >= 30){
 result = 'Pass'; 
}else{ 
 result = 'Fail'; 
} 
//简写 
let result = marks >= 30 ? 'Pass' : 'Fail';

4. 多值匹配

//普通写法 
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)) { // 包含则返回 true，否则返回false。
      // Execute some code 
}

5. 字符串转数字

//普通写法 
let total = parseInt('453');
let average = parseFloat('42.6');

//简写 
let total = +'453';
let average = +'42.6';

6. 多次重复一个字符串

//普通写法 
let str = '';
for (let i = 0; i < 5; i++) {
    str += 'Hello ';
}
console.log(str); // Hello Hello Hello Hello Hello 

//简写 
'Hello '.repeat(5); // 想要换行只需加换行符即可(helle\n)

7. 查找数组中最大和最小的数

// 我们可以使用for循环遍历数组的每个值并找到最大值或最小值。我们也可以使用Array.reduce()方法在数组中找到最大和最小数。
//简写 
const arr = [2, 8, 15, 4];
Math.max(...arr); // 15 
Math.min(...arr); // 2

8. Array.find

// 前
const pets = [
      {type: 'Dog', name: 'Max'},
      {type: 'Cat', name: 'Karl'},
      {type: 'Dog', name: 'Tommy'}
]

function findDog(name) {
      for(let i = 0; i < pets.length; ++i) {
        if(pets[i].type === 'Dog' && pets[i].name === name) {
          return pets[i]
        }
      }
}

// 后
dog2 = pets.find(pet => pet.type === 'Dog' && pet.name === 'Tommy');

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

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

//普通写法 
if (isLoggedin) {
 goToHomepage(); 
} 

//简写 
isLoggedin && goToHomepage();

10. 交换两个变量

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

let x = 'Hello', y = 55; 
//普通写法 
const temp = x; 
x = y; 
y = temp; 

//简写 
[x, y] = [y, x];

11. 箭头函数

//普通写法 
function add(num1, num2) { 
   return num1 + num2; 
} 

//简写 
const add = (num1, num2) => num1 + num2;

12. 模板字面量

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

//普通写法 
console.log('You got a missed call from ' + number + ' at ' + time); 

//简写 
console.log(`You got a missed call from ${number} at ${time}`);

13. 对象属性赋值

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

let firstname = 'Amitav'; 
let lastname = 'Mishra'; 
//普通写法 
let obj = {firstname: firstname, lastname: lastname}; 

//简写 
let obj = {firstname, lastname};

14. for循环

为了遍历数组，我们通常使用传统的for循环。我们可以利用for ... of循环遍历数组。要访问每个值的索引，我们可以使用for ... in循环。

let arr = [10, 20, 30, 40]; 
//普通写法 
for (let i = 0; i < arr.length; i++) { 
  console.log(arr[i]); 
} 
//简写 
//for of loop 
for (const val of arr) { 
  console.log(val); 
} 
//for in loop 
for (const index in arr) { 
  console.log(`index: ${index} and value: ${arr[index]}`); 
}


我们还可以使用for ... in循环遍历对象属性。

let obj = {x: 20, y: 50}; 
for (const key in obj) { 
  console.log(obj[key]); 
}

15. 合并数组

let arr1 = [20, 30]; 
//普通写法 
let arr2 = arr1.concat([60, 80]); 
// [20, 30, 60, 80] 

//简写 
let arr2 = [...arr1, 60, 80]; 
// [20, 30, 60, 80]

16. 从字符串中获取字符

let str = 'jscurious.com'; 
//普通写法 
str.charAt(2); // c 

//简写 
str[2]; // c

这些简写技术中有些可能与项目的使用不相关，但是多学一点总不会错。编码愉快！------ 转载于微信公众号前端新世界