每日 30 秒 ⏱ 優雅三連擊

簡介

短路運算、逗號運算、簡化條件語句、初始化小技巧

昨天一個同窗在 URL 大爆炸 問了我一個問題：這是什麼寫法 (data[key] = value, data)。平時在寫文章的時候會把這些技巧稍微提示一下，認爲你們都知道這些技巧，引發了小二的自我檢討。

但願你們能夠一塊兒成長，都不掉隊。

可能不少人都瞭解這些方法了,若是懂的同窗就溫故知新，不懂的同窗我們迎頭追上。因爲是我的經常使用技巧可能並非最好的，若是有知道的同窗也能夠提出來一塊兒成長。

短路運算

只有當第一個運算數的值沒法肯定邏輯運算的結果時，會按照順序對剩下運算數進行求值。一塊兒回憶初中常背的一句口訣：一真即真,一假即假。

一真即真

一真即真 指的是 || 或運算符，當一個值爲真並中止對後面的判斷。

默認值

function test(name) {
    name = name || 'Bar' ;
    console.log(name)
}

// 輸出 Bar
console.log(test());
複製代碼

固然也能夠用 ES6 的 spread 語法來完成默認值，關於更多函數參數技巧能夠查看 函數騷操做。不支持 ES6 時等須要默認值操做時，||一個值得使用的小技巧。

簡化條件語句

在開發是時候，偶爾會遇到只有一行代碼的條件語句：

if(!name) {
    initName()
}
複製代碼

不知道同窗會不會和我同樣會以爲這樣寫很差看，這裏能夠利用 || 來簡化代碼：

name || initName()
複製代碼

一假即假

一假即假 指的是 && 或運算符，當一個值爲假時則會中止判斷，爲真時則會一直判斷下去。

默認值

在取一些對象屬性的時候，對象屬性有可能爲 null 或者 undefind 則會出現錯誤：

const data = {
    name: 'xiaoer',
    age: 18,
    company: null
}

// 拋出錯誤: Uncaught TypeError: Cannot read property 'name' of null
console.log(data.company.name)
複製代碼

在這裏 && 搭配 || 使用能夠寫出更實用的默認值操做：

const data = {
    name: 'xiaoer',
    age: 18,
    company: null
}

const name = data.company && data.company.name || 'no name';
複製代碼

簡化條件語句

在開發是時候，偶爾會遇到只有一行代碼的條件語句：

// 假設後端返回的用戶數據爲 data
const data = {
    name: 'xiaoer',
    age: 18,
    company: null
}

if (data.company && data.company.name) {
    initCompany();
}
複製代碼

&& 和 || 同樣也能夠用來簡化條件語句：

data.company && data.company.name && initCompany();
複製代碼

逗號運算符

for 循環

在使用 for 循環的時候，可能不止須要迭代一個參數，能夠利用逗號表達式：

腳本

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);

// 下面操做都會報錯
// 證實確實都是 const 常量
a = 2;
b = 1;
c = 1;
複製代碼

簡化語句

在寫一些簡短的函數時經常寫成下面這樣：

const ins = (x) => {
    x++;
    return x;
}

[{count: 1}].map((x) => {
    x.count++;
    return x;
})
複製代碼

若是須要進行的操做不少卻是須要寫得詳細方便他人閱讀，並且開發並非一我的。若是是這種一點點操做的時候，能夠利用逗號運算符來簡化：

const ins = (x) => (x++, x)

[{count: 1}].map((x) => (x.count++, x));
複製代碼

交換數據

在不增長變量的狀況下如何調換a和b的值。

let a = 1, b = 2;
a=[b, b=a][0]
複製代碼

固然也能夠用 es6 的 spread 新語法作到：

let a = 1, b = 2;
[a, b]=[b, a]
複製代碼

這裏謝謝 徐永飛 和 老賊同窗 的補充。

其餘

• 小二週末要去看 演唱會 順便和朋友、同事聚一聚，提早更新幾篇文章並非斷更哦。
• 函數參數騷操做 增長了 強制參數 相關內容，能夠回去補更。
  • 原文連接：函數參數騷操做
  • 更新部分連接：函數參數騷操做 - 新增長內容
• 調試黑魔法 增長了 字符串妙用 相關內容，能夠回去補更。
  • 原文連接： 調試黑魔法
  • 更新部分連接：調試黑魔法 - 新增長內容

一塊兒成長

在困惑的城市裏總少不了並肩同行的 夥伴 讓咱們一塊兒成長。

• 若是您想讓更多人看到文章能夠點個 點贊。
• 若是您想激勵小二能夠到 Github 給個 小星星。
• 若是您想與小二更多交流添加微信 m353839115。

本文原稿來自 PushMeTop