【譯】9個強大的JavaScript技巧
- 2019 年 12 月 16 日
- 筆記
我喜歡優化！
但是，如果站點無法在用戶的Internet Explorer 11瀏覽器中運行，他們不會在乎我的優化代碼。
我使用Endtest來創建自動測試，並在跨瀏覽器的雲上執行它們。
Netflix使用相同的工具來測試他們的web apps。
你應該查看文檔
下面是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.使用長度調整/清空數組
我們基本上重寫了數組的長度。
如果我們想調整數組：
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技巧真的很酷！
