前一段時間，我建立了一個標題為“7個可愛的Web開發技巧”的帖子。在這裡，我描述了一些有趣的技巧，您可以使用3種主要的Web技術之一來實現這些技巧-html，css和JavaScript。而且，我必須承認-你們似乎都喜歡它！因此，續集來了！

這次，為了更加一致，我決定只專注於JavaScript。它可能是三者中最有趣，用途最廣泛的，因此有很多事情要討論。我們將介紹5種JavaScript技巧，這些技巧在上一篇文章中沒有提到。希望您會發現它們很有趣！

在進入列表之前，請快速注意一下。我看到了對上一篇文章的一些回覆，並想清除一些內容。我知道並不是該列表或上一個列表中的所有條目可能都是真正有用的或推薦的做法，但這不是我的目標。用“技巧”一詞我的意思就是-有趣的或僅出於此目的而值得了解的“技巧”。有用只是一種獎勵。如果它打算100％有用，那麼我將其稱為“提示”。我希望你明白。現在，讓我們轉到列表！

5.切換範圍

從不太“極端”的技巧開始，我們得到了switch宣告。它的大多數用例都歸結為字串或數字值匹配。但是，您知道您也可以將其與一些更復雜的布林值一起使用嗎？看一看。

const useSwitch = value => {
  let message = "";

  switch (true) {
    case value < 0:
      message = "lesser than 0";
      break;

    case value === 0:
      message = "0";
      break;

    case value % 1 !== 0:
      message = "a float";
      break;

    case value > 0 && value <= 9:
      message = "higher than 0 and is 1 digit long";
      break;

    case value >= 10 && value <= 99:
      message = "2 digits long";
      break;

    case value >= 100:
      message = "big";
      break;
  }

  console.log(`The value is ${message}`);
};

useSwitch(24); // The value is 2 digits long.
 

而不是為switch語句提供實際變數，我們只是傳遞true。這樣，我們實質上使它成為一個大if-else選擇。是否應使用它僅取決於您的個人喜好或所遵循的程式碼準則。如果您發現它比if-else鏈條更具可讀性，那就去買它。兩種解決方案的效能大致相同。

4.字串化函式

接下來，我們有一些本身並不是真正的技巧。對函式進行字串化是您很長時間以來最瞭解的功能。相反，我想讓您知道這種功能的一些有趣用例。

const func = () => {
  console.log("This is a function");
}
const stringifiedFunc = `${func}`; /* `() => {
  console.log("This is a function");
}` */
 

首先快速看一下語法方面。您應該知道，當您將任何js型別的值轉換為字串時，.toString()都會呼叫一個特殊方法。您可以使用此事實來實現此方法的自己的版本，並以不同的方式處理將js值轉換為字串的情況。可以單獨考慮這是一個技巧。;）無論如何，我想說的是，您可以將值（包括函式）轉換為帶有ES6模板文字的字串（如示例中所示），方法是將它們與空字串文字（""）串聯，或者僅通過呼叫該.toString()方法直接。

現在，讓我們回到函式。我想指出，您不能依賴結果字串來包含函式編寫時的所有程式碼。例如，它僅來自ES2019（當前為ECMAScript標準的最新版本），其.toString()目的是在結果字串中包含函式體內的所有註釋和空格。您可以我之前的一篇文章中閱讀有關ES2019功能的更多資訊。無論如何，考慮到所有這些，對函式進行字串化怎麼可能甚至有用？

不要搜尋太多，我想引用一個我最近的副專案中使用的巧妙技巧。想象一下，可以通過呼叫一個函式來建立一種節點。該函式將另一個函式用作引數，然後執行該引數以配置新節點。對於包含相同語句的函式，結果節點相同。

可悲的是，建立新節點是一個緩慢的過程（尤其是考慮大量節點時），並且您至少要最小化要建立的節點數。為此，您可以例如建立一個“快取”物件，在該物件中通過其字串化的config函式儲存所有已建立的節點，以防止進行任何重複呼叫-有趣嗎？

當然，即使是很小的空格或註釋，基於字串的基於函式的ID也會被認為是不同的。您可以通過一些附加的字串處理來解決它，但是這會忽略我們試圖實現的所有效能改進。

但是，只要配置功能允許，您就不能容忍物件鍵。您可以通過簡單地對字串化函式進行雜湊處理來輕鬆解決此問題-它不會在效能上花費很多。

// ...
const hash = value => {
  let hashed = 0;

  for (let i = 0; i < value.length; i += 1) {
    hashed = (hashed << 5) - hashed + value.charCodeAt(i);
    hashed |= 0;
  }

  return `${hashed}`;
};
const hashedFunc = hash(stringifiedFunc); // "-1627423388"

我知道我剛剛描述的內容似乎過於具體，無法應用於更一般的用例。當然可以，但是我只是想給您一個現實的例子，說明這種技巧給您帶來的可能性。

3.可呼叫物件

可呼叫物件，具有屬性的函式或任何您想呼叫的物件都是一個非常簡單的想法，可以很好地演示JavaScript的多功能性。

const func = () => {
  // ...
};
func.prop = "value";
console.log(func.prop); // "value"

上面的程式碼段對您來說似乎沒有什麼特別。您可以在幾乎任何JS物件儲存自己的屬性，除非它與使用說明，否則.freeze()，.seal()或.preventExtensions()方法。上面的函式現在既可以用作常規函式，也可以用作包含某種資料的物件。

上面的程式碼片段看起來並不完美。將屬性分配給給定的函式可能會隨著時間的推移而感到重複和混亂。讓我們嘗試改變它！

const func = Object.assign(() => {
    // ...
}, {
  prop: "value"
});
console.log(func.prop); // "value"

現在，我們正在使用該Object.assign()方法來使我們的程式碼看起來更好。當然，此方法僅在與ES6相容的環境中（或與Transpiler一起使用）可用，但是，由於我們還在此處使用箭頭功能，因此我認為這是理所當然的。

2.詞法繫結的類方法

假設我們有一個包含許多欄位和方法的類。您可以想象自己在這種情況下，不是嗎？如果在給定的時刻僅需要所有類屬性和方法的一小部分怎麼辦？也許您可以使用ES6 解構分配來使程式碼看起來更好？可悲的是，這並不容易-看一下。

class Example {
  method() {
    console.log(this);
  }
}

const instance = new Example();
const { method } = instance;

method(); // undefined

如您所見，在提取方法之後，將value this更改為undefined。這是預期的行為-的價值this是執行時繫結和方式和地點，你的函式被呼叫在確定我在討論這個。

有一個辦法解決，但是-.bind()。

class Example {
    constructor() {
        this.method = this.method.bind(this);
    }
  method() {
    console.log(this);
  }
}

const instance = new Example();
const { method } = instance;

method(); // Example {}

現在，我們的程式碼可以按預期工作，儘管它需要新增類建構函式，並因此增加了幾行程式碼。我們可以縮短時間嗎？

class Example {
  method = () => {
    console.log(this);
  }
}
// ...

看來我們已經做到了！在您的類中具有按詞法繫結的方法的簡便快捷方法。上面的語法可最新的常綠瀏覽器中使用，並在必要時可以進行編譯，請盡情使用！

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

1.從建構函式返回

此列表上的最後一個條目也與類相關。您可能聽說過從建構函式返回自定義值的可能性。這不是很受歡迎或推薦的做法，但是它可以使您獲得一些有趣的結果。還記得我之前提出的快取節點的先前示例嗎？讓我們以此為基礎！

// ...
const cache = {};

class Node {
  constructor(config) {
    const id = hash(`${config}`);

    if (cache[id]) {
      return cache[id];
    } else {
      cache[id] = this;
      config();
    }
  }
}

const node = new Node(() => {});
const nodeReference = new Node(() => {});
const secondNode = new Node(() => {
  console.log("Hello");
});

console.log(node === nodeReference, node === secondNode); // true, false

我們的節點現在具有類的形式，並且像以前一樣，可以使用字串化和雜湊配置函式對其進行快取。看到所有片段融合在一起真是太好了！