[轉(zhuǎn)帖]js 常用簡寫技巧（干貨滿滿）
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
分享一些自己常用的js簡寫技巧，長期更新，會(huì)著重挑選一些實(shí)用的簡寫技巧，使自己的代碼更簡潔優(yōu)雅~ 另外推薦一個(gè)只用一行代碼實(shí)現(xiàn)一個(gè)方法的實(shí)用網(wǎng)站1loc.dev If-Else 用 || 或 ?? 運(yùn)算符進(jìn)行簡化邏輯或操作符 這是常用的邏輯或操作符，會(huì)把 function(obj){ var a = obj || {} } // 等價(jià)于 =>> function(obj){ var a; if( obj === 0 || obj === "" || obj === false || obj === null || obj === undefined ){ a = {} } else { a = obj; } } 空值合并操作符 這種方法非常實(shí)用，有時(shí)候僅僅只是想判斷一個(gè)字段有沒有值，而不是把空字符串或者0也當(dāng)做false處理 function(obj){ var a = obj ?? {} } // 等價(jià)于 =>> function(obj){ var a; if( obj === null || obj === undefined ){ a = {} } else { a = obj; } } 輸入框非空的判斷（有時(shí)候不想把0當(dāng)成false可以用此方法。比如分?jǐn)?shù)0也是個(gè)值，這種情況就不能認(rèn)為是false） if(value !== null && value !== undefined && value !== ''){} // 等價(jià)于 ==> if((value ?? '') !== ''){} includes的正確使用姿勢在上面邏輯或操作符 if( obj === 0 || obj === "" || obj === false || obj === null || obj === undefined ){ // ... } // 使用includes簡化 if([0, '', false, null, undefined].includes(obj)){ // ... } 防止崩潰的可選鏈(?.)可選鏈操作符 const student = { name: "Matt", age: 27, address: { state: "New York" }, }; // LONG FORM console.log(student && student.address && student.address.ZIPCode); // Doesn't exist - Returns undefined // SHORTHAND console.log(student?.address?.ZIPCode); // Doesn't exist - Returns undefined 邏輯空賦值(??=)邏輯空賦值 const a = { duration: 50 }; a.duration ??= 10; console.log(a.duration); // expected output: 50 a.speed ??= 25; console.log(a.speed); // expected output: 25 快速生成1-10的數(shù)組生成0-9，利用了數(shù)組的下標(biāo)值 // 方法一 const arr1 = [...new Array(10).keys()] // 方法二 const arr2 = Array.from(Array(10), (v, k) => k) 生成1-10，通過map的特性 const arr2 = [...Array(10)].map((v, i) => i + 1) 快速生成10個(gè)0的數(shù)組const arr = new Array(10).fill(0) 快速生成10個(gè)[]的數(shù)組（二維數(shù)組）注意： 二維數(shù)組不能直接寫成 // 錯(cuò)誤寫法 const arr = new Array(10).fill([]) // 注意這是錯(cuò)誤寫法，不要這么寫 // 正確寫法 const arr = new Array(10).fill().map(() => new Array()) 從數(shù)組中刪除重復(fù)項(xiàng)在 Javascript 中，Set 是一個(gè)集合，它允許你僅存儲(chǔ)唯一值。這意味著刪除任何重復(fù)的值。 因此，要從數(shù)組中刪除重復(fù)項(xiàng)，你可以將其轉(zhuǎn)換為集合，然后再轉(zhuǎn)換回?cái)?shù)組。 const numbers = [1, 1, 20, 3, 3, 3, 9, 9]; const uniqueNumbers = [...new Set(numbers)]; // -> [1, 20, 3, 9] 它是如何工作的？
在沒有第三個(gè)變量的情況下交換兩個(gè)變量在 Javascript 中，你可以使用解構(gòu)從數(shù)組中拆分值。這可以應(yīng)用于交換兩個(gè)變量而無需第三個(gè) let x = 1; let y = 2; // LONGER FORM let temp = x; x = y; y = temp; // SHORTHAND [x, y] = [y, x]; 將對(duì)象的值收集到數(shù)組中用于 const info = { name: "Matt", country: "Finland", age: 35 }; // LONGER FORM let data = []; for (let key in info) { data.push(info[key]); } // SHORTHAND const data = Object.values(info); 指數(shù)運(yùn)算符（用的不多）你 雖然可以簡寫，不過我還是建議寫成 // LONGER FORM Math.pow(4,2); // 16 Math.pow(2,3); // 8 // SHORTHAND 4**2 // 16 2**3 // 8 Math.floor() 簡寫（用的不多）四舍五入 同上雖然可以簡寫，不過我還是建議寫成 // LONG FORM Math.floor(5.25) // -> 5.0 // SHORTHAND ~~5.25 // -> 5.0
該文章在 2023/5/25 18:02:10 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
