App下載

怎么使用js操作符【新語(yǔ)法】?jī)?yōu)化代碼?

猿友 2020-09-25 14:04:05 瀏覽數(shù) (2552)
反饋

文章來(lái)源于公眾號(hào):前端人 作者:鬼哥

最近在我在技術(shù)群聊天時(shí),看到有個(gè)小伙伴提出關(guān)于可選鏈語(yǔ)法的問(wèn)題。那這篇文章我們就來(lái)聊一下幾個(gè)js的騷操作(`我認(rèn)為是代碼優(yōu)化技巧)

在很多場(chǎng)景下,使用可選鏈語(yǔ)法來(lái)編碼,是非常有優(yōu)勢(shì)的,尤其是數(shù)據(jù)層級(jí)較深,或者數(shù)據(jù)層級(jí)屬性不明確的時(shí)候,使用可選鏈語(yǔ)法大大簡(jiǎn)化了代碼,和提升代碼效率!

可選鏈操作符( ?. )

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


//2.使用可選鏈 語(yǔ)法
var name = UserObj.info?.name;
console.log(name);
// 輸出undefined   而不會(huì)報(bào)錯(cuò)






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


//2.使用可選鏈 語(yǔ)法
var name =UserObj.getName?.();
console.log(name);
// 不存在,默認(rèn)輸出undefined   而不會(huì)報(bào)錯(cuò)






// ***********************
// 如果層級(jí)較深的話,優(yōu)勢(shì)就很明顯了
const UserObj = {
  logList:[]
};
//1.使用普通的判斷語(yǔ)法
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.使用可選鏈 語(yǔ)法
var name =UserObj.logList?.[0]?.user?.name;
// 輸出undefined 


//這個(gè)優(yōu)勢(shì)就很明顯了,所以為什么人家的代碼寫的好,這就是原因

?. 操作符的功能類似于 . 鏈?zhǔn)讲僮鞣煌幵谟?,單引用屬性?(null 或者 undefined) 的情況下不會(huì)引起錯(cuò)誤,。與函數(shù)調(diào)用一起使用時(shí),如果給定的函數(shù)不存在,則返回 undefined

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

管道運(yùn)算符(實(shí)驗(yàn)中的功能)

管道操作符 |>允許以一種易讀的方式去對(duì)函數(shù)鏈?zhǔn)秸{(diào)用。本質(zhì)上來(lái)說(shuō),管道操作符是單參數(shù)函數(shù)調(diào)用的語(yǔ)法糖,它允許你像這樣執(zhí)行一個(gè)調(diào)用:

let url = "%21" |> decodeURI;

使用傳統(tǒng)語(yǔ)法寫的話,等效的代碼是這樣的:

let url = decodeURI("%21");

從這個(gè)小例子確實(shí)看不出啥優(yōu)勢(shì),但是你看下這個(gè)呢?

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


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




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


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

寫到這,我思考了很久,還是同意說(shuō)出,使用管道操作符語(yǔ)法,語(yǔ)意上確實(shí)更加直觀

~~運(yùn)算符

~~】運(yùn)算符,簡(jiǎn)單一點(diǎn)的用法就是可以將一些變量轉(zhuǎn)化為Number(數(shù)字)類型的。

// 將數(shù)字類型的字符串轉(zhuǎn)化為純數(shù)字。


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


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


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


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


// 這種情況他的優(yōu)勢(shì)就出來(lái)了,使用`~~`即使是數(shù)據(jù)錯(cuò)誤,但是他返回的數(shù)據(jù)類型不會(huì)影響后續(xù)數(shù)據(jù)格式的處理

好了,今天的幾個(gè)代碼優(yōu)化,前端進(jìn)階小技巧就到這里了,下次繼續(xù)!

以上就是W3Cschool編程獅關(guān)于怎么使用js操作符【新語(yǔ)法】?jī)?yōu)化代碼?的相關(guān)介紹了,希望對(duì)大家有所幫助。

0 人點(diǎn)贊