偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

對 JavaScript 開發(fā)者非常有用的 10 個技巧

作者：云影sky
新聞 前端
我們知道，JavaScript 這門語言正在高速發(fā)展中。伴隨著 ES2020，又有很多很棒的功能加入。

 

你可能錯過這些非常有用的技巧。

翻譯自 10 Super Useful Tricks for JavaScript Developers，作者 Mahdhi Rezvi。

我們知道，JavaScript 這門語言正在高速發(fā)展中。伴隨著 ES2020，又有很多很棒的功能加入。老實說，您可以通過許多不同的方式編寫代碼。實現(xiàn)同樣一個功能，有的代碼很長而有的卻很短。你可以通過一些小技巧來讓你的代碼更干凈清晰。下面這些小技巧肯定對你接下來的開發(fā)工作有所用處。

函數(shù)參數(shù)驗證器

JavaScript 允許你對函數(shù)參數(shù)設(shè)置默認值。通過這個特性，我們可以實現(xiàn)一個小技巧來驗證函數(shù)參數(shù)。

  1. const isRequired = () => { throw new Error('param is required'); }; 
  2. const print = (num = isRequired()) => { console.log(`printing ${num}`) }; 
  3. print(2); //printing 2 
  4. print(); // error 
  5. print(null); //printing null 

格式化 JSON 代碼

你肯定對 JSON.stringify 非常熟悉了，但是你知道嗎，你也可以通過 stringify 方法格式化你的代碼。其實這很簡單。

stringify 方法有三個參數(shù)，分別是 value replacer 和 space。后面兩個參數(shù)是可選的，所以我們平常也不會用到它們。想要縮進輸出的代碼，我們可以使用2個空格 ，或者4個空格。

  1. console.log(JSON.stringify({ name:"John", Age:23 }, null, '  ')); 
  2. >>>  
  3. { 
  4.   "name": "John", 
  5.   "Age": 23 
  6. } 

對數(shù)組去重

以往對數(shù)組去重我們會使用 filter 函數(shù)來過濾掉重復的值。但是現(xiàn)在我們可以使用新的 Set 特性來過濾。非常簡單：

  1. let uniqueArray = [...new Set([1, 2, 3, 3, 3, "school", "school", 'ball', false, false, true, true])]; 
  2. >>> [1, 2, 3, "school", "ball", false, true] 

去除數(shù)組中的 Boolean(v) 為 false 的值

有時候你想刪除數(shù)組中 Boolean(v) 為 false 的值。在 JavaScript 中只有以下 6 種：

  • undefined
  • null
  • NaN
  • 0
  • 空字符串
  • false

去除這些值最簡單的辦法是使用下面的方法：

  1. array.filter(Boolean) 

如果你想先做一些更改然后再過濾，你可以用下面的方法。要記住，原始數(shù)組 array 是一直沒變的，返回的是一個新數(shù)組。

  1. array 
  2.   .map(item => { 
  3.       // Do your changes and return the new item 
  4.   }) 
  5.   .filter(Boolean); 

同時合并多個對象

如果需要同時合并多個對象或者類，可以用下面這種方法。

  1. const user = { 
  2.   name: "John Ludwig", 
  3.   gender: "Male", 
  4. }; 
  5. const college = { 
  6.   primary: "Mani Primary School", 
  7.   secondary: "Lass Secondary School", 
  8. }; 
  9. const skills = { 
  10.   programming: "Extreme", 
  11.   swimming: "Average", 
  12.   sleeping: "Pro", 
  13. }; 
  14. const summary = { ...user, ...college, ...skills }; 
  15.  
  16. >>> 
  17. { 
  18.   name: 'John Ludwig', 
  19.   gender: 'Male', 
  20.   primary: 'Mani Primary School', 
  21.   secondary: 'Lass Secondary School', 
  22.   programming: 'Extreme', 
  23.   swimming: 'Average', 
  24.   sleeping: 'Pro' 
  25. } 

三個點也叫擴展操作符。

對數(shù)字數(shù)組排序

JavaScript 數(shù)組有一個原生的排序方法 arr.sort。 這個排序方法默認把數(shù)組元素轉(zhuǎn)換成字符串，并對其進行字典序排序。這個默認行為會在排序數(shù)字數(shù)組時出現(xiàn)問題，所以下面有一個辦法來處理這個問題。

  1. [0, 10, 4, 9, 123, 54, 1].sort() 
  2. >>> [0, 1, 10, 123, 4, 54, 9] 
  3.  
  4. [0, 10, 4, 9, 123, 54, 1].sort((a,b) => a-b); 
  5. >>> [0, 1, 4, 9, 10, 54, 123] 

禁用右鍵

有時候你可能想要禁止用戶點擊右鍵。雖然這個需求很少見，但是可能派的上用場。

  1. <body oncontextmenu="return false"> 
  2.   <div></div> 
  3. </body> 

這個簡單的代碼片段就可以禁止用戶點擊右鍵了。

解構(gòu)時重命名

解構(gòu)賦值是 JavaScript 的一個特性，它允許直接從數(shù)組或者對象中獲取值，而不需要繁瑣的聲明變量再賦值。對對象來講，我們可以通過下面這種方式來給屬性名重新定義一個名字。

  1. const object = { number: 10 }; 
  2. // Grabbing number 
  3. const { number } = object; 
  4. // Grabbing number and renaming it as otherNumber 
  5. const { number: otherNumber } = object; 
  6. console.log(otherNumber); // 10 

獲取數(shù)組中的最后一項

如果你想獲取數(shù)組中的最后一項，你可以使用 slice 函數(shù)，同時帶上一個負數(shù)作為參數(shù)。

  1. let array = [0, 1, 2, 3, 4, 5, 6, 7]  
  2. console.log(array.slice(-1)); 
  3. >>>[7] 
  4. console.log(array.slice(-2)); 
  5. >>>[6, 7] 
  6. console.log(array.slice(-3)); 
  7. >>>[5, 6, 7] 

等待 Promises 全部執(zhí)行完成

有時候你可能需要等待幾個 promise 都執(zhí)行完然后進行后面的操作。你可以使用 Promise.all 來并行執(zhí)行這些 promise。

  1. const PromiseArray = [ 
  2.     Promise.resolve(100), 
  3.     Promise.reject(null), 
  4.     Promise.resolve("Data release"), 
  5.     Promise.reject(new Error('Something went wrong'))]; 
  6. Promise.all(PromiseArray) 
  7.   .then(data => console.log('all resolved! here are the resolve values:', data)) 
  8.   .catch(err => console.log('got rejected! reason:', err)) 

要注意，只要 Promise.all 中有一個是 rejected 狀態(tài)時，其會立即停止執(zhí)行并拋出異常。

如果你想忽略 resolved 或者 rejected 狀態(tài)，你可以使用 Promise.allSettled。這個是 ES2020 的一個新特性。

  1. const PromiseArray = [ 
  2.   Promise.resolve(100), 
  3.   Promise.reject(null), 
  4.   Promise.resolve("Data release"), 
  5.   Promise.reject(new Error("Something went wrong")), 
  6. ]; 
  7. Promise.allSettled(PromiseArray) 
  8.   .then((res) => { 
  9.     console.log("here", res); 
  10.   }) 
  11.   .catch((err) => console.log(err)); 
  12. >>> 
  13. here [ 
  14.   { status: 'fulfilled', value: 100 }, 
  15.   { status: 'rejected', reason: null }, 
  16.   { status: 'fulfilled', value: 'Data release' }, 
  17.   { 
  18.     status: 'rejected', 
  19.     reason: Error: Something went wrong 
  20.         at Object.<anonymous>  
  21.         at Module._compile (internal/modules/cjs/loader.js:1200:30) 
  22.         at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10) 
  23.         at Module.load (internal/modules/cjs/loader.js:1049:32) 
  24.         at Function.Module._load (internal/modules/cjs/loader.js:937:14) 
  25.         at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) 
  26.         at internal/main/run_main_module.js:17:4 

 

責任編輯：張燕妮 來源： 今日頭條
JavaScript開發(fā) 技巧
相關(guān)推薦

2012-05-25 14:20:08

JavaScript

2012-04-17 09:44:08

JavaScript

2015-08-12 11:09:42

開發(fā)者設(shè)計原則

2011-07-15 10:02:01

JavaScript

2009-02-09 11:20:06

Windows7Windows

2020-10-29 10:00:55

Python函數(shù)文件

2023-02-19 15:22:22

React技巧

2011-07-07 17:16:43

PHP

2018-08-03 10:02:05

Linux命令

2023-06-13 15:15:02

JavaScript前端編程語言

2022-09-02 23:08:04

JavaScript技巧開發(fā)

2025-02-13 08:06:54

2013-08-12 15:00:24

LinuxLinux命令

2013-08-13 10:46:51

LinuxLinux命令

2014-09-18 09:50:32

Ruby on Rai

2017-08-02 13:32:18

編程Java程序片段

2009-03-24 14:23:59

PHP類庫PHP開發(fā)PHP

2014-02-09 09:50:49

PHP函數(shù)

2020-05-29 07:00:00

Python機器學習編程語言

2009-05-18 16:58:56

Java代碼片段
點贊
收藏

51CTO技術(shù)棧公眾號