15個提高Javascript開發の技巧

語言: CN / TW / HK

劈柴不照紋,累死劈柴人。上學的時候就總有那些“小怪物們”總能解出來難題, 總能最快的完成作業,總能輕鬆考個的好成績,還不耽誤下課一起玩。怎麼回事兒?人家有技巧啊!那現在幹開發了,你想不想成為“小怪物”?來,我給你介紹!

這篇文章中,我將分享15 個關於JavaScript 的優秀技巧。這些技巧或者你可能已經掌握了,不過沒有關係,這個技巧也不可能適用所有人,我分享的目的是把這些有趣好玩又便捷的技巧讓更多人知道,以及在需要的時候,可以想到它們。

現在,我們一起來看看這些技巧。

1.判斷空和未定義

我們很快就會在 JavaScript 中學到的一件事是,並非一切都像它看起來的那樣,並且在像這樣的動態語言中,變量可能會以多種方式導致你出現問題。可以進行的一個非常常見的測試是檢查變量是否為空或未定義,甚至“空”,如下例所示:

js let username; if (name !== null || name !== undefined || name !== '') {    userName = name; } else {    userName = "";

進行相同評估的更簡單方法是:

js let userName = name || "";

如果你不相信,請測試一下!

2.數組定義

所以你必須創建一個 Array 對象,然後用它的元素填充它,對吧?你的代碼可能看起來像這樣:

js let a = new Array();  a[0] = "s1";  a[1] = "s2";  a[2] = "s3";

在一行中做同樣的事情怎麼樣?

js let a = ["s1", "s2", "s3"]

挺好看的吧!

注意:我知道這個技巧更簡單,但對我來説很簡單,它可能會幫助一些從其他編程語言開始的人。

3.三元運算符

著名的“單行 if/else”,三元運算符對於 Java 和 C# 等語言對於許多程序員來説已經是老熟人了。它也存在於 JS 中,並且可以像這樣輕鬆地轉換代碼塊:

js let big; if (x > 10) {     big = true; } else {     big = false; }

在這:

js let big = x > 10 ? true : false;

或者更簡單:

let big = x > 10; 但它也適用於函數調用嗎?如果我有兩個不同的函數,並且我想在 if 為真時調用一個,在 if 為假的情況下調用一個,通常你會執行以下操作:

```js function x() { console.log('x') }; function y() { console.log('y') };

let z = 3; if (z == 3) {     x(); } else {     y(); } ```

但是,你也可以使用三元進行相同的函數調用:

```js function x() { console.log('x') }; function y() { console.log('y') };

let z = 3; (z==3 ? x : y)(); // Shortcut ```

另外,值得一提的是測試變量是否為真的 ifs,一些程序員仍然這樣做:

js if (likeJs === true)

當他們可以這樣做時:

js if (likeJs)

4.聲明變量

是的,即使是變量的聲明也有其怪癖。雖然這不是一個祕密,但你仍然會看到很多程序員做出這樣的聲明:

js let x; let y; let z = 3;

他們什麼時候可以這樣做:

js let x, y, z = 3;

5.使用正則表達式

當涉及到文本分析和驗證以及某些類型的網絡爬蟲的數據提取時,正則表達式是創建優雅而強大的代碼的好工具。

你可以在以下鏈接中瞭解有關如何使用正則表達式的更多信息:

https://developer.mozilla.org/enUS/docs/Web/JavaScript/Guide/Regular_Expressions

https://regexr.com/

https://regex101.com/

6.charAt() 快捷鍵

你只想從一個字符串中選擇一個字符,在一個特定的位置,對吧?我敢打賭,你首先想到的是使用 charAt 函數,如下所示:

js "string".charAt(0);

但是得到這個,通過記住 String 是一個字符數組的類比,你會得到相同的結果:

js "string"[0]; // Returns 's'

7.以 10 為底的冪

這只是對 Base-10 指數數或充滿零的著名數字的一種更精簡的表示法。對於數學比較接近的人來説,看到其中一個不會太驚訝,但是一個數字 10000 在 JS 中可以很容易地被 1e4 替換,即 1 後跟 4 個零,如下所示:

js for (let i = 0; i < 1e4; i++) {

8.模板文字

這種語義特性是 ECMAScript 版本 6 或更高版本所獨有的,並且極大地簡化了讀取變量集中的字符串連接。例如,下面的串聯:

js const question = “My number is “ + number + “, ok?”

這個很簡單,你可能做了更糟糕的連接。從 ES6 開始,我們可以使用模板文字進行這種連接:

js const question = `My number is ${number}, ok?`

9.箭頭函數

箭頭函數是聲明函數的縮短方式。是的,自第一個 JavaScript 版本以來,有更多方法可以做同樣的事情。例如,下面是一個求和函數:

js function sum(n1,n2){    return n1 + n2; }

我們也可以像這樣聲明這個函數:

js const sum = function(n1,n2){    return n1+n2; }

但是使用箭頭函數:

js const sum = (n1,n2) => n1 + n2;

10.參數解構

本技巧適用於那些充滿參數的函數,並且你決定用一個對象替換所有這些函數。或者對於那些真正需要配置對象作為參數的函數。

到目前為止都沒有問題,畢竟誰從來沒有經歷過這個?問題是必須繼續訪問由參數傳遞的對象,然後是我們要讀取的每個屬性,對吧?像這樣:

```js function init(config){    const s = config.s;    const t = config.t;    return s + t;// or config.s + config.t }

init({s: "1", t: "2"}); ```

參數解構特性正是為了簡化這一點,同時通過用下面的語句替換前面的語句來幫助代碼可讀性:

```js function init({s, t}){    return s + t; }

init({s: 1, t: 2}); ```

最重要的是,我們仍然可以在參數對象的屬性中添加默認值:

```js function init({s = 10, t = 20}){    return s + t; }

init({s: 1}); ```

這樣,s 的值為 1,但 t 的值將默認為該屬性,即 20。

11.鍵值名稱

一個非常令人上癮的功能是為對象分配屬性的縮寫方式。想象一下,你有一個 person 對象,該對象具有將通過 name 變量分配的 name 屬性。它看起來像這樣:

js const name = "Joseph" const person = { name: name } // { name: "Joseph" }

雖然你可以這樣做:

js const name = "Joseph" const person = { name } // { name: "Joseph" }

也就是説,如果你的變量與屬性同名,則不需要調用它,只需傳遞變量即可。多個屬性也是如此:

js const name = "Joseph" const canCode = true const person = { name, canCode } // { name: "Joseph", canCode: true }

12.Map

考慮以下對象數組:

js const animals = [     {         "name": "cat",         "size": "small",         "weight": 5     },     {         "name": "dog",         "size": "small",         "weight": 10     },     {         "name": "lion",         "size": "medium",         "weight": 150     },     {         "name": "elefante",         "size": "large",         "weight": 5000     } ]

現在想象一下,我們只想將動物的名字添加到另一個數組中。通常我們會這樣做:

```js let animalNames = [];

for (let i = 0; i < animals.length; i++) {     animalNames.push(animals[i].name); } ```

但是使用 Map,我們可以這樣做:

js let animalNames = animais.map((animal) => {     return animal.nome; })

請注意,map 需要一個最多三個參數的函數:

  • 第一個是當前對象(如在 foreach 中)
  • 第二個是當前迭代的索引
  • 第三個是整個數組

顯然,這個函數將為動物數組中的每個對象調用一次。

13.Filter

如果我們想遍歷與上一個技巧中相同的動物對象數組,但這次只返回那些大小為“小”的對象怎麼辦?

我們將如何使用常規 JS 來做到這一點?

```js let smallAnimals = [];

for (let i = 0; i < animals.length; i ++) {     if (animals[i].size === "small") {        smallAnimals.push(animals[i])     } } ```

然而,使用過filter操作符,我們可以用一種更簡潔、更清晰的方式來做到這一點:

js let smallAnimals = animais.filter((animal) => {     return animal.size === "small" })

Filter 期望一個函數的參數是當前迭代的對象(如在 foreach 中),它應該返回一個布爾值,指示該對象是否將成為返回數組的一部分(true 表示它通過了測試 並將成為其中的一部分)。

14.Reduce

Javascript 的另一個重要特性是 reduce。它允許我們以非常簡單和強大的方式在集合之上進行分組和計算。例如,如果我們想將動物對象數組中所有動物的重量相加,我們會怎麼做?

```js let totalWeight = 0;

for (let i = 0; i < animals.length; i++) {     totalWeight += animals[i].weight; } ```

但是使用 reduce 我們可以這樣做:

js let totalWeight = animals.reduce((total, animal) => {     return total += animal.weight; }, 0)

Reduce 需要一個帶有以下參數的函數:

  • 第一個是累加器變量的當前值(在所有迭代結束時,它將包含最終值)
  • 第二個參數是當前迭代的對象
  • 第三個參數是當前迭代的索引
  • 第四個參數是將要迭代的所有對象的數組

此函數將對數組中的每個對象執行一次,並在其執行結束時返回聚合值。

有了這些技巧,讓你的開發事半功倍,不加班,不熬夜,不脱髮。再也不是夢!

End -