JavaScript 開發者常用的 10 個技巧-js教程-PHP中文網

首頁

web前端

js教程

JavaScript 開發者常用的 10 個技巧

Guanhui

Jun 16, 2020 pm 05:35 PM

javascriptjs

JavaScript 開發者常用的 10 個技巧

我們知道，JavaScript 這門語言正在高速發展中。伴隨著 ES2020，又有很多很棒的功能加入。老實說，您可以透過許多不同的方式編寫程式碼。實作同樣一個功能，有的程式碼很長而有的卻很短。你可以透過一些小技巧來讓你的程式碼更乾淨清晰。下面這些小技巧肯定對你接下來的開發工作有所用處。

函數參數驗證器

JavaScript 允許你對函數參數設定預設值。透過這個特性，我們可以實作一個小技巧來驗證函數參數。

const isRequired = () => { throw new Error(&#39;param is required&#39;); };
const print = (num = isRequired()) => { console.log(`printing ${num}`) };
print(2); //printing 2print(); // errorprint(null); //printing null

格式化JSON 程式碼

你肯定對JSON.stringify 非常熟悉了，但是你知道嗎，你也可以透過stringify 方法格式化你的程式碼。其實這很簡單。

stringify 方法有三個參數，分別是 value replacer 和 space。後面兩個參數是可選的，所以我們通常也不會用到它們。想要縮排輸出的程式碼，我們可以使用2個空格，或4個空格。

console.log(JSON.stringify({ name:"John", Age:23 }, null, &#39;  &#39;));
>>> 
{  "name": "John",  "Age": 23}

對陣列去重

以往對陣列去重我們會使用 filter 函數來過濾掉重複的值。但是現在我們可以使用新的 Set 特性來過濾。非常簡單：

let uniqueArray = [...new Set([1, 2, 3, 3, 3, "school", "school", &#39;ball&#39;, false, false, true, true])];
>>> [1, 2, 3, "school", "ball", false, true]

去除數組中的Boolean(v) 為false 的值

有時候你想刪除數組中Boolean(v) 為false 的值。在JavaScript 中只有以下6 個：

undefined
#null
##NaN
0
false

去除這些值最簡單的辦法是使用下面的方法：

array.filter(Boolean)

如果你想先做一些更改然後再過濾，你可以用下面的方法。要記住，原始陣列

array 是一直沒變的，傳回的是一個新陣列。

array
  .map(item => {      // Do your changes and return the new item
  })
  .filter(Boolean);

同時合併多個物件

如果需要同時合併多個物件或類別，可以使用下面這種方法。

const user = {  name: "John Ludwig",  gender: "Male",
};const college = {  primary: "Mani Primary School",  secondary: "Lass Secondary School",
};const skills = {  programming: "Extreme",  swimming: "Average",  sleeping: "Pro",
};const summary = { ...user, ...college, ...skills };

>>>
{  name: &#39;John Ludwig&#39;,  gender: &#39;Male&#39;,  primary: &#39;Mani Primary School&#39;,  secondary: &#39;Lass Secondary School&#39;,  programming: &#39;Extreme&#39;,  swimming: &#39;Average&#39;,  sleeping: &#39;Pro&#39;}

三個點也叫擴充運算子。

對數字陣列排序

JavaScript 陣列有一個原生的排序方法

arr.sort。這個排序方法預設把陣列元素轉換成字串，並對其進行字典序排序。這個預設行為會在排序數字數組時出現問題，所以下面有一個方法來處理這個問題。

[0, 10, 4, 9, 123, 54, 1].sort()
>>> [0, 1, 10, 123, 4, 54, 9]

[0, 10, 4, 9, 123, 54, 1].sort((a,b) => a-b);
>>> [0, 1, 4, 9, 10, 54, 123]

停用右鍵

有時候你可能想要禁止使用者點擊右鍵。雖然這個需求很少見，但是可能派的上用場。

<body oncontextmenu="return false">
  <p></p>
  </body>

這個簡單的程式碼片段就可以禁止使用者點擊右鍵了。

解構時重新命名

解構賦值是JavaScript 的特性，它允許直接從陣列或物件中取得值，而不需要繁瑣的宣告變數再賦值。對物件來講，我們可以透過下面這種方式來給屬性名重新定義一個名字。

const object = { number: 10 };// Grabbing numberconst { number } = object;// Grabbing number and renaming it as otherNumberconst { number: otherNumber } = object;console.log(otherNumber); // 10

取得陣列中的最後一項

如果你想取得陣列中的最後一項，你可以使用

slice 函數，同時帶上一個負數作為參數。

let array = [0, 1, 2, 3, 4, 5, 6, 7] 
console.log(array.slice(-1));
>>>[7]console.log(array.slice(-2));
>>>[6, 7]console.log(array.slice(-3));
>>>[5, 6, 7]

等待 Promises 全部執行完成

有時候你可能需要等待幾個 promise 都執行完然後進行後面的操作。你可以使用

Promise.all 來並行執行這些 promise。

const PromiseArray = [    Promise.resolve(100),    Promise.reject(null),    Promise.resolve("Data release"),    Promise.reject(new Error(&#39;Something went wrong&#39;))];Promise.all(PromiseArray)
  .then(data => console.log(&#39;all resolved! here are the resolve values:&#39;, data))
  .catch(err => console.log(&#39;got rejected! reason:&#39;, err))

要注意，只要

Promise.all 中有一個是 rejected 狀態時，其會立即停止執行並拋出例外。

如果你想忽略 resolved 或 rejected 狀態，你可以使用

Promise.allSettled。這個是 ES2020 的新特性。

const PromiseArray = [  Promise.resolve(100),  Promise.reject(null),  Promise.resolve("Data release"),  Promise.reject(new Error("Something went wrong")),
];Promise.allSettled(PromiseArray)
  .then((res) => {    console.log("here", res);
  })
  .catch((err) => console.log(err));
>>>
here [
  { status: &#39;fulfilled&#39;, value: 100 },
  { status: &#39;rejected&#39;, reason: null },
  { status: &#39;fulfilled&#39;, value: &#39;Data release&#39; },
  {    status: &#39;rejected&#39;,    reason: Error: Something went wrong
        at Object.<anonymous> 
        at Module._compile (internal/modules/cjs/loader.js:1200:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
        at Module.load (internal/modules/cjs/loader.js:1049:32)
        at Function.Module._load (internal/modules/cjs/loader.js:937:14)
        at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
        at internal/main/run_main_module.js:17:47
  }
]

推薦教學：《

JS教學》

以上是JavaScript 開發者常用的 10 個技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：juejin。如有侵權，請聯絡admin@php.cn刪除

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。