我正在使用 canvas npm 套件以 Canvas API 的方式在伺服器端繪製圖像。 注意：這是 Node.js 中在 canvas 中處理圖像的方式，不同於網頁瀏覽器中的處理方式。 載入 loadImage() 函式： const { createCanvas, loadImage } = require('canvas') 建立 canvas： const width = 1200 const height = 630 const canvas = createCanvas(width, height) const context = canvas.getContext('2d') 接下來呼叫 loadImage()，當圖像載入完成時它將返回一個 Promise： loadImage('./logo.png').then(image => { }) 也可以在 async 函式中使用： const image = await loadImage('./logo.png') 獲得圖像後，使用 drawImage 函式，並傳遞 x、y、width 和 height 參數： context.drawImage(image, 340, 515, 70, 70)

在 Hugo 中，如何傳遞多個參數給 partial？這並不像看起來那麼簡單，你需要使用一個技巧。讓我們看一下。 我使用 Hugo 來管理這個網站，它非常方便。 今天遇到的一個問題是如何將 2 個參數傳遞給 partial。 由於在 partial 中無法訪問 .Site.Pages 以獲取網站頁面列表（由於作用域問題），我不得不創建一個字典並填充其中 2 個項目： {{ partial "my-partial.html" (dict "context" . "pages" $.Site.Pages) }} 這裡的關鍵是將 (dict "context" . "pages" $.Site.Pages) 作為參數傳遞，而不是像通常在 partial 中使用的 .。 現在，在 partial 中，我們需要使用 .context 來訪問當前上下文變量，而不是使用 .。 如果要訪問 pages 的值，可以使用 .pages。 當然，您也可以傳遞多個項目。只需將更多項目添加到字典中即可。

在 JavaScript 中，最簡單的方法是使用 Math.floor() 和 Math.random() 結合來隨機選擇一個數字。 以下是一行簡單的代碼，可以返回一個介於 1 和 6（包括 1 和 6）之間的數字： Math.floor(Math.random() * 6 + 1) 這裡有 6 個可能的結果：1、2、3、4、5、6。

了解如何在 JavaScript 中在特定索引位置添加項目到陣列 假設您想要在陣列中添加一個項目，但不想將項目附加在陣列的末尾。您想要明確地將其添加到陣列的特定位置。 這個位置被稱為索引。 陣列索引從0開始，因此如果您想要在第一個位置添加項目，則會使用索引0，在第二個位置索引是1，以此類推。 要執行此操作，您將使用陣列的splice()方法。這個函數非常強大，除了我們現在要使用的方式之外，它還允許從陣列中刪除項目。因此，請謹慎操作。 splice()接受3個或更多個引數。第一個是起始索引：我們將開始進行更改的位置。第二個是刪除計數參數。由於我們是要添加到陣列中，所以在我們所有的示例中刪除計數都是0。在此之後，您可以添加一個或多個要添加到陣列中的項目。 以下是一個示例。請看這個陣列： const colors = ['yellow', 'red'] 您可以在yellow之後添加一個項目，如下所示： colors.splice(1, 0, 'blue') //colors === ['yellow', 'blue', 'red'] 您還可以在yellow之後添加多個項目，如下所示： colors.splice(1, 0, 'blue', 'orange') //colors === ['yellow', 'blue', 'orange', 'red'] 注意：結果假設colors仍為['yellow', 'red'] 要在第一個位置添加，請將0作為第一個引數使用，如下所示： colors.splice(0, 0, 'blue') //colors === ['blue', 'yellow', 'red']

假設你想要在陣列的開頭新增一個項目。 要執行這個操作，你可以使用陣列的 splice() 方法。 splice() 方法需要三個或更多的引數。第一個引數是起始索引，也就是我們要開始做變更的位置。第二個是刪除的數量，由於我們是要新增項目，所以在我們的範例中刪除的數量都是 0。在這之後，你可以新增一個或多個要加入陣列中的項目。 要在第一個位置新增，將第一個引數設為 0： const colors = ['yellow', 'red']; colors.splice(0, 0, 'blue'); //colors === ['blue', 'yellow', 'red']

在 JavaScript 領域中，我們過去經常需要做各種關於克隆的事情。 為什麼呢？ 因為…引用。 基本類型（字串、數字、布林值…）總是可以正確地 “克隆”，因為它們是按值傳遞的。 其他所有物件（物件、陣列、日期等等）都是物件。而物件是按引用傳遞的。 所以，我們必須使用不同的方式進行深度克隆，否則你會得到同一個物件的引用，只是名稱不同。 但現在已經是 2023 年，我們可以使用 structuredClone()。 const b = structuredClone(a) 這將深度克隆非基本類型。 只需注意它是一個新的 API，所以如果你在瀏覽器中使用它，請確保使用提供 core-js（babel）polyfill 的建構工具。

瞭解在 JavaScript 中如何使用一組值來初始化新陣列的方法 簡單解決方案: Array(12).fill(0) fill() 是在 ES6 中引入的新方法。

我面臨了這樣的任務 基本上，我有一個包含多個URL的字符串，我想使用正則表達式處理它們。 這個正則表達式使用了捕獲組，非常方便。 那麼，讓我們從獲取單個結果開始： const text = 'hello1 bla bla hello2' const regex = /hello\d/ text.match(regex) /* [ 'hello1', index: 0, input: 'hello1 bla bla hello2', groups: undefined ] */ 使用 g標誌可以從正則表達式中獲取多個結果，而且這是自動進行的，但現在 match() 的結果不同，只返回匹配的結果： const text = 'hello1 bla bla hello2' const regex = /hello\d/g console.log(text.match(regex)) //[ 'hello1', 'hello2' ] 使用 ES2020中的 matchAll() 方法可以獲得更詳細的結果集。 該方法返回一個迭代器對象，所以需要使用循環來遍歷結果： for (let match of text.matchAll(regex)) { console.log(match) } /* [ 'hello1', index: 0, input: 'hello1 bla bla hello2', groups: undefined ] [ 'hello2', index: 15, input: 'hello1 bla bla hello2', groups: undefined ] */ 現在讓我們談談捕獲組。...

學習如何在當前的 v8 中使用這個新功能 通常只能在異步函數內部使用等待。因此通常要宣告立即調用的異步函數表達式來包裹它： (async () => { await fetch(/* ... */) })() 或者也可以先宣告一個函數然後再調用它： const doSomething = async () => { await fetch(/* ... */) } doSomething() 頂層等待將允許我們簡單地運行： await fetch(/* ... */) 而不需要這麼多樣板代碼。 注意：這僅在ES模塊中運作。 對於單個的 JavaScript 文件，無需打包工具，你只需將其保存為 .mjs 擴展名，就可以使用頂層等待。

了解如何使用 JavaScript 結合字符串 JavaScript，像任何好的語言一樣，具有結合兩個（或更多）字符串的能力。 怎麼做呢？ 我們可以使用 + 運算符。 如果你有一個字符串 name 和一個字符串 surname，你可以將它們賦值給 fullname 變量，像這樣： const fullname = name + surname 如果你不想實例化一個新變量，你可以使用 += 運算符將第二個字符串添加到第一個字符串中： name += surname 另外，你也可以使用 String 對象的 concat() 方法，該方法返回將被調用的字符串與方法的參數連接起來的新字符串： const fullname = name.concat(surname) 一般來說，我推薦使用最簡單的方式（同時也是更快的方式），即使用 +（或 +=）運算符。