常見JavaScript問題的解決方案是怎樣的

這期內容當中小編將會給大家帶來有關常見JavaScript問題的解決方案是怎樣的，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

使用JavaScript使窗口全屏顯示

我們可以使用全屏API使窗口全屏顯示。

例如，我們可以這樣寫：

document.documentElement.requestFullscreen();

我們只是調用 requestFullScreen 方法將窗口更改為全屏模式。

然后，我們可以調用 document.exitFullScreen 退出全屏模式。

將JavaScript NodeList轉換為數組的最快方法

我們可以使用擴展運算符(...)或 Array.from 方法將JavaScript NodeList轉換為數組。

例如，我們可以這樣寫：

const els = Array.from(document.querySelectorAll('p'));

我們可以通過以下方式使用傳播運算符：

const els = [...document.querySelectorAll('p')];

每個單詞的首字母大寫

我們可以使用一些數組方法將每個單詞的首字母大寫。

例如，我們可以這樣寫：

str = str.toLowerCase()   .split(' ')   .map((s) => `${s.charAt(0).toUpperCase()}${s.substring(1)}`)   .join(' ');

我們首先將字符串轉換為小寫，然后使用 split 拆分單詞。

然后我們調用 map 來匹配每個單詞，使其首字母大寫，其余小寫。

最后，我們調用 join 將單詞重新組合在一起。

JavaScript文件上傳大小驗證

我們可以在不使用任何庫的情況下驗證文件的大小。

例如，我們可以這樣寫：

<input onchange="validateSize(this)" type="file">

然后我們可以寫：

const validateSize = (file) => {   const fileSize = file.files[0].size;   if (fileSize > 2 * (1024 ** 2)) {     console.log('File size exceeds 2 MB');   } else {     //...   } }

我們只是獲得 file.files[0].size 屬性來驗證所選的第一個文件的大小。

file 是文件輸入。

files 具有一個或多個選定文件。

size 就是大小。

將類添加到DOM元素

要將類添加到DOM元素，我們可以使用 classList 屬性的 add 方法。

例如，我們可以這樣寫：

const element = document.querySelector('div'); element.classList.add('baz');

我們得到了div元素，然后可以使用 classList 的 add 方法添加類名。

使用%來進行模塊運算

% 運算符用于將一個數字的余數除以另一個。

但我們也可以用它來得到一個數字mod另一個數字。

例如，我們可以這樣寫：

const mod = (m, n) => ((m % n) + n) % n;

我們首先得到 m 除以 n 的余數。

然后我們再加上 n ，使之成為正數。

最后，我們得到該值除以 n 的余數 。

并列N個數組的最有效方法

我們可以使用 push 方法連接一個或多個數組。

為此，我們可以編寫：

arr.push(...a, ...b)

然后，來自 a 和 b 的所有項目將附加到 arr。

我們還可以將 concat 與多個數組一起使用。

例如，我們可以這樣寫：

arr = arr.concat(array, array1, array2, array3);

我們調用 concat，這樣我們就把每個數組的條目放在 arr 的條目之后的新數組中。

然后返回該數組。

因此，我們必須把它分配給 arr，以更新它的返回值。

根據屬性值在DOM中查找元素

我們可以基于屬性值在DOM中找到一個元素。

例如，我們可以這樣寫：

const fileInput = document.querySelector("input[type=file]");

我們通過使用 querySelector 獲得文件輸入。

它接受任何CSS選擇器，包括屬性選擇器。

type 是屬性，file 是值。

我們也可以通過使用 querySelectorAll 得到一組具有相同選擇器的元素。

上述就是小編為大家分享的常見JavaScript問題的解決方案是怎樣的了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。