我需要獲取字符串的前半部分。 基本上是在特定字符“-”之前的所有內容。 以下是我所做的： const str = 'test-hey-ho' str.split('-')[0] //'test'

如何在JavaScript中擴展類 JavaScript中的繼承是通過類進行的。 假設你有一個類Animal： class Animal { breathe() { //... } } 所有的動物都會呼吸。我想這可以作為一個通則。 但不是所有的動物都會走路。有些動物可以飛行等。 所以我們可以通過擴展這個類來形成不同的種類，並從基類中繼承breathe()方法，同時提供特定的方法和屬性： class Fish extends Animal { swim() { //... } } class Bird extends Animal { fly() { //... } } 你可以使用new關鍵字實例化一個類的實例，最終得到一個對象： const randomAnimal = new Animal() const hummingbird = new Bird()

如果你有一個由類別生成的物件，且你想要得到它的類別名稱，該怎麼做呢？ 假設你有一個由類別生成的物件，你想要得到它的類別名稱。 舉個例子，可以參考下面的程式碼： class Dog { } const roger = new Dog() 當然，現在我們知道roger是一個由Dog類別創造出的物件。 但是，如果你不知道物件的類別，該如何取得它的類別名稱呢？ 你可以查找物件的建構函式(constructor)，然後參考它的name屬性。 以下是一個例子： class Dog { } const roger = new Dog() console.log(roger.constructor.name) // 'Dog' 這個方法會返回一個代表類別名稱的字串。 你也可以直接將constructor屬性與類別進行比較，像這樣： class Dog { } const roger = new Dog() roger.constructor === Dog //true 這個方法同樣會返回true，表示物件的建構函式與類別一致。

學習JavaScript三元運算子的基礎知識 三元運算子是JavaScript中唯一可以使用3個運算元的運算子，它是一種表示條件語句的簡潔方式。 它的語法如下： <condition> ? <expression> : <expression> 條件 <condition> 將被求值為布林值，在根據結果，運算子將運行第一個表達式（如果條件為真）或第二個表達式。 以下是一個示例：我們檢查 running 是否等於 true，如果是的話，我們調用 stop() 函數。否則，我們調用 run() 函數： 使用示例： const running = true; (running === true) ? stop() : run()

以下是一個for循環的範例： const list = ['a', 'b', 'c'] for (let i = 0; i < list.length; i++) { } 我們可以使用break關鍵字在任何時候跳出循環： const list = ['a', 'b', 'c'] for (let i = 0; i < list.length; i++) { if (list[i] === 'b') break console.log(list[i]) } break也適用於for..of循環： const list = ['a', 'b', 'c'] for (const item of list) { if (item === 'b') break console.log(item) } 以及while循環： const list = ['a', 'b', 'c'] let i = 0 while (i < list....

在JavaScript中，我們可以使用兩種不同的操作符來檢查對象的相等性，它們分別是“==”和“===”。 這兩者基本上做的是相同的事情，但它們之間有一個很大的不同之處。 “===”用於檢查兩個值是否相等。如果它們是對象，則這兩個對象必須是相同的類型。正如大家所知，JavaScript是動態類型語言，但是你需要了解一些基本的類型。 具體而言，我們有“值類型”（布爾型、null、undefined、字符串和數字）和“引用類型”（數組、對象、函數）。 如果兩個值的類型不同，則“===”將返回false。 如果它們是相同的類型，JavaScript將進一步檢查它們是否相等。 對於引用類型來說，這意味著這兩個值必須引用相同的對象/數組/函數，而不僅僅是具有相同的值。 而“==”則不同，它會嘗試將類型轉換為相匹配的類型。 這就是為什麼你會得到以下結果： false == '0' // true false === '0' // false null == undefined // true null === undefined // false 根據我的經驗，在97%的情況下，你會希望使用“===”，除非“==”與你想要的完全相同。它的缺陷和邊界情況較少。 同樣，對於“!=”和“!==”，它們執行的是相同的操作，只是取反的結果。 總是使用“!==”作為默認選擇。

在JavaScript中使用類別時，使用super關鍵字是很常見的。 在本文中，我想要澄清它的用途。 假設我們有一個名為Car的類別： class Car { } 並且在這個類別中，我們有一個constructor()方法： class Car { constructor() { console.log('這是一輛汽車') } } 這個constructor方法是特別的，因為它在類別被實例化時被執行： const myCar = new Car() //'這是一輛汽車' 你可以有一個Tesla類別，它擴展了Car類別： class Tesla extends Car { } Tesla類別繼承了Car的所有方法和屬性，包括constructor方法。 我們可以創建一個Tesla類別的實例，創建一個新的myCar物件： const myCar = new Tesla() 原本在Car中的constructor仍然會被執行，因為Tesla類別沒有自己的constructor。 我們可以在Tesla類別中覆寫constructor()方法： class Tesla extends Car { constructor() { console.log('這是一輛特斯拉') } } 和 const myCar = new Tesla() 會印出這是一輛特斯拉。 在constructor()方法中，我們也可以呼叫super()來調用父類別中的同名方法： class Tesla extends Car { constructor() { super() console.log('這是一輛特斯拉') } } 呼叫 const myCar = new Tesla() 現在會執行2個console log。首先是在Car類別constructor中定義的，第二個是在Tesla類別constructor中定義的：...

介紹JavaScript中Memoization的技巧 Memoization是一種讓你的應用程式大大加速的技巧。 儘管我將這篇文章標記為“JavaScript”，但Memoization並不是JavaScript獨有的技術，我會提供一些JavaScript的例子。 Memoization是在我們運行函數後，將函數調用的結果存儲在該函數本身中的動作。下次調用該函數時，它不會再次執行“常規”運算，而是直接返回存儲的結果。 這其實是對函數進行緩存。 為什麼這很有用？ 假設我們的函數需要1秒的執行時間，而Memoization可以將這個過程加速到2毫秒。這裏明顯有個好處。 聽起來很酷。有什麼限制嗎？ Memoization僅在調用帶有相同參數集的函數時，結果相同的情況下才有效。換句話說，函數必須是純函數。否則，對結果進行緩存就沒有意義。 因此，無法優化使用Memoization的操作包括數據庫查詢、網絡請求、文件讀寫等非純函數操作。對於這些情況，您將需要找到其他方法來進行優化。或者接受它們的低效率，有時是不可避免的。 讓我們創建一個例子： // 計算num的階乘 const fact = num => { if (!fact.cache) { fact.cache = {} } if (fact.cache[num] !== undefined) { console.log(num + ' cached') return fact.cache[num]; } else { console.log(num + ' not cached') } fact.cache[num] = num === 0 ? 1 : num * fact(num - 1) return fact.cache[num] } 這個例子計算一個數字的階乘。當第一次運行fact()時，它在函數本身上創建一個cache物件屬性，用於存儲計算的結果。 每次調用時，如果在cache物件中找不到數字的結果，我們進行計算。否則，我們只返回那個結果。 試著運行它。我製作了一個Codepen來方便測試，它使用document.write()來輸出到HTML頁面（這是我很久以前用document.write()，但這次它很有用）。 請參考Memoization Example Factorial的Codepen鏈接查看運行結果。 有一些庫可以為任何純函數添加Memoization功能，這樣您就可以跳過修改函數本身的任務，只需使用這個功能將其裝飾起來。 特別要提到的是fast-memoize。...

你可能在实际的代码中看到过!!运算符。它是什么意思呢？ 假设你有一个表达式，它会给你一个结果。 你希望这个结果是一个布尔值。要么是true，要么是false。 不是一个字符串，0，一个空字符串，undefined，NaN或者其他任何值。只要是true或者false就行。 !!运算符就是为了做到这一点的。 实际上，它是两个否定运算符连在一起。JavaScript中没有!!运算符，但是有!运算符。 它首先对表达式的结果进行否定，然后再次进行否定。这样，如果你有一个非零的数字、字符串、对象、数组或者任何“真值”，你将会得到true作为结果。 否则，你将会得到false作为结果。

我们编写的许多代码涉及对事件的反应，例如I/O事件（如鼠标点击或键盘事件）和网络事件（当您监听HTTP调用时）。这就是我所说的内置事件。 在JavaScript中，我们可以创建自定义事件，并且它在浏览器和Node.js中的工作方式不同。 在前端，我们使用浏览器提供的Event对象： const anEvent = new Event('start'); 您可以使用以下代码触发事件： document.dispatchEvent(anEvent) 当发生这种情况时，事件监听器将被触发： document.addEventListener('start', event => { console.log('started!') }) 您可以使用内置的CustomEvent对象发送自定义数据，而不是使用Event对象，该对象接受一个对象作为第二个参数： const anotherEvent = new CustomEvent('start', { detail: { color: 'white' } }) 在事件监听器中，您可以使用event.detail从事件对象中获取数据（您不能使用其他属性）： document.addEventListener('start', event => { console.log('started!') console.log(event.detail) }) 在后端，Node为我们提供了一种使用events模块构建类似系统的选项。 这个模块特别提供了EventEmitter类，我们将使用它来处理我们的事件。 使用以下代码初始化： const EventEmitter = require('events') const eventEmitter = new EventEmitter() 该对象提供了许多其他方法，其中包括on和emit方法。 emit用于触发事件 on用于在事件触发时添加要执行的回调函数 例如，让我们创建一个start事件，并作为示例，我们只是将其记录到控制台： eventEmitter.on('start', () => { console.log('started') }) 当我们运行以下代码时： eventEmitter.emit('start') 事件处理函数将被触发，并且我们会得到控制台日志。 您可以通过将它们作为额外参数传递给emit()来将参数传递给事件处理程序： eventEmitter.on('start', (number) => { console.log(`started ${number}`) }) eventEmitter....