阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

我喜歡優化。

但如果網站無法在 Internet Explorer 11 瀏覽器中執行,用戶不會關心我的優化程式碼。

我使用Endtest建立自動化測試並在跨瀏覽器雲端上執行它們。

Netflix使用相同的平台來測試他們的網路應用程式。

它甚至被列為某些工作的必備技能。

Endtest確實有一些非常好的功能,例如:

• 跨瀏覽器網格,在 Windows 和 macOS 電腦上執行

• 用於自動化測試的無程式碼編輯器

• 支援網頁應用程式

• 支援本機和混合Android 和iOS 應用程式

• 用於測試執行的無限視訊錄製

• 螢幕截圖比較

• 地理位置

• If 語句

• 循環

• 在測試中上傳文件

• Endtest API,可輕鬆與您的 CI/CD 系統集成

• 進階斷言

• 在真實行動裝置上進行行動測試

• 使用 Endtest Mailbox 進行電子郵件測試

您應該查看文件

以下是 9 個極為強大的 JavaScript 技巧。

1.全部替換

我們知道 string.replace() 函數僅取代第一次出現的位置。

您可以透過在正規表示式末尾新增 /g 來取代所有出現的情況。

var example = "potato potato";
console.log(example.replace(/pot/, "tom")); 
// "tomato potato"
console.log(example.replace(/pot/g, "tom")); 
// "tomato tomato"

2. 提取唯一的值

我們可以使用 Set 物件和 Spread 運算子建立一個僅具有唯一值的新陣列。

var entries = [1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1]
var unique_entries = [...new Set(entries)];
console.log(unique_entries);
// [1, 2, 3, 4, 5, 6, 7, 8]

3. 將數字轉換為字串

我們只需使用帶有一組空引號的串聯運算子即可。

var converted_number = 5 + "";
console.log(converted_number);
// 5
console.log(typeof converted_number); 
// string

4. 將字串轉換為數字

我們需要的只是 + 運算子。

請小心這一點,因為它僅適用於“字串數字”。

the_string = "123";
console.log(+the_string);
// 123

the_string = "hello";
console.log(+the_string);
// NaN

5. 隨機排列陣列中的元素

我每天都在洗牌

var my_list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(my_list.sort(function() {
    return Math.random() - 0.5
})); 
// [4, 8, 2, 9, 1, 3, 6, 5, 7]

6. 展平多維陣列

只需使用 Spread 運算子即可。

var entries = [1, [2, 5], [6, 7], 9];
var flat_entries = [].concat(...entries); 
// [1, 2, 5, 6, 7, 9]

7. 短路條件

讓我們來看這個例子:

if (available) {
    addToCart();
}

並通過簡單地將變數與函數一起使用來縮短它:

available && addToCart()

8. 動態屬性名稱

我一直認為我必須先聲明一個物件,然後才能指派動態屬性。

const dynamic = 'flavour';
var item = {
    name: 'Coke',
    [dynamic]: 'Cherry'
}
console.log(item); 
// { name: "Coke", flavour: "Cherry" }

9. 使用 length 調整陣列大小/清空陣列

我們基本上覆蓋了陣列的長度。

如果我們想要調整陣列的大小:

var entries = [1, 2, 3, 4, 5, 6, 7];  
console.log(entries.length); 
// 7  
entries.length = 4;  
console.log(entries.length); 
// 4  
console.log(entries); 
// [1, 2, 3, 4]

如果我們想清空陣列:

var entries = [1, 2, 3, 4, 5, 6, 7]; 
console.log(entries.length); 
// 7  
entries.length = 0;   
console.log(entries.length); 
// 0 
console.log(entries); 
// []

我認為您正在尋找 JavaScript hack 真的很酷,但是您確定您的 Web 應用程式可以在所有瀏覽器和裝置上正常運作嗎?

您可以使用Endtest快速建立自動化測試並在跨瀏覽器雲端上執行它們。

您甚至無需編寫程式碼即可使用它。

說真的,只需閱讀文件即可。


原文出處:https://dev.to/razgandeanu/9-extremely-powerful-javascript-hacks-4g3p


共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。

阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈