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