資訊專欄INFORMATION COLUMN
簡介
短路運(yùn)算、逗號運(yùn)算、簡化條件語句、初始化小技巧
昨天一個同學(xué)在 URL 大爆炸 問了我一個問題：這是什么寫法 (data[key] = value, data) 。平時在寫文章的時候會把這些技巧稍微提示一下，認(rèn)為大家都知道這些技巧，引起了小二的自我反省。
希望大家可以一起成長，都不掉隊。
可能很多人都了解這些方法了,如果懂的同學(xué)就溫故知新，不懂的同學(xué)咱們迎頭追上。由于是個人常用技巧可能并不是最好的，如果有知道的同學(xué)也可以提出來一起成長。
短路運(yùn)算只有當(dāng)?shù)谝粋€運(yùn)算數(shù)的值無法確定邏輯運(yùn)算的結(jié)果時，會按照順序?qū)κＯ逻\(yùn)算數(shù)進(jìn)行求值。一起回憶初中常背的一句口訣：一真即真,一假即假。
一真即真一真即真 指的是 || 或運(yùn)算符，當(dāng)一個值為真并停止對后面的判斷。
默認(rèn)值function test(name) {
name = name || "Bar" ;
console.log(name)
}
// 輸出 Bar
console.log(test());
當(dāng)然也可以用 ES6 的 spread 語法來完成默認(rèn)值，關(guān)于更多函數(shù)參數(shù)技巧可以查看 函數(shù)騷操作。不支持 ES6 時等需要默認(rèn)值操作時，||一個值得使用的小技巧。
簡化條件語句在開發(fā)是時候，偶爾會遇到只有一行代碼的條件語句：
if(!name) {
initName()
}
不知道同學(xué)會不會和我一樣會覺得這樣寫不好看，這里可以利用 || 來簡化代碼：
name || initName()一假即假
一假即假 指的是 && 或運(yùn)算符，當(dāng)一個值為假時則會停止判斷，為真時則會一直判斷下去。
默認(rèn)值在取一些對象屬性的時候，對象屬性有可能為 null 或者 undefind 則會出現(xiàn)錯誤：
const data = {
name: "xiaoer",
age: 18,
company: null
}
// 拋出錯誤: Uncaught TypeError: Cannot read property "name" of null
console.log(data.company.name)
在這里 && 搭配 || 使用可以寫出更實(shí)用的默認(rèn)值操作：
const data = {
name: "xiaoer",
age: 18,
company: null
}
const name = data.company && data.company.name || "no name";
簡化條件語句
在開發(fā)是時候，偶爾會遇到只有一行代碼的條件語句：
// 假設(shè)后端返回的用戶數(shù)據(jù)為 data
const data = {
name: "xiaoer",
age: 18,
company: null
}
if (data.company && data.company.name) {
initCompany();
}
&& 和 || 一樣也可以用來簡化條件語句：
data.company && data.company.name && initCompany();逗號運(yùn)算符 for 循環(huán)
在使用 for 循環(huán)的時候，可能不止需要迭代一個參數(shù)，可以利用逗號表達(dá)式：
let i = 0, j = 0, times = 5;
for (let i = 0, j = 0; i < times; i++, j++, j++){
console.log(i, j);
}
i:0, j:0 i:1, j:2 i:2, j:4 i:3, j:6 i:4, j:8語句賦值
有時候會需要一次聲明多個變量：
const a = 0,
b = 1,
c = 2;
// 輸出 a, b, c
console.log(a, b, c);
// 下面操作都會報錯
// 證明確實(shí)都是 const 常量
a = 2;
b = 1;
c = 1;
簡化語句
在寫一些簡短的函數(shù)時常常寫成下面這樣：
const ins = (x) => {
x++;
return x;
}
[{count: 1}].map((x) => {
x.count++;
return x;
})
如果需要進(jìn)行的操作很多倒是需要寫得詳細(xì)方便他人閱讀，而且開發(fā)并不是一個人。如果是這種一點(diǎn)點(diǎn)操作的時候，可以利用逗號運(yùn)算符來簡化：
const ins = (x) => (x++, x)
[{count: 1}].map((x) => (x.count++, x));
一起成長
在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長。
如果您想讓更多人看到文章可以點(diǎn)個 點(diǎn)贊。
如果您想激勵小二可以到 Github 給個 小星星。
如果您想與小二更多交流添加微信 m353839115。
本文原稿來自 PushMeTop
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109231.html
showImg(https://segmentfault.com/img/remote/1460000018734296?w=900&h=500); 簡介 可讀性、性能、Spread、Reduce 在 優(yōu)雅三連擊 中有同學(xué)提到了 可讀性 這個關(guān)鍵詞，就小二個人的觀點(diǎn) 在某個范圍內(nèi)使用比較常用到的小技巧，可以提升一定的可讀性，文中提到的短路運(yùn)算在初始化變量是提升可讀性的，并且在很多提倡優(yōu)化if 語句...
showImg(https://segmentfault.com/img/remote/1460000018709740?w=900&h=500); 簡介 數(shù)組、初始化、快速生成數(shù)組、內(nèi)存泄露 有時候會需要對數(shù)組進(jìn)行一些初始化，最常用到的便是 for 循環(huán)： let num = []; for (let i = 0; i < 10; i++) { // 做一些其他操作 // 或者返...
showImg(https://raw.githubusercontent.com/pushmetop/resource/master/30-seconds-for-everyday/insert-item-inside-an-array/poster.png); 簡介
showImg(https://segmentfault.com/img/remote/1460000018667432?w=900&h=500); 前言 函數(shù)、參數(shù)、解構(gòu)、優(yōu)雅、可讀性、技巧 不管是調(diào)用第三方庫或者是項(xiàng)目自身的函數(shù)，開發(fā)過程中總少不了函數(shù)。可以說函數(shù)是解放代碼的第一生產(chǎn)力，有的同學(xué)會說了那你把類放在那里了。其實(shí)用函數(shù)和數(shù)據(jù)一樣可以模擬出來類，類更多的是對函數(shù)的歸集和復(fù)用進(jìn)行擴(kuò)充升...
showImg(https://segmentfault.com/img/remote/1460000018771037?w=900&h=500); 簡介 benchmark、基準(zhǔn)測試、jsPerf 在 優(yōu)雅插入數(shù)組 一文中大家最多的評論就是 能不能加個基準(zhǔn)測試。小二不是不喜歡加基準(zhǔn)測試而是現(xiàn)在硬件設(shè)備的性能越來越快了，有時候一些操作不是性能問題的主要原因，當(dāng)然這不是我們不寫出好代碼的理由。 書寫...
閱讀 1188·2023-04-26 00:34
閱讀 3364·2023-04-25 16:47
閱讀 2133·2021-11-24 11:14
閱讀 3113·2021-09-26 09:55
閱讀 3741·2019-08-30 15:56
閱讀 3225·2019-08-29 16:57
閱讀 1918·2019-08-26 13:38
閱讀 2674·2019-08-26 12:22
