狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

作為一名 JavaScript 開發(fā)者，你是否也曾被繁瑣的代碼、重復的勞動困擾？

想要更高效地開發(fā)，寫出更簡潔的代碼，你需要掌握一些實用的技巧和工具。本文將帶你領略 JavaScript 代碼片段中的常見技巧，助你提升開發(fā)效率，打造更優(yōu)雅的應用！

數(shù)組操作：高效處理數(shù)據(jù)集合

1. 聲明和初始化數(shù)組

使用 Array(5).fill('') 可以輕松初始化一個指定大小的數(shù)組，并用默認值填充。 對于二維數(shù)組/矩陣，可以使用嵌套的 map 和 fill 方法：

javascript代碼解讀復制代碼const array = Array(5).fill(''); // ["", "", "", "", ""]  const matrix = Array(5).fill(0).map(() => Array(5).fill(0));  // [Array(5), Array(5), Array(5), Array(5), Array(5)] // 0: (5) [0, 0, 0, 0, 0] // 1: (5) [0, 0, 0, 0, 0] // ...  // length: 5 

2. 過濾數(shù)組中的假值

使用 filter(Boolean) 可以快速過濾數(shù)組中的假值（0、undefined、null、false、""、''）：

javascript代碼解讀復制代碼const array = [3, 0, 6, 7, '', false]; array.filter(Boolean); // [3, 6, 7] 

3. 數(shù)組查找

indexOf() 可以查找元素在數(shù)組中的位置，找不到則返回 -1。 可以使用按位非運算符（~） 簡化判斷：

javascript代碼解讀復制代碼if (~arr.indexOf(item)) { // 找到元素   // ... }  if (!~arr.indexOf(item)) { // 未找到元素   // ... } 

或者使用 includes() 進行更簡潔的判斷：

javascript代碼解讀復制代碼if (arr.includes(item)) {    // ... } 

4. 洗牌數(shù)組

使用 sort() 方法結(jié)合 Math.random() 可以輕松實現(xiàn)洗牌：

javascript代碼解讀復制代碼const list = [1, 2, 3, 4, 5, 6, 7, 8, 9]; list.sort(() => Math.random() - 0.5); // 隨機排序 

5. 清空數(shù)組

使用 arr.length = 0 直接清空數(shù)組，而 arr = [] 只是重新賦值，原來的數(shù)組仍然占用內(nèi)存。

javascript代碼解讀復制代碼// 清空原始數(shù)組： arr.length = 0;  // 重新賦值給一個新的空數(shù)組： arr = []; 

6. 并集、交集和差集

使用 Set 對象可以方便地進行數(shù)組的并集、交集和差集操作：

javascript代碼解讀復制代碼let a = new Set([1, 2, 3]); let b = new Set([4, 3, 2]);  // 并集 let union = new Set([...a, ...b]); // Set {1, 2, 3, 4}  // 交集 let intersect = new Set([...a].filter(x => b.has(x))); // Set {2, 3}  // 差集 let difference = new Set([...a].filter(x => !b.has(x))); // Set {1} 

邏輯運算：巧妙運用條件判斷

7. 使用邏輯運算符簡化條件判斷

使用 || 和 && 可以簡化嵌套的 if...else 或 switch 語句：

javascript代碼解讀復制代碼function doSomething(arg1) {   arg1 = arg1 || 10; // 如果 arg1 未設置，則將其設置為 10   return arg1; }  let foo = 10; foo === 10 && doSomething(); // 輸出: 10 foo === 5 || doSomething(); // 輸出: 10 

8. 可選鏈：安全訪問對象屬性

可選鏈 ?. 在訪問可能為空的對象屬性時，可以避免錯誤，返回 undefined：

javascript代碼解讀復制代碼const user = { employee: { name: "Kapil" } };  user.employee?.name; // 輸出: "Kapil" user.employ?.name; // 輸出: undefined  

9. 空值合并運算符：提供默認值

?? 運算符可以提供默認值，當左側(cè)操作數(shù)為 null 或 undefined 時，返回右側(cè)操作數(shù)：

javascript代碼解讀復制代碼const foo = null ?? 'my school'; // 輸出: "my school"  const baz = 0 ?? 42; // 輸出: 0 

10. ||= 和 ??=：條件賦值

||= 僅在左側(cè)為假值時賦值，而 ??= 僅在左側(cè)為 null 或 undefined 時賦值：

javascript代碼解讀復制代碼let x = null; x ||= 5; // 輸出: 5 let y = 10; y ||= 7; // 輸出: 10  let a = null; a ??= 5; // 輸出: 5 let b = 10; b ??= 7; // 輸出: 10 

數(shù)字操作：靈活處理數(shù)值類型

11. 進制轉(zhuǎn)換

使用 toString() 方法可以將十進制數(shù)字轉(zhuǎn)換為二進制、十六進制等：

javascript代碼解讀復制代碼const num = 10;  num.toString(2); // 輸出: "1010"  num.toString(16); // 輸出: "a" num.toString(8); // 輸出: "12" 

12. 獲取隨機整數(shù)

使用 Math.random() 和 Math.floor() 可以獲取指定范圍內(nèi)的隨機整數(shù)：

javascript代碼解讀復制代碼const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);  random(1, 50); // 返回 1 到 50 之間的隨機整數(shù) 

13. 字符串轉(zhuǎn)數(shù)字

使用 + 或 Number() 可以快速將字符串轉(zhuǎn)換為數(shù)字：

javascript代碼解讀復制代碼let str = '2'; console.log(Number(str));  // 2 console.log(+str);  // 2 

14. 科學計數(shù)法

使用科學計數(shù)法可以簡潔地表示較大的數(shù)字：

javascript代碼解讀復制代碼for (let i = 0; i < 1e7; i++) {}  // 這些比較都返回 true 1e0 === 1; 1e1 === 10; 1e2 === 100; // ... 

對象操作：靈活處理數(shù)據(jù)結(jié)構(gòu)

15. 檢查對象是否為空

使用 Reflect.ownKeys() 和 constructor 屬性可以判斷對象是否為空：

javascript代碼解讀復制代碼const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;  isEmpty({}); // true isEmpty({a: "not empty"}); // false 

16. 動態(tài)屬性名

使用方括號可以動態(tài)設置對象屬性名：

javascript代碼解讀復制代碼const key = 'name'; const person = { [key]: 'Alice' }; console.log(person.name); // 輸出: Alice 

字符串操作：高效處理文本數(shù)據(jù)

17. 首字母大寫

使用 charAt() 和 toUpperCase() 可以輕松實現(xiàn)首字母大寫：

javascript代碼解讀復制代碼const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);  capitalize("hello world"); // "Hello world" 

18. 反轉(zhuǎn)字符串

使用 split()、reverse() 和 join() 方法可以輕松實現(xiàn)字符串反轉(zhuǎn)：

javascript代碼解讀復制代碼const reverse = str => str.split('').reverse().join('');  reverse('hello world'); // "dlrow olleh" 

19. 過濾特殊字符

使用正則表達式可以方便地過濾字符串中的特殊字符：

javascript代碼解讀復制代碼function filterCharacter(str) {   let pattern = new RegExp("[`~!@#$^&*()=：""'。，、？|{}':;'%,\\[\\].<>/?~！@#￥……&*（）&;—|{ }【】'；]");   let resultStr = "";   for (let i = 0; i < str.length; i++) {     resultStr = resultStr + str.substr(i, 1).replace(pattern, '');   }   return resultStr; }  filterCharacter('gyaskjdhy12316789#$%^&!@#1=123,./['); // "gyaskjdhy123167891123" 

瀏覽器操作：與瀏覽器交互

20. 將內(nèi)容復制到剪貼板

使用 navigator.clipboard.writeText() 可以將文本復制到剪貼板：

javascript代碼解讀復制代碼const copyToClipboard = (text) => navigator.clipboard.writeText(text);  copyToClipboard("Hello World");  

21. 清除所有 Cookie

使用 document.cookie 可以操作 Cookie：

javascript代碼解讀復制代碼const clearCookies = document.cookie.split(';').forEach(   cookie => document.cookie = cookie.replace(/^ +/, '')   .replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`) ); 

22. 獲取選中的文本

使用 window.getSelection().toString() 可以獲取用戶選中的文本：

javascript代碼解讀復制代碼const getSelectedText = () => window.getSelection().toString(); 

23. 滾動到頁面頂部

使用 window.scrollTo() 可以控制頁面滾動：

javascript代碼解讀復制代碼const goToTop = () => window.scrollTo(0, 0); 

24. 檢查是否滾動到底部

使用 document.documentElement.clientHeight、window.scrollY 和 document.documentElement.scrollHeight 可以判斷頁面是否滾動到底部：

javascript代碼解讀復制代碼const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY                               >= document.documentElement.scrollHeight; 

25. 檢查選項卡是否處于活動狀態(tài)

使用 document.hidden 可以判斷當前選項卡是否處于活動狀態(tài)：

javascript代碼解讀復制代碼const isTabInView = () => !document.hidden; 

26. 重定向到 URL

使用 location.href 可以進行頁面重定向：

javascript代碼解讀復制代碼const redirect = url => location.href = url;  redirect("https://www.google.com/"); 

27. 打開打印對話框

使用 window.print() 可以打開打印對話框：

javascript代碼解讀復制代碼const showPrintDialog = () => window.print(); 

URL 操作：解析和處理 URL 信息

28. 從 URL 獲取參數(shù)并轉(zhuǎn)換為對象

使用 URL.split("?") 和 JSON.parse() 可以解析 URL 參數(shù)并轉(zhuǎn)換為對象：

javascript代碼解讀復制代碼const getParameters = URL => JSON.parse(`{"${decodeURI(URL.split("?")[1]).replace(/"/g, '\"').replace(/&/g, '","').replace(/=/g, '":"')}"}`);  getParameters("https://www.google.com.hk/search?q=js+md&newwindow=1");  // {q: 'js+md', newwindow: '1'} 

其他實用技巧

29. 檢查是否為函數(shù)

使用 typeof 可以判斷一個對象是否為函數(shù)：

javascript代碼解讀復制代碼const isFunction = (obj) => typeof obj === "function" && typeof obj.nodeType !== "number" && typeof obj.item !== "function"; 

30. 防抖和節(jié)流

防抖: 在一段時間內(nèi)只執(zhí)行一次，即使觸發(fā)多次事件，也只執(zhí)行最后一次。

節(jié)流: 在指定時間范圍內(nèi)，即使觸發(fā)多次事件，也只執(zhí)行一次。

javascript代碼解讀復制代碼// 防抖 function debounce(fn, delay) {   let timer = null;   return function () {     if (timer) {       clearTimeout(timer);     }     timer = setTimeout(() => {       fn.apply(this);     }, delay);   }; }  // 節(jié)流 function throttle(fn) {   let timer = null;   return function () {     if (timer) return;     timer = setTimeout(() => {       fn.apply(this, arguments);       timer = null;     }, 1000);   }; } 

31. 常見的正則表達式驗證

使用正則表達式可以對常見的輸入數(shù)據(jù)進行驗證：

javascript代碼解讀復制代碼// 驗證 2-9 個中文字符 const validateName = (name) => /^[\u4e00-\u9fa5]{2,9}$/.test(name);  // 驗證手機號 const validatePhoneNum = (mobile) => /^1[3-9]\d{9}$/.test(mobile);  // 驗證密碼（6-18 個字符：字母、數(shù)字、下劃線） const validatePassword = (password) => /^[a-zA-Z0-9_]{6,18}$/.test(password); 

良好的編碼習慣

32. 使用解構(gòu)

使用解構(gòu)可以使代碼更簡潔：

javascript代碼解讀復制代碼const person = { name: "Alice", age: 25 }; const { name, age } = person;  console.log(name, age); // "Alice" 25 

33. 巧妙利用 JS 隱式類型轉(zhuǎn)換

使用 +、!! 和 + '' 可以快速進行類型轉(zhuǎn)換：

javascript代碼解讀復制代碼const price = +'32'; // 轉(zhuǎn)換為數(shù)字 const isTrue = !!''; // 轉(zhuǎn)換為布爾值 const str = 1 + ''; // 轉(zhuǎn)換為字符串 

34. 使用 return 代替 if...else

使用 return 可以簡化 if...else 語句，使代碼更易讀：

javascript代碼解讀復制代碼if (condition1) {   // 執(zhí)行 condition1    return; }  if (condition2) {   // 執(zhí)行 condition2   return; } if (condition3) {   // 執(zhí)行 condition3    return; } 

總結(jié)

掌握這些 JavaScript 代碼片段中的實用技巧，可以幫助你提升代碼效率，寫出更優(yōu)雅的代碼。不斷學習和實踐，你將發(fā)現(xiàn)更多提升開發(fā)效率的利器！ 祝你編碼愉快，創(chuàng)造出更精彩的應用！ ??