JavaScript

當我們有一個 DOM 元素時，我們該如何用另一個元素來替換它呢？ 假設我們有一個 DOM 元素並且已經有了對它的引用（可能是使用 querySelector() 獲取的）。 要將其替換為另一個 DOM 元素，可以在第一個元素上調用 replaceWith() 方法，並將第二個元素作為參數傳遞： const el1 = document.querySelector(/\* ... \*/) const el2 = document.querySelector(/\* ... \*/) el1.replaceWith(el2) 由於 Edge < 17 和 IE11 不支援此方法，如果你計劃支援這些瀏覽器，則應使用 Babel 將其轉換為 ES5。 另一種解決方案是查找父元素並使用 replaceChild() 方法，該方法更早並且被所有瀏覽器支援： const el1 = document.querySelector(/\* ... \*/) const el2 = document.querySelector(/\* ... \*/) el1.parentNode.replaceChild(el2, el1)

你如何檢查你所擁有的特定 DOM 元素是否有指定的類別？ 使用 classList 物件提供的 contains 方法，寫法如下： element.classList.contains('myclass') 從技術上來說，classList 是一個符合 DOMTokenList 介面的物件，這意味著它實作了相關的方法與屬性。 你可以在 DOMTokenList MDN 頁面 上查看詳細的資訊。

學習如何使用 Array.isArray() 方法來判斷 JavaScript 值是否為陣列。 有時候，當你在函式中傳遞一個物件，你需要檢查它是否為陣列。 如果它是陣列，你可能會執行某些操作，而如果它不是陣列，你可能會執行其他操作。 要如何判斷一個物件是否為陣列呢？ 你可以使用 Array 內建物件提供的 isArray() 靜態方法，這個方法在 ECMAScript 5 中被引入： const list = [1, 2, 3] Array.isArray(list) //true

瞭解 JavaScript 提供的檢查變數內容的方法（或其他類型的值）。 JavaScript 提供了許多方法來檢查變數的內容。特別是，讓我們找出如何輸出物件的內容。 控制台 API console.log console.dir JSON.stringify() toSource() 使用迴圈迭代屬性 如何在 Node.js 中檢查 假設我們有這個 car 物件，但是我們不知道它的內容，並且我們想要檢查它： const car = { color: 'black', manufacturer: 'Ford', model: 'Fiesta' } 控制台 API 使用控制台 API，您可以將任何物件輸出到控制台。這將適用於任何瀏覽器。 console.log console.log(car) console.dir console.dir(car) 與以下方式效果相同： console.log('%O', car) JSON.stringify() 這將以字串形式輸出物件： JSON.stringify(car) 透過增加這些參數： JSON.stringify(car, null, 2) 您可以使輸出更好閱讀。最後一個數字代表縮排的空格數： JSON.stringify() 的優點是可以在控制台之外運作，您可以在螢幕上輸出物件。或者，您可以將它與控制台 API 結合起來，在控制台中輸出： console.log(JSON.stringify(car, null, 2)) toSource() 類似於 JSON.stringify，toSource() 是大多數類型的方法，僅在 Firefox（以及基於 Firefox 的瀏覽器）中可用： 值得一提的是，由於它不是標準，只在 Firefox 上實現，所以 JSON.stringify 是一個更好的解決方案。 使用迴圈迭代屬性 for...in 迴圈很方便，它會列印物件的屬性：...

在 JavaScript 程式中，要檢查物件屬性是否為未定義的正確方法是使用 typeof 運算子。以下是你可以使用它的簡單說明。 在 JavaScript 程式中，要檢查物件屬性是否為未定義的正確方法是使用 typeof 運算子。 typeof 會返回描述運算元類型的字串。它不需要使用括號，只需傳入你想檢查的任何值： const list = [] const count = 2 typeof list //"object" typeof count //"number" typeof "test" //"string" typeof color //"undefined" 如果值未定義，typeof 會返回一個 ‘undefined’ 的字串。 現在假設你有一個 car 物件，只有一個屬性： const car = { model: 'Fiesta' } 這是如何檢查該物件中是否定義了 color 屬性的方法： if (typeof car.color === 'undefined') { // color is undefined }

給定一個 JavaScript 陣列，你要如何檢查其中是否包含特定項目？ 使用陣列實例的 includes() 方法。 例如： ['red', 'green'].includes('red') // true ✅ ['red', 'green'].includes('yellow') // false ❌

在 JavaScript 中，有許多方法可以複製物件，但並非所有方法都提供深層複製。本文將介紹最有效的方式，並提供所有可用的選項。 2022年更新：只需使用structuredClone()方法進行複製。詳見如何在 JavaScript 中複製物件 在 JavaScript 中複製物件可能會很棘手。有些方法會執行淺層複製，這是大多數情況下的預設行為。 深層複製 vs 淺層複製 最簡單的選項：使用 Lodash 使用 Object.assign() 使用物件展開運算子 錯誤的解決方案 使用 Object.create() JSON序列化 深層複製 vs 淺層複製 淺層複製能成功複製原始類型，如數字和字串，但是任何物件引用都不會被遞迴複製，而是新複製的物件將引用相同的物件。 如果物件包含其他物件的引用，在對該物件進行淺層複製時，只會複製對外部物件的引用。 而在深層複製中，這些外部物件也會被複製，因此新複製的物件與原始物件完全獨立。 當在網路上搜尋如何在 JavaScript 中深度複製物件時，你會找到很多回答，但這些回答並不總是正確的。 最簡單的選項：使用 Lodash 我建議你依賴於一個經過良好測試、非常受歡迎且精心維護的庫來執行深度複製：Lodash。 Lodash 提供了非常方便的 clone 和 cloneDeep 函數可以執行淺層和深度複製。 Lodash 還具有一個很好的特性：你可以單獨導入單個函數到你的項目中，以大大減少其依賴的大小。 在 Node.js 中： const clone = require('lodash/clone') const cloneDeep = require('lodash/cloneDeep') 以下是使用這兩個函數的示例： const clone = require('lodash/clone') const cloneDeep = require('lodash/cloneDeep') const externalObject = { color: 'red', } const original = { a: new Date(), b: NaN, c: new Function(), d: undefined, e: function () {}, f: Number, g: false, h: Infinity, i: externalObject, } const cloned = clone(original) externalObject....

給定一個 JavaScript 陣列，下面介紹如何清空這個陣列並將所有元素刪除。 有多種方法可以清空一個 JavaScript 陣列。 最簡單的方法是將陣列的長度設為0： const list = ['a', 'b', 'c'] list.length = 0 另一個方法是直接將一個空陣列分配給原始的變數，這樣會改變原始的陣列參考，所以需要使用 let 而不是 const： let list = ['a', 'b', 'c'] list = []

TL;DR: 使用element.classList上的add()方法 當你有一個DOM元素的引用時，你可以使用add方法向其添加一個新的類別： element.classList.add('myclass') 你可以使用remove方法來刪除一個類別： element.classList.remove('myclass') 實現細節：classList不是一個陣列，而是一個DoucmentFragment的集合。 你無法直接編輯classList，因為它是一個只讀屬性。不過，你可以使用其方法來修改元素的類別。

了解如何獲取URL的片段部分的值 我曾經有需要以程式的方式訪問URL的片段部分，也就是#井號符號後面的部分。 例如，如果URL是index.html#second，我想要取回second。 以下是我如何實現的： const fragment = window.location.hash