對 JavaScript 開發者很是有用的 10 個技巧

時間 2020-06-15

標籤 javascript 開發者很是有用技巧欄目 JavaScript 简体版

原文原文鏈接

你可能錯過這些很是有用的技巧。javascript

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

咱們知道，JavaScript 這門語言正在高速發展中。伴隨着 ES2020，又有不少很棒的功能加入。老實說，您能夠經過許多不一樣的方式編寫代碼。實現一樣一個功能，有的代碼很長而有的卻很短。你能夠經過一些小技巧來讓你的代碼更乾淨清晰。下面這些小技巧確定對你接下來的開發工做有所用處。java

函數參數驗證器

JavaScript 容許你對函數參數設置默認值。經過這個特性，咱們能夠實現一個小技巧來驗證函數參數。數組

const isRequired = () => { throw new Error('param is required'); };
const print = (num = isRequired()) => { console.log(`printing ${num}`) };
print(2); //printing 2
print(); // error
print(null); //printing null
複製代碼

格式化 JSON 代碼

你確定對 JSON.stringify 很是熟悉了，可是你知道嗎，你也能夠經過 stringify 方法格式化你的代碼。其實這很簡單。promise

stringify 方法有三個參數，分別是 value replacer 和 space。後面兩個參數是可選的，因此咱們日常也不會用到它們。想要縮進輸出的代碼，咱們可使用2個空格，或者4個空格。函數

console.log(JSON.stringify({ name:"John", Age:23 }, null, ' '));
>>> 
{
  "name": "John",
  "Age": 23
}
複製代碼

對數組去重

以往對數組去重咱們會使用 filter 函數來過濾掉重複的值。可是如今咱們可使用新的 Set 特性來過濾。很是簡單：ui

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

去除數組中的 Boolean(v) 爲 false 的值

有時候你想刪除數組中 Boolean(v) 爲 false 的值。在 JavaScript 中只有如下 6 種：spa

undefined
null
NaN
0
空字符串
false

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

array.filter(Boolean)
複製代碼

若是你想先作一些更改而後再過濾，你能夠用下面的方法。要記住，原始數組 array 是一直沒變的，返回的是一個新數組。code

array
  .map(item => {
      // Do your changes and return the new item
  })
  .filter(Boolean);
複製代碼

同時合併多個對象

若是須要同時合併多個對象或者類，能夠用下面這種方法。

const user = {
  name: "John Ludwig",
  gender: "Male",
};
const college = {
  primary: "Mani Primary School",
  secondary: "Lass Secondary School",
};
const skills = {
  programming: "Extreme",
  swimming: "Average",
  sleeping: "Pro",
};
const summary = { ...user, ...college, ...skills };

>>>
{
  name: 'John Ludwig',
  gender: 'Male',
  primary: 'Mani Primary School',
  secondary: 'Lass Secondary School',
  programming: 'Extreme',
  swimming: 'Average',
  sleeping: 'Pro'
}
複製代碼

三個點也叫擴展操做符。

對數字數組排序

JavaScript 數組有一個原生的排序方法 arr.sort。這個排序方法默認把數組元素轉換成字符串，並對其進行字典序排序。這個默認行爲會在排序數字數組時出現問題，因此下面有一個辦法來處理這個問題。

[0, 10, 4, 9, 123, 54, 1].sort()
>>> [0, 1, 10, 123, 4, 54, 9]

[0, 10, 4, 9, 123, 54, 1].sort((a,b) => a-b);
>>> [0, 1, 4, 9, 10, 54, 123]
複製代碼

禁用右鍵

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

<body oncontextmenu="return false">
  <div></div>
</body>
複製代碼

這個簡單的代碼片斷就能夠禁止用戶點擊右鍵了。

解構時重命名

解構賦值是 JavaScript 的一個特性，它容許直接從數組或者對象中獲取值，而不須要繁瑣的聲明變量再賦值。對對象來說，咱們能夠經過下面這種方式來給屬性名從新定義一個名字。

const object = { number: 10 };
// Grabbing number
const { number } = object;
// Grabbing number and renaming it as otherNumber
const { number: otherNumber } = object;
console.log(otherNumber); // 10
複製代碼

獲取數組中的最後一項

若是你想獲取數組中的最後一項，你可使用 slice 函數，同時帶上一個負數做爲參數。

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

等待 Promises 所有執行完成

有時候你可能須要等待幾個 promise 都執行完而後進行後面的操做。你可使用 Promise.all 來並行執行這些 promise。

const PromiseArray = [
    Promise.resolve(100),
    Promise.reject(null),
    Promise.resolve("Data release"),
    Promise.reject(new Error('Something went wrong'))];
Promise.all(PromiseArray)
  .then(data => console.log('all resolved! here are the resolve values:', data))
  .catch(err => console.log('got rejected! reason:', err))
複製代碼

要注意，只要 Promise.all 中有一個是 rejected 狀態時，其會當即中止執行並拋出異常。

若是你想忽略 resolved 或者 rejected 狀態，你可使用 Promise.allSettled。這個是 ES2020 的一個新特性。

const PromiseArray = [
  Promise.resolve(100),
  Promise.reject(null),
  Promise.resolve("Data release"),
  Promise.reject(new Error("Something went wrong")),
];
Promise.allSettled(PromiseArray)
  .then((res) => {
    console.log("here", res);
  })
  .catch((err) => console.log(err));
>>>
here [
  { status: 'fulfilled', value: 100 },
  { status: 'rejected', reason: null },
  { status: 'fulfilled', value: 'Data release' },
  {
    status: 'rejected',
    reason: Error: Something went wrong
        at Object.<anonymous> 
        at Module._compile (internal/modules/cjs/loader.js:1200:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
        at Module.load (internal/modules/cjs/loader.js:1049:32)
        at Function.Module._load (internal/modules/cjs/loader.js:937:14)
        at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
        at internal/main/run_main_module.js:17:47
  }
]
複製代碼