每日 30 秒 ? 優雅三連擊

Rocture 發布于2019-08-26 13:38 / 1902人閱讀

簡介

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

昨天一個同學在 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));

一起成長

在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長。

如果您想讓更多人看到文章可以點個點贊。

如果您想激勵小二可以到 Github 給個 小星星。

如果您想與小二更多交流添加微信 m353839115。

本文原稿來自 PushMeTop

GPU云服務器云服務器云服務器開機要開30秒 python 三連棋優雅上下線 mongodb優雅連接

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109231.html

每日 30 秒 ? 該不該優雅

showImg(https://segmentfault.com/img/remote/1460000018734296?w=900&h=500); 簡介可讀性、性能、Spread、Reduce 在優雅三連擊中有同學提到了可讀性這個關鍵詞，就小二個人的觀點在某個范圍內使用比較常用到的小技巧，可以提升一定的可讀性，文中提到的短路運算在初始化變量是提升可讀性的，并且在很多提倡優化if 語句...

JohnLui 2019-08-26 13:41 評論0 收藏0
每日 30 秒 ? 優雅初始化數組

showImg(https://segmentfault.com/img/remote/1460000018709740?w=900&h=500); 簡介數組、初始化、快速生成數組、內存泄露有時候會需要對數組進行一些初始化，最常用到的便是 for 循環： let num = []; for (let i = 0; i < 10; i++) { // 做一些其他操作 // 或者返...

pcChao 2019-08-26 13:39 評論0 收藏0
每日 30 秒 ? 優雅插入數組

showImg(https://raw.githubusercontent.com/pushmetop/resource/master/30-seconds-for-everyday/insert-item-inside-an-array/poster.png); 簡介

genefy 2019-08-23 16:17 評論0 收藏0
每日 30 秒 ? 函數參數騷操作

showImg(https://segmentfault.com/img/remote/1460000018667432?w=900&h=500); 前言函數、參數、解構、優雅、可讀性、技巧不管是調用第三方庫或者是項目自身的函數，開發過程中總少不了函數。可以說函數是解放代碼的第一生產力，有的同學會說了那你把類放在那里了。其實用函數和數據一樣可以模擬出來類，類更多的是對函數的歸集和復用進行擴充升...

MonoLog 2019-08-23 16:27 評論0 收藏0
每日 30 秒 ? 誰敢與我一戰

showImg(https://segmentfault.com/img/remote/1460000018771037?w=900&h=500); 簡介 benchmark、基準測試、jsPerf 在優雅插入數組一文中大家最多的評論就是能不能加個基準測試。小二不是不喜歡加基準測試而是現在硬件設備的性能越來越快了，有時候一些操作不是性能問題的主要原因，當然這不是我們不寫出好代碼的理由。書寫...

Dionysus_go 2019-08-23 16:18 評論0 收藏0