在本文中，我們將看一些常見JavaScript問題的解決方案。

[[334516]]

使用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 得到一組具有相同選擇器的元素。