1. 程式人生 > 其它 >20個JavaScript簡寫小技巧

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)

有一些內建的方法,如parseIentparseFloat,可以將字串轉為數字,我們也可以通過簡單的在字串值前面提供一個一元運算子+來實現

//常規寫法
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、深拷貝

要對一個多層次的物件實現深拷貝,我們可以遍歷其每個屬性,檢查當前屬性是否包含一個物件,如果是,則遞迴呼叫同一個函式,並將當前屬性(巢狀物件)作為函式的引數傳遞進去。
如果我們的物件不包含functionundefinedNaNDate等值,我們也可以使用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