如何使用js操作符優化代碼

這篇文章主要介紹“如何使用js操作符優化代碼”，在日常操作中，相信很多人在如何使用js操作符優化代碼問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何使用js操作符優化代碼”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

可選鏈操作符( ?. )

const UserObj = {
  getAge:()=>{}
};
// ***********************
//1.使用普通的判斷語法
var name = UserObj.info?UserObj.info.name:"";
console.log(name);


//2.使用可選鏈 語法
var name = UserObj.info?.name;
console.log(name);
// 輸出undefined   而不會報錯






// ***********************
//1.使用普通的判斷語法（暫不做函數類型判斷）
var name;
if(UserObj.getName){
 name=UserObj.getName();
}
console.log(name);
// 輸出undefined


//2.使用可選鏈 語法
var name =UserObj.getName?.();
console.log(name);
// 不存在，默認輸出undefined   而不會報錯






// ***********************
// 如果層級較深的話，優勢就很明顯了
const UserObj = {
  logList:[]
};
//1.使用普通的判斷語法
var name;
if(UserObj.logList&&UserObj.logList[0]&&UserObj.logList[0].user&&UserObj.logList[0].user.name){
    name=UserObj.logList&&UserObj.logList[0]&&UserObj.logList[0].user&&UserObj.logList[0].user.name;
}
console.log(name);
// 輸出undefined


//2.使用可選鏈 語法
var name =UserObj.logList?.[0]?.user?.name;
// 輸出undefined 


//這個優勢就很明顯了，所以為什么人家的代碼寫的好，這就是原因

?. 操作符的功能類似于 . 鏈式操作符，不同之處在于，單引用屬性為 (null 或者 undefined) 的情況下不會引起錯誤，。與函數調用一起使用時，如果給定的函數不存在，則返回 undefined

可選鏈操作符( ?. ),允許獲取當前對象的屬性的值，而不必明確當前對象的屬性是否有效(存在)

管道運算符(實驗中的功能)

管道操作符 |>允許以一種易讀的方式去對函數鏈式調用。本質上來說，管道操作符是單參數函數調用的語法糖，它允許你像這樣執行一個調用：

let url = "%21" |> decodeURI;

使用傳統語法寫的話，等效的代碼是這樣的：

let url = decodeURI("%21");

從這個小例子確實看不出啥優勢，但是你看下這個呢?

const getWeChat = (name) => `${name},請關注公眾號【前端人】`;
const getInfo = (name) => `${name},我今年18歲`;
const getName = (title) => title+"鬼哥";


// 普通js語法
getWeChat(getInfo(getName("我的名字叫:")))




// 管道操作符語法
"我的名字叫:" |> getName |> getInfo|> getWeChat; 


// 輸出 我的名字叫:鬼哥,我今年18歲

寫到這，我思考了很久，還是同意說出，使用管道操作符語法，語意上確實更加直觀

~~運算符

【~~】運算符，簡單一點的用法就是可以將一些變量轉化為Number（數字）類型的。

// 將數字類型的字符串轉化為純數字。


// 普通js代碼
var numStr = '123';
console.log(parseInt("123")); 
// 輸出數字類型的123


// `~~`運算符
var numStr = '123';
console.log(~~numStr); 
// 輸出數字類型的123


// ***********************
// 但是如果數據本身錯誤呢?
var numStr = '我不是數字123';
console.log(parseInt("123"));
// 輸出NaN


var numStr = '我不是數字123';
console.log(~~numStr); 
// 輸出數字類型的0


// 這種情況他的優勢就出來了，使用`~~`即使是數據錯誤，但是他返回的數據類型不會影響后續數據格式的處理

到此，關于“如何使用js操作符優化代碼”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！