JavaScript

ECMAScript是JavaScript所基於的標準，通常被簡稱為ES。了解有關ECMAScript的所有信息，以及ES2018（也稱為ES9）中新增的功能。 Rest/Spread 屬性 異步迭代 Promise.prototype.finally() 正則表達式改進 RegExp 正向匹配斷言：基於前置字符進行匹配 Unicode 屬性逸脫\p{…} 和\P{…} 命名捕獲組 正則表達式的s標記 ES2018是ECMAScript標準的最新版本。 它引入了哪些新功能？ Rest/Spread 屬性 ES6在處理數組解構時引入了“rest”元素的概念： const numbers = [1, 2, 3, 4, 5] [first, second, ...others] = numbers 以及spread元素： const numbers = [1, 2, 3, 4, 5] const sum = (a, b, c, d, e) => a + b + c + d + e const sumOfNumbers = sum(...numbers) ES2018引入了同樣功能，但針對對象。 Rest 屬性： const { first, second, ...others } = { first: 1, second: 2, third: 3, fourth: 4, fifth: 5 } first // 1 second // 2 others // { third: 3, fourth: 4, fifth: 5 } Spread 屬性允許通過結合在spread運算符之後傳遞的對象的屬性來創建新對象：...

ECMAScript是JavaScript基于的标准，通常缩写为ES。了解关于ECMAScript的一切以及ES6（又称ES2015）中添加的功能。 箭头函数 新的this作用域 Promises 生成器 let和const 类 构造函数 Super 取值器和存值器 模块 导入模块 导出模块 模板字符串 默认参数 展开运算符 解构赋值 增强的对象字面量 更简洁的语法来包含变量 原型 super() 动态属性 for-of循环 Map和Set 新的字符串方法 新的对象方法 ECMAScript 2015，也称为ES6，是ECMAScript标准的基本版本。 与最新的标准修订相隔4年发布，ECMAScript 5.1，它也标志着从版本号转换为年份的变化。 因此不应该称为ES6（尽管每个人都这样称呼），而应该称为ES2015。 ES5的制定历经了10年，从1999年到2009年，因此它也是一次基本而非常重要的语言修订，但现在已经过去了很长时间，没有必要讨论ES5之前的代码是如何工作的了。 由于ES5.1和ES6之间过去了很长时间，因此发布版本中充满了重要的新功能和对JavaScript程序开发中推荐最佳实践的重大变化。要了解ES2015有多么基础，请记住，随着这个版本，规范文档从250页增加到了~600页。 本文描述了最重要的变化。 箭头函数 自引入以来，箭头函数改变了大多数JavaScript代码的外观（和工作原理）。 从视觉上看，这是一个简单而受欢迎的变化，从： const something = function something() { //... } 到 const something = () => { //... } 如果函数体只有一行代码，只需： const something = () => doSomething() 此外，如果只有一个参数，可以写成： const something = param => doSomething(param) 这并不是一个破坏性的变化，常规的function仍然像以前一样工作。 新的this作用域 箭头函数的this作用域是从上下文继承的。...

了解所有關於 Fetch API 的知識，這是一種基於 Promise 的異步網路請求的現代方法。 介紹 Fetch API 使用 Fetch 捕捉錯誤 Response 物件 Metadata headers status statusText url 內容主體 Request 物件 請求標頭 POST 請求 如何取消 Fetch 請求 尋找更多資訊？ 介紹 Fetch API 自從 IE5 在1998年釋出以來，我們在瀏覽器中有使用 XMLHttpRequest (XHR) 這個選項進行異步網路請求。 在幾年之後，GMail 和其他豐富的應用程式廣泛使用它，使得這種方法變得非常受歡迎，甚至需要一個名稱，AJAX。 直接使用 XMLHttpRequest 一直都很麻煩，所以通常會被某些庫抽象化，而 jQuery 就有其自己的相關幫助方法： jQuery.ajax() jQuery.get() jQuery.post() 它們對於使得這一切變得更加容易特別有著巨大的影響，尤其是在保證它們在舊版瀏覽器上的兼容性方面。 Fetch API 就是一種現代化的異步網路請求方法，並使用 Promises 作為其基礎。 Fetch 在主要的瀏覽器上有著良好的支援，除了 IE。 由 GitHub 提供的 polyfill https://github.com/github/fetch 讓我們可以在任何瀏覽器上使用 fetch。 使用 Fetch 開始使用 Fetch 發送 GET 請求非常簡單：...

如何使用JavaScript檢測是否正在使用廣告攔截程序 我使用的一種方法是，在我知道正在使用廣告攔截程序的情況下為網站添加自己的廣告。 對於像程序員這樣的專業使用者和技術人員來說，使用廣告攔截程序非常常見。 在我的網站上，我估計大約有20%到25%的訪問者使用某種形式的廣告攔截程序。 我對此沒有任何問題，儘管我支持通過廣告來維持博客運營，但我想做的一件事是，只有在啟用了廣告攔截程序時，才能推廣我自己的產品，這樣您才不會看到我使用的廣告網絡Carbon的廣告，而是一個我想要推廣的鏈接。 我不希望看到這種技術被用來顯示“停用廣告攔截程序！”這樣的消息，因為我發現當它被使用時，這很煩人。如果您這樣做，可以考慮促銷自己的產品，而不是廣告別人的產品。只是一個想法。 如果您現在啟用了廣告攔截程序，您可以在標題後面看到一個“贊助”詞語-那就是我想要推廣的產品-一個我目前正在構建的東西，我正在通過查看有多少人註冊等待列表來測試這個想法。 如果未啟用廣告攔截程序，該位置上會有一個廣告，所以我不想同時顯示太多廣告，以免對幫助經營這個博客的好人們產生不好的體驗。 這個JavaScript片段幫助我實現了這一點。 let adBlockEnabled = false const ad = document.createElement('div') ad.innerHTML = ' ' ad.className = 'adsbox' document.body.appendChild(ad) window.setTimeout(function() { if (ad.offsetHeight === 0) { adblockEnabled = true } ad.remove() console.log('是否阻擋了廣告？ ', adblockEnabled) } }, 100) 請確保將它放在頁面底部以在DOM加載完成時運行，或者等待DOMContentLoaded事件。 一旦獲取到adblockEnabled的值，您就可以將自己的自定義廣告添加到頁面。 這是我用於執行此操作的腳本： if (adblockEnabled) { const link = document.createElement('a') link.setAttribute('href', 'https://flaviocopes.com') link.setAttribute('target', '_blank') const img = document.createElement('img') img.src = '/img/image.png' img.style.paddingBottom = '30px' img.style.margin = '0 auto' img....

＃如何使用JavaScript獲取昨天的日期 你想要使用JavaScript獲取昨天的日期嗎？ 那就先獲取當前時間的日期（今天），然後從它減去一天： const today = new Date() const yesterday = new Date(today) yesterday.setDate(yesterday.getDate() - 1) today.toDateString() yesterday.toDateString() 我們使用yesterday的setDate()方法，將當前日期減去一天作為參數。 即使今天是月份的第一天，JavaScript也會聰明地指向上個月的最後一天。

＃如何學習React 找出從零開始成為React大師的最佳途徑 你該如何學習React？ 和大多數事物一樣，你需要付出一些努力，找到一個好的學習資源，保持學習的一致性，並儘早將所學的應用到實踐中，以加強你的學習並讓所學的知識牢記在腦中。 但是…你應該從哪裡開始？ 在本文中，我想列出一些我創建的資源，用於從零開始成為React大師。 首先，你需要堅實的JavaScript基礎。如果你剛開始學習，花點時間深入研究JavaScript基礎知識，再深入學習React。我建議你先閱讀我的JavaScript手冊。 如果你的JavaScript基礎還可以，但有點生疏且不熟悉最新的ECMAScript標準，我的ES5到ESNext手冊也是一個很好的參考資料。 接下來，我的React手冊將成為你最好的朋友。我在這份手冊中花了很多時間，確保它提供了你成為出色的React開發者所需的所有基礎知識。 我認為這些資源會讓你忙上一段時間。 正如我之前提到的，實踐至上。在學習的過程中，專注於每天建立一些東西，即使只是簡單的項目。不要僅僅閱讀理論，要將它應用到實踐中。建立示範應用程式。我有一個示範應用程式點子的長列表，可以從中獲得靈感。 我還開設了一門React課程，在課程中，我將教你如何使用React建立6個實用的項目（當然包括Hooks）。

＃如何列出JavaScript物件的所有方法 找出如何獲取包含JavaScript物件方法的陣列 我們可以使用 ‘Object.getOwnPropertyNames（）’ 函數來獲取與物件相關聯的所有屬性名稱。 然後，我們可以過濾結果陣列，只包括那些屬性名稱是函數的。 我們可以通過使用typeof來判斷它是否為一個函數。 例如，以下是我們可能創建的實用程式函數： getMethods = (obj) => Object.getOwnPropertyNames(obj).filter(item => typeof obj[item] === 'function') 這只列出在特定物件上定義的方法，而不是在其原型鏈中定義的任何方法。 要做到這一點，我們必須採取稍微不同的路線。我們必須首先迭代原型鏈並將所有屬性列在一個陣列中。然後，我們檢查每個單個屬性是否為函數。 為了確保在瀏覽原型鏈時不重複方法（例如始終存在的 constructor ），我們使用了一個Set數據結構，它確保值是唯一的： const getMethods = (obj) => { let properties = new Set() let currentObj = obj do { Object.getOwnPropertyNames(currentObj).map(item => properties.add(item)) } while ((currentObj = Object.getPrototypeOf(currentObj))) return [...properties.keys()].filter(item => typeof obj[item] === 'function') } 使用示例： getMethods("") getMethods(new String('test')) getMethods({}) getMethods(Date.prototype)

＃如何在JavaScript中刪除數字前面的零 如果你有一個以零開頭的數字，比如 010 或者 02，你該如何刪除那個零呢？ 有多種方法。 最明確的方法是使用 parseInt()： parseInt(number, 10) 10 是進制，應該始終指定以避免在不同瀏覽器上出現不一致，儘管一些引擎可以正常工作而不需要指定進制。 另一種方法是使用 + 一元運算符： +number 這些都是最簡單的解決方案。 你還可以使用正則表達式，像這樣： number.replace(/^0+/, '')

了解 JavaScript 中 Number 對象的 isInteger() 方法 當傳入的值為整數時，返回 true。否則，當值是布爾型、字符串、對象、數組時，返回 false。 Number.isInteger(1) //true Number.isInteger(-237) //true Number.isInteger(0) //true Number.isInteger(0.2) //false Number.isInteger('Flavio') //false Number.isInteger(true) //false Number.isInteger({}) //false Number.isInteger([1, 2, 3]) //false

了解 JavaScript in 運算子的基礎知識。 in 運算子非常實用，它可以檢查一個物件是否具有某個屬性。 如果第一個運算元是右側物件或其原型鏈中的一個屬性，該運算子會返回 true；否則返回 false。 舉個例子： class Car { constructor() { this.wheels = 4 } } class Fiesta extends Car { constructor() { super() this.brand = 'Ford' } } const myCar = new Fiesta() 'brand' in myCar // true 'wheels' in myCar // true