好程式設計師web前端培訓分享九個JavaScript小技巧

　　好程式設計師web 前端培訓分享 九個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 物件和展開運算子，我們可以建立一個具有唯一值的新陣列。

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

　　 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. 展平多維陣列

　　 只需使用展開運算子。

　　 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 調整 / 清空陣列

　　 我們基本上覆蓋了陣列的 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);  

　　 // []