字符串的 charCodeAt() 方法

了解 JavaScript 字符串的 charCodeAt() 方法 在指定索引 i 处返回字符的字符编码。和 charAt() 类似,不同之处在于它返回表示字符的 Unicode 16 位整数: 'Flavio'.charCodeAt(0) // 70 'Flavio'.charCodeAt(1) // 108 'Flavio'.charCodeAt(2) // 97 在调用 toString() 之后,将返回十六进制数字,您可以在 Unicode 表格(例如 此链接)中查找。

字符串的 endsWith() 方法

深入了解 JavaScript 字符串的 endsWith() 方法 endWith() 方法用于检查一个字符串是否以传入的字符串参数的值结尾。 'JavaScript'.endsWith('Script') //true 'JavaScript'.endsWith('script') //false 你可以传入第二个参数,一个整数值,如果存在的话,endsWith() 将会将原始字符串视为指定字符数的长度: 'JavaScript'.endsWith('Script', 5) //false 'JavaScript'.endsWith('aS', 5) //true 该方法是在 ECMAScript 2015 中引入的。

字符串的 substring() 方法

了解 JavaScript 字符串的 substring() 方法 substring() 方法返回字符串的一部分,它与 slice() 方法相似,但有一些关键区别。 如果任何参数为负数,则会被转换为 0。 如果任何参数大于字符串的长度,则会被转换为字符串的长度。 所以: 'This is my car'.substring(5) //'is my car' 'This is my car'.substring(5, 10) //'is my' 'This is my car'.substring(5, 200) //'is my car' 'This is my car'.substring(-6) //'This is my car' 'This is my car'.substring(-6, 2) //'Th' 'This is my car'.substring(-6, 200) //'This is my car'

學習 JavaScript 箭頭函式的教程

箭頭函式是 ES6 / ES2015 中最具影響力的變化之一,現今廣泛使用。它們與常規函式稍有不同。讓我們來看看箭頭函式的用法。 箭頭函式是在 ES6 / ECMAScript 2015 中引入的,自那時以來,它們永遠改變了 JavaScript 代碼的外觀(和工作方式)。 在我看來,這種變化非常受歡迎,現代代碼庫中很少見到使用 function 關鍵字的情況。雖然這種用法仍然有它的用處。 從外觀上看,這是一個簡單而受歡迎的改變,它允許您使用更短的語法來編寫函式: const myFunction = function() { //... } 改為: const myFunction = () => { //... } 如果函式體只包含一條語句,您可以省略大括號,將所有內容寫在同一行上: const myFunction = () => doSomething() 參數通過括號傳遞: const myFunction = (param1, param2) => doSomething(param1, param2) 如果只有一個(且僅有一個)參數,您可以完全省略括號: const myFunction = param => doSomething(param) 由於這種簡潔的語法,箭頭函式鼓勵使用小函式。 隱式返回 箭頭函式允許您進行隱式返回:不需要使用 return 關鍵字就可以返回值。 它僅對函式體中一行的語句有效: const myFunction = () => 'test' myFunction() //'test' 另一個例子,當返回一個對象時,請記得用括號將大括號括起來,以避免它被認為是包含函式體的大括號:...

學習 Web 平台的路線圖

Web 平台是一個令人驚嘆的 API、工具和語言的生態系統,如今比以往任何時候都更加強大。通過我的路線圖,通過簡單的教程學習 Web 平台。 Web 平台是一個令人驚嘆的 API、工具、語言的生態系統,如今比以往任何時候都更加強大。 在這個博客上,我寫了很多與 Web 平台相關的教程和文章。 本文旨在將它們組織起來,讓您可以更輕松地找到它們,並作為學習如何在 Web 平台上進行開發的路線圖。 瀏覽器 API 指南 首先深入研究 DOM,這是瀏覽器提供的最基本的 API。一旦熟悉了這個,可以查看與瀏覽器相關的其他重要 API。 DOM Selectors API XHR API Fetch API Channel Messaging API Cache API Service Workers Progressive Web Apps History API Push API Notifications API Console API CORS Web Workers requestAnimationFrame WebSockets WebRTC Speech Synthesis API SVG,一個令人驚嘆的圖像格式 學習 SVG 存儲 API Web 平台提供了 3 個基本的存儲 API:cookies、Web Storage 和 IndexedDB。瞭解它們的優點和缺點: IndexedDB Cookies Web Storage Web 開發者工具 如果沒有所提供的令人驚奇的瀏覽器開發者工具,我們開發者會完全迷失和恐懼。...

學習如何使用 Redux

Redux 是一個狀態管理器,通常與 React 一起使用,但並不限於該庫。通過閱讀這個簡單且易於理解的指南,來學習 Redux。 為什麼需要 Redux 何時應該使用 Redux? 不可變的狀態樹 Actions Action types 應該是常數 Action creators Reducers 什麼是 reducer Reducer 不應該做什麼 多個 reducer reducer 的模擬 狀態 一系列的 actions 每個部分的 reducer 整個狀態的 reducer Store 我可以使用服務器端數據初始化 store 嗎? 獲取狀態 更新狀態 監聽狀態變化 數據流 為什麼需要 Redux Redux 是一個狀態管理器,通常與 React 一起使用,但它並不限於該庫 - 它也可以與其他技術一起使用。React 有自己的狀態管理方式,你可以在 React 初學者指南 中了解有關在 React 中管理狀態的方法。 將狀態向上移動到樹中適用於簡單的情况,但在複雜的應用程序中,你可能會發現你需要將幾乎所有的狀態向上移動,然後再使用 props 將其向下傳遞。 React 在 16.3.0 版本中引入了上下文 API,從不同部分訪問狀態的用例中,這使得 Redux 變得多餘,因此可以考慮使用上下文 API 而不是 Redux,除非你需要 Redux 提供的特定功能。 Redux 是一種管理應用程序狀態並將其移至外部全局存儲區的方法。有一些概念需要掌握,但一旦掌握,Redux 可以非常簡單地解決問題。...

將 click 事件添加到從 querySelectorAll 返回的 DOM 元素上

如何迭代 NodeList 並為每個元素附加事件監聽器 您可以通過使用 for..of 循環迭代 document.querySelectorAll() 調用返回的所有元素來為它們添加事件監聽器: const buttons = document.querySelectorAll("#select .button") for (const button of buttons) { button.addEventListener('click', function(event) { //... }) } 需要注意的是,document.querySelectorAll() 返回的不是數組,而是 NodeList 對象。 如果你希望,你可以使用 forEach 或 for..of 對它進行迭代,或者使用 Array.from() 將它轉換為數組。

小寫轉換的 String toLowerCase() 方法

了解 JavaScript 字串的 toLowerCase() 方法 將所有文字轉換為小寫,返回一個新的字串。 不會改變原始字串。 不接受任何參數。 使用方法: 'Testing'.toLowerCase() //'testing' 與 toLocaleLowerCase() 類似,但不考慮地域設定。

從JS日期獲取年-月-日

我遇到了這個需求。 基本上,我想要以這個形式獲取今天的日期: 2023-01-20T07:00:00+02:00 要求是T07:00:00+02:00保持不變(我不想讓時間改變)。 但我希望今天的日期是當前日期。 JS中的Date物件的toISOString()方法可以給你日期數據: '2023-01-10T07:35:37.826Z' 但我只想要年、月、日。 我本來打算使用getFullYear()等方法從日期中抽取數據,但我想到可以直接將toISOString()返回的字符串截斷,於是我使用了以下代碼: `${new Date().toISOString().slice(0, 10)}T07:00:00+02:00`

您需要多少JavaScript才能使用React?

了解一下在學習React之前是否需要學習一些東西 如果您想學習React,首先需要掌握一些基礎知識。特別是一些在React中會反覆使用的最新JavaScript功能。 有時候人們認為某個特定功能是React提供的,但實際上它只是現代JavaScript語法。 起初不需要成為這些主題的專家,但您深入研究React時,就需要更加熟練地掌握這些知識。 我將列出一些事項,並提供我撰寫的文章的連結,以幫助您快速掌握基礎知識: JavaScript類 ES模組 非同步編程的基礎知識:回調函數,Promise,async/await 箭頭函數 this關鍵字 展開運算符 解構賦值 物件字面量 JavaScript函數式編程