JavaScript代碼編寫技巧-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)公司專注于企業(yè)營銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、汕尾網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5高端網(wǎng)站建設(shè)、商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為汕尾等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。函數(shù)參數(shù)驗(yàn)證器

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

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 方法格式化你的代碼。其實(shí)這很簡單。

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

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

對數(shù)組去重

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

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

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

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

undefined
null
NaN
0
空字符串
false

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

array.filter(Boolean)

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

array
  .map(item => {      // Do your changes and return the new item
  })
  .filter(Boolean);復(fù)制代碼

同時(shí)合并多個(gè)對象

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

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'
}

三個(gè)點(diǎn)也叫擴(kuò)展操作符。

對數(shù)字?jǐn)?shù)組排序

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

[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]

禁用右鍵

有時(shí)候你可能想要禁止用戶點(diǎn)擊右鍵。雖然這個(gè)需求很少見，但是可能派的上用場。

<body oncontextmenu="return false">
  <div></div>
</body>

這個(gè)簡單的代碼片段就可以禁止用戶點(diǎn)擊右鍵了。

解構(gòu)時(shí)重命名

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

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

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

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

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 全部執(zhí)行完成

有時(shí)候你可能需要等待幾個(gè) promise 都執(zhí)行完然后進(jìn)行后面的操作。你可以使用 Promise.all 來并行執(zhí)行這些 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 中有一個(gè)是 rejected 狀態(tài)時(shí)，其會立即停止執(zhí)行并拋出異常。

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

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
  }
]

以上就是對JavaScript開發(fā)者非常有用的10個(gè)奇淫巧計(jì)的詳細(xì)內(nèi)容，更多請關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！

網(wǎng)站名稱：JavaScript代碼編寫技巧-創(chuàng)新互聯(lián)
URL鏈接：http://jinyejixie.com/article40/ccsheo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、網(wǎng)站內(nèi)鏈、定制網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站排名、電子商務(wù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

JavaScript代碼編寫技巧-創(chuàng)新互聯(lián)