JavaScript

我有一些使用回調函數的程式碼。不涉及太多實現細節，以下是要點： const uploadFile = (callback) => { // 上傳文件，然後將文件位置通過回調函數返回 callback(location) } uploadFile((location) => { // 執行後續操作 }) 如上所示，我調用uploadFile函數，當它完成所需操作後，就會調用該回調函數。 但是我希望在整個程式碼中都使用async/await，因此我決定在這裡使用async/await來替代回調函數。 這是我所做的：我將uploadFile函數的主體代碼用return new Promise()包裹起來，並在獲取到要返回的數據後調用resolve()： const uploadFile = () => { return new Promise((resolve, reject) => { // 上傳文件，然後通過回調函數返回文件位置 resolve(location) }) } const location = await uploadFile() 現在，我可以在第一層級中使用location數據，而不是它被包裹在回調函數中。 這有助於讓我的代碼更加整潔，並更好地理解它。 如果您有興趣，這是實際函數的完整代碼，您可以在其中看到此概念的具體示例： const uploadFile = (fileName, id, callback) => { const fileContent = fs.readFileSync(fileName) const params = { Bucket: process.env.AWS\_BUCKET\_NAME, Key: `file.jpg`, Body: fileContent } s3....

我在檔案系統中有一個圖片檔案，我想要使用資料 URI 格式將它放入 HTML 頁面中，以便將其嵌入到頁面本身中。 以下是我這樣做的方法： const imageData = fs.readFileSync(fileLocation, 'binary') const src = `data:${contentType};base64,${Buffer.from( imageData, 'binary' ).toString('base64')}` 在我的情況下，我只是從網路上下載圖片，所以我從回應標頭中取得了 contentType： const contentType = response.headers['content-type'] 最後，我可以在 img 標籤中使用 src，像這樣：<img src={src} />

使用 CSS 或 HTML 的 width / height 屬性設定 canvas 的大小，例如 200 x 400： <canvas width="200" height="400"></canvas> 並且確保也在 JavaScript 中設定 canvas 物件的寬度 / 高度屬性，以避免文本模糊呈現，例如： canvas.width = 1800 canvas.height = 1200 首先，獲取對 canvas 的引用： const canvas = document.querySelector('canvas') 然後從它創建一個上下文對象： const context = canvas.getContext('2d') 現在，我們可以調用上下文對象的 fillText() 方法： context.fillText('hi!', 100, 100) 確保起點的 x 和 y 坐標包含在 canvas 的大小內。 你可以在調用 fillText() 之前傳遞額外的屬性來自定義外觀，例如： context.font = 'bold 70pt Menlo' context.fillStyle = '#ccc' context.fillText('hi!', 100, 100)

TL;DR: 使用 remove() 方法於 element.classList 當你有一個 DOM 元素的參考時，你可以使用 remove 方法來刪除一個類別： element.classList.remove('myclass') 你可以使用 add 方法將一個新的類別加入： element.classList.add('myclass') 實作細節：classList 不是一個陣列，而是一個 DOMTokenList 類型的集合。 你無法直接編輯 classList，因為它是一個唯讀屬性。然而，你可以使用它的方法來改變元素的類別。

給定一個 DOM 元素，如何移除它的所有子元素呢？ 給定一個 DOM 中的項目，使用 querySelector() 來識別它，像這樣： const item = document.querySelector('#itemId') 然後，要移除它的所有子元素，有幾種不同的解決方案。 最快的方法看起來是這樣的： item.innerHTML = '' 另一個建議的解法是創建一個循環，檢查是否定義了 firstChild 屬性（元素至少具有一個子元素），然後將其刪除： const item = document.querySelector('#itemId') while (item.firstChild) { item.removeChild(item.firstChild) } 當所有子元素都被移除時，循環結束。 根據我查看的大多數性能測試結果，第一種解法看起來是最快的解決方案。

有多種方法可以從 JavaScript 物件中刪除屬性。找出替代方案和建議的解決方法。 從物件中刪除屬性的語意正確的方式是使用 delete 關鍵字。 給定以下物件 const car = { color: 'blue', brand: 'Ford' } 您可以使用以下方式從物件中刪除屬性 delete car.brand 也可以這樣表達： delete car['brand'] delete car.brand delete newCar['brand'] 將屬性設置為 undefined 如果您需要以非常優化的方式執行此操作，例如在循環中對大量物件進行操作時，那麼另一個選擇是將屬性設置為 undefined。 由於 delete 的性質，它的性能比簡單地將屬性重新賦值為 undefined 要慢很多，超過 50 倍。 但是，請記住，該屬性並未從物件中刪除。它的值被清除，但如果您遍歷物件，它仍然存在： 使用 delete 仍然非常快速，只有在有非常好的理由時才應該考慮這種性能問題，否則最好具有更清晰的語意和功能。 在不改變物件的情況下刪除屬性 如果 mutability 是一個關注點，您可以通過從舊物件複製所有屬性（除去要移除的屬性）來創建一個完全新的物件： const car = { color: 'blue', brand: 'Ford' } const prop = 'color' const newCar = Object.keys(car).reduce((object, key) => { if (key !== prop) { object[key] = car[key] } return object }, {}) （參見 Object....

給定一個物件陣列，如果你想要獲取屬性的值，但不包含重複的值，你可以這樣做。 假設你有一個 bills 陣列，內容如下： const bills = [ { date: '2018-01-20', amount: '220', category: 'Electricity' }, { date: '2018-01-20', amount: '20', category: 'Gas' }, { date: '2018-02-20', amount: '120', category: 'Electricity' } ] 並且你想要提取該陣列中每個項目的 category 屬性的唯一值。 以下是你可以執行的操作： const categories = [...new Set(bills.map(bill => bill.category))] 解釋 Set 是 JavaScript 在 ES6 中新增的一種資料結構，它是一個包含唯一值的集合。我們將使用 map() 獲取的屬性值列表放入其中，這將返回以下陣列： ['Electricity', 'Gas', 'Electricity'] 通過 Set，我們將刪除重複的值。 ... 是 展開運算子，將展開 Set 中的值到一個陣列中。

給定一個陣列，你該如何將其中的重複值移除？ 假設你有一個包含一系列基本值的陣列，例如數字或字串。 其中一些元素是重複的。 就像這個例子中： const list = [1, 2, 3, 4, 4, 3] 我們可以使用以下方式產生一個新的陣列，其中不包含重複的值： const uniqueList = [...new Set(list)] 現在，uniqueList 將成為一個新的陣列，其中包含值 [1, 2, 3, 4]。 這是如何運作的呢？ Set 是一種新的資料結構，在 ES6 中的 2015 年被引入，它的主要特點是能夠在同一個集合中不能重複儲存資料。請參考我關於 Set 的完整指南。 通過使用解構陣列的方式初始化一個 Set（請看到 ... 操作符在 new Set() 前面），我們將值傳入 Set 中，Set 會自動移除重複的值。然後我們將其轉換為一個陣列，使用方括號 [] 包裹起來。 這個方法對於任何不是物件的值都適用：數字、字串、布林值、符號。

在 JavaScript 中，有很多方法可以從陣列中移除項目。學習使用官方推薦的方式，並瞭解其他可以選擇的選項。 以下是一些使用 JavaScript 移除陣列項目的方法。 所有下列方法都不會改變原始陣列，而是創建一個新的陣列。 如果你知道項目的索引 假設你有一個陣列，想要移除位於索引 i 的項目。 一種方法是使用 slice()： const items = ['a', 'b', 'c', 'd', 'e', 'f'] const i = 2 const filteredItems = items.slice(0, i).concat(items.slice(i + 1, items.length)) // ["a", "b", "d", "e", "f"] slice() 方法會使用傳入的索引值創建一個新的陣列。我們從開始到我們想要移除的索引位置創建一個新的陣列，然後將另一個從移除索引位置的下一個位置開始到陣列結尾的陣列連接起來。 如果你知道項目的值 在這種情況下，使用 filter() 是一個很好的選擇，它提供了更加聲明式的方式： const items = ['a', 'b', 'c', 'd', 'e', 'f'] const valueToRemove = 'c' const filteredItems = items.filter(item => item !== valueToRemove) // ["a", "b", "d", "e", "f"] 這裡使用了 ES6 的箭頭函式。你可以使用傳統函式來支援舊版瀏覽器：...

給定一個JavaScript Date對象實例，如何獲取代表月份名稱的字符串呢？ 換句話說，從 const today = new Date() 我們如何得到月份名稱？ 每個Date對象實例都有一個toLocaleString()方法，它是JavaScript國際化方法之一。 使用這個方法，你可以根據當前的語言環境得到月份名稱，以下是如何使用它： const today = new Date() today.toLocaleString('default', { month: 'long' }) 根據你的語言環境，你會得到不同的結果。我得到的結果是“十月”。 如果使用"short"格式，我得到的結果是“10月”： today.toLocaleString('default', { month: 'short' }) 第一個參數是語言環境，我們傳遞"default"字符串，你可以傳遞任何你想要的語言環境，例如"it-IT"將返回"ottobre"： const today = new Date() today.toLocaleString('it-IT', { month: 'long' })