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