20个JavaScript简写小技巧

1、声明多个变量

// 常规写法
let x；
let y = 20；
// 简写
let x，y = 20；

2、为多个变量赋值

使用数组解构赋值

// 常规写法
let a，b，c；
a = 5；
b = 8；
c = 10；
// 简写
let [a,b,c] = [5,8,10]

3、恰当使用三元运算符

// 常规写法
let marks = 26;
let result;
if(marks >=30){
result = `Pass`;
}else{
result = `Fail`;
}
// 简写
let result = marks >= 30 ? `Pass` : `Fail`

4、指定默认值

// 常规写法
let inagePath
let path = getImagrPath()
if(path !== null && path !==undefined && path !==''){
   inagePath = path;
   }else{
     inagePath ='default.jpg';
   }
// 简写
let imagrPath = imagrPath() || 'default.jpg'

5、AND (&&)短路求值

如果只在一个变量为真的情况下才调用某个函数，那么你可以用「AND(&&)短路求值」的逻辑来代替.

// 常规写法
if（isLoggedin）{
 goToHomepage();
 }
 // 简写
 isLoggedin &&  goToHomepage()```

6、交换两个变量的值
当我们想交换两个变量的值时，经常会采取引入第三个变量的方法。其实我们可以通过数组解构赋值轻松地交换两个变量

```javascript
let x = 'hello',y=55;
// 常规写法
const temp = x;
x=y;
y=temp;
// 简写
[x,y] = [y,x]

7、善用箭头

// 常规写法
function add(num1,num2){
 return num1 + num2;
 }
 // 简写
 const add = (num1,num2)=> num1+num2

8、模板字符串

我们通常使用+运算符来连接字符串和其他类型的变量。有了ES6模板字符串，我们可以用更简单的方式来组合字符串。

// 常规写法
console.log('you got a missde call from' + number + 'at' + time)
// 简写
console.log(`you got a missed call from ${number} at ${time}`)

9、多行字符串

对于多行字符串，我们通常使用+操作符和一个新的换行符（\n）拼接实现。其实我们可以通过使用反引号（`）来更简单地实现。

// 常规写法
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 jus-in-time compiled,and multi-paradigm.`)

10、多条检查

对于多值匹配，我们可以把所有的值放在数组中，使用数组提供的indexOf()或includes()方法来简写

// 常规写法
if(value === 1|| value === 'one'|| value === 2 || value ==='two'){
   //执行一些代码
}
// 简写1
if( [1,'one',2,'two'].indexOf(value) >= 0){//执行的代码}
// 简写2
if([1,'one',2,'two'].includes(value)){//执行的代码}

11、对象属性的分配

如果变量名和对象的属性名相同，我们可以在对象中只写变量名，而不同时，需要写出属性名和属性值，JavaScript会自动将属性名设置为与变量名相同，并将属性值分配给变量值。

let first = 'Amitav'
let last = 'Mishra'
// 常规写法
let obj = {first:first,last:last};
// 简写
let obj = {first,last}

12、字符串（String）转为数字（Number）

有一些内置的方法，如parseIent和parseFloat，可以将字符串转为数字，我们也可以通过简单的在字符串值前面提供一个一元运算符+来实现

// 常规写法
let total = parseInt('123')
let average = parseFloat('42.6')
// 简写
let total = +'123'
let average = +'42.6'

13、多次重复的字符串

要将一个字符串重复指定的次数，你可以使用for循环，但使用repeat()方法，我们可以在一行中完成。

// 常规写法
let str = '';
for(let i = 0;i<5;i++){
   str += 'hello ';
}
console.log(str);//hello hello hello hello hello 
// 简写
'hello '.repeat(5)

14、幂的力量

我们可以使用Math.pow()方法来求一个数字的幂，有一个更简单的方法，那就是双星号（**）

// 常规写法
const power = Math.pow(4,3);//64
// 简写
conet power = 4**3;//64

15、双NOT位运算符（~~）？

双NOT位运算符是Math.floor()方法的替代品。

// 常规写法
const floor = Math.floor(6.8);//6
// 简写
const floor = ~~6.8;//6

16、找出数组中的最大最小值

我们可以使用for循环来遍历数组，找到最大值或者最小值，也可以使用Array.reduce()方法来寻找数组中的最大和最小值。

// 简写
const arr = [2,3,4,5]
Math.max(...arr);//最大值 5
Math.min(...arr);//最小值 1```

17、关于For循环

要遍历一个数组，我们通常使用传统的for循环，我们可以利用for…of的方法来遍历一个数组，如果要访问数组每个值的索引，我们可以使用for…in循环。

let arr = [10,20,30,40];
// 常规写法，for循环
for （let i= 0；i<arr.length; i++）{
  console.log(arr[i]);
}
// 简写
// for...of循环
for(const val of arr){
   console.log(val);
}
// for...in循环
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])
}

18、数组的合并

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

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

19、深拷贝

要对一个多层次的对象实现深拷贝，我们可以遍历其每个属性，检查当前属性是否包含一个对象，如果是，则递归调用同一个函数，并将当前属性（嵌套对象）作为函数的参数传递进去。
如果我们的对象不包含function、undefined、NaN或Date等值，我们也可以使用JSON.stringify()和JSON.parse()来实现
如果我们的对象是单层对象，没有嵌套对象，那么我们也可以使用展开操作符（…）进行深拷贝。

let obj = {x: 20, y: {z: 30}};
// 常规写法，递归
const makeDeepClone = (obj) =>{
  let new Object = {}
  Object.keys(obj).map(key =>{
     if(typeof obj[key] === 'object'){
       newObject[key] = makeDeepClone(obj[key]);
     }else{
        newObject[key] = obj[key];
     }
   });
   return newObject;
}
const cloneObj = makeDeepClone(obj);
// 特殊情况下（对象中属性值没有函数、undefined或NaN的情况下）的简写
const cloneObj = JSON.parse(JSON.stringify(obj));
// 单层对象（无嵌套对象）情况下的简写
let obj = {x: 20, y: 'hello'};
const cloneObj = {...obj}

20、获取字符串中的某个字符

let str = 'jscurious.com';
// 常规写法
str.charAt(2);//c
// 简写
str[2];//c