如何在 JavaScript 中將陣列分成兩半

你如何將一個陣列平均分成兩半呢? 使用陣列的 slice() 方法: const list = [1, 2, 3, 4, 5, 6] const half = Math.ceil(list.length / 2); const firstHalf = list.slice(0, half) const secondHalf = list.slice(half) 如果陣列中的元素數量是偶數,結果會平均分成兩半。 如果元素數量是奇數,例如: [1, 2, 3, 4, 5] 結果會是: [ 1, 2, 3 ] [ 4, 5 ]

如何在 JavaScript 中將數字格式化為貨幣值

透過 JavaScript 的國際化 API,了解如何將數字轉換為貨幣值。 假設你有一個數字為 10,代表某物品的價格。 你想將它轉換為 $10.00。 然而,如果數字超過3位數,則應以不同方式顯示,例如 1000 應該顯示為 $1,000.00。 然而,這僅是美元的表示方法。 不同的國家有不同的值表示習慣。 JavaScript 使用 ECMAScript 國際化 API 讓我們能夠輕鬆達成這一目標,這是一個相對較新的瀏覽器 API,提供了許多國際化功能,例如日期和時間格式化。 該 API 目前得到了很好的支援: const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2 }) formatter.format(1000) // "$1,000.00" formatter.format(10) // "$10.00" formatter.format(123233000) // "$123,233,000.00" minimumFractionDigits 屬性設定小數部分的最少位數為2位。您可以在 NumberFormat MDN 頁面 中檢查可用的其他參數。 以下是一個創建意大利國家的歐元貨幣數字格式化器的示例: const formatter = new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR' })

如何在 JavaScript 中获取当前 URL

了解 JavaScript 提供的获取当前在浏览器中打开的 URL 的方法 要使用 JavaScript 获取在浏览器中打开的页面的当前 URL,您可以依赖浏览器在 window 对象上公开的 location 属性: window.location 由于 window 是浏览器中的全局对象,因此可以将该属性引用为 location 这是一个 Location 对象,它本身具有许多属性: 当前页面的 URL 在 location.href 中公开。location 的其他属性提供了有用的信息: 代码 描述 location.hostname 主机名 location.origin 源 location.hash 哈希值,即跟在 # 符号后面的部分 location.pathname 路径 location.port 端口 location.protocol 协议 location.search 查询字符串

如何在 JavaScript 中获取数组的最后一个元素?

想知道如何在 JavaScript 中获取数组的最后一个元素吗?让我们来找答案吧。 假设你有一个数组,像这样: const colors = ['red', 'yellow', 'green', 'blue'] 在这个例子中,数组有4个元素。 你知道可以使用 colors[0] 获取第一个元素,使用 colors[1] 获取第二个元素,以此类推。 要获取最后一个元素而不事先知道它包含多少个元素,你可以使用 length 属性来确定它,而且由于数组索引从0开始,你可以通过引用 <array>.length - 1 来选择最后一个元素。 以下是一个简单的示例: const lastItem = colors[colors.length - 1] 这是一个简单的解释,教你如何在 JavaScript 中获取数组的最后一个元素!

如何在 JavaScript 中創建多行字符串

了解如何創建多行字符串 直到 2015 年引入 ES6(ECMAScript 2015)和 模板字面量,JavaScript 從未有過一個很好的處理多行字符串的方法。 模板字面量是由反引號 delimit 的字符串,而不是常規的單引號/雙引號定界符。 它們具有一個獨特的特性:它們允許多行字符串: const 多行字符串 = `一個跨行的字符串` const 另一個多行字符串 = `嘿 這很酷 一個跨行 的字 符 串 ! `

如何在 JavaScript 中确定日期是否是今天

了解如何判断一个 JavaScript Date 对象实例是否代表了“今天”这个日期时间。 给定一个 Date 实例,我们可以使用 getDate()、getMonth() 和 getFullYear() 方法来获取日期的日、月和年,并将它们与今天进行比较,可以通过 new Date() 获取今天的日期时间。 下面是一个小函数,如果参数是今天,则返回 true。 const isToday = (someDate) => { const today = new Date(); return ( someDate.getDate() === today.getDate() && someDate.getMonth() === today.getMonth() && someDate.getFullYear() === today.getFullYear() ); }; 你可以这样使用它: const today = isToday(myDate); 如果需要,可以查看JavaScript 日期指南,了解更多如何处理 Date 对象的方法。

如何在 JavaScript 中給數字添加前導零

我需要在數字小於 10 的時候添加前導零,這樣在屏幕上顯示時,不會顯示 “9” 而是 “09”。 使用案例是我想顯示視頻的時長,5:04 比 5:4 更合乎邏輯,能更清晰地表達一個視頻是 5 分鐘 4 秒。 以下是實現的方法: Math.floor(mynumber) .toString() .padStart(2, '0') 這個方法是使用 JavaScript 中內置的 Math 庫 來實現的。

如何在 JavaScript 中進行類型檢查而不使用 TypeScript

了解如何在 JavaScript 中添加類型而不使用 TypeScript。 如果你不是住在岩石下,你應該對 TypeScript 有所了解。這是一種由微軟推出的新語言,基本上它是 JavaScript 加上了類型(並編譯成 JavaScript 在瀏覽器中運行)。 雖然我在一些測試專案中使用過 TypeScript,但是我傾向於避免使用 TypeScript 來編寫我的教程,原因有很多。 首先,我主要編寫初學者教程,而 TypeScript 通常不是初學者開始的東西。 另外,我認為如果我開始使用 TypeScript 來編寫文章,就會引起混亂,不知道我在談論什麼。 TypeScript 的愛好者仍然可以參考 JavaScript 教程,因為 JavaScript 可以很好地適應他們的 TypeScript 文件,而反之則不行。 所以,我堅持學習網頁平台的基本知識而不是建立在其之上的技術。 儘管如此… 有時候在 JavaScript 中擁有類型將是有益的。它們是有幫助的。 感謝 Paul Lewis 的這個視頻,我發現我們實際上可以在 JavaScript 中擁有類型,並使用 VS Code 實現! 首先,如果你還沒有安裝 TypeScript,你需要進行安裝: npm install -g typescript 然後在你的項目根目錄中添加一個 tsconfig.json 文件。假設你的 JavaScript 文件在 src 文件夾中,以下是你在該文件中所需的最小配置: { "compilerOptions": { "outFile": "../../built/local/tsc.js", "checkJs": true, "allowJs": true }, "include": [ "src/*" ] } 你可以選擇排除文件夾,例如排除 node_modules 是一個好主意:...

如何在 JavaScript 中解構一個物件到現有變數中

我遇到了這個問題。我需要呼叫一個函式來取得一些資料: const doSomething = () => { return { a: 1, b: 2 } } const { a, b } = doSomething() 但是我需要將這一行程式碼包裹在一個 if 區塊中,以便只在使用者已登入時執行這行程式碼。然而,將 const 宣告移到 if 區塊內部的結果是,這些變數僅在該區塊內可見。 所以我想先宣告這些變數,初始化為未定義的變數,然後在資料到達後再更新它們的值。 第一部分很簡單: let a, b 接下來是比較「棘手」的部分,因為我們需要在物件解構之前刪除 const,但也需要用括號將整行程式碼包裹起來: let a, b const doSomething = () => { return { a: 1, b: 2 } } if (/\* 判斷條件 \*/) { ({ a, b } = doSomething()) } 另外,如果像我一樣不喜歡使用分號,則需要在這行程式碼之前加上一個分號,以防止可能的問題發生(如果你使用 Prettier,它也應該會自動為你加上分號): let a, b const doSomething = () => { return { a: 1, b: 2 } } if (/\* 判斷條件 \*/) { ;({ a, b } = doSomething()) } 這是必需的,就像在以下情況下我們必須執行這樣的操作一樣:...

如何在 JavaScript 中遍歷對象的屬性

這是非常常見的任務:在 JavaScript 中遍歷對象的屬性。 如果你有一個對象,你不能只使用 map()、forEach() 或 for..of 循環來遍歷它。 你會得到錯誤: const items = { 'first': new Date(), 'second': 2, 'third': 'test' } map() 會給出 TypeError: items.map is not a function: items.map(item => {}) forEach() 會給出 TypeError: items.forEach is not a function: items.forEach(item => {}) for..of 會給出 TypeError: items is not iterable: for (const item of items) {} 那麼,你可以做些什麼來進行遍歷呢? for..in 是一種更簡單的方式: for (const item in items) { console.log(item) } 你還可以調用 Object.entries() 來生成一個包含所有可枚舉屬性的數組,然後使用上述任意一種方法遍歷它:...