对 JavaScript 开发者非常有用的 10 个技巧
你可能错过这些非常有用的技巧。
翻译自?10 Super Useful Tricks for JavaScript Developers，作者?Mahdhi Rezvi。
我们知道，JavaScript 这门语言正在高速发展中。伴随着 ES2020，又有很多很棒的功能加入。老实说，您可以通过许多不同的方式编写代码。实现同样一个功能，有的代码很长而有的却很短。你可以通过一些小技巧来让你的代码更干净清晰。下面这些小技巧肯定对你接下来的开发工作有所用处。
函数参数验证器
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 方法格式化你的代码。其实这很简单。
stringify 方法有三个参数，分别是 value replacer 和 space。后面两个参数是可选的，所以我们平常也不会用到它们。想要缩进输出的代码，我们可以使用2个空格 ，或者4个空格。
console.log(JSON.stringify({?name:"John",?Age:23?},?null,?'??'));?>>>??{???"name":?"John",???"Age":?23?}?对数组去重
以往对数组去重我们会使用 filter 函数来过滤掉重复的值。但是现在我们可以使用新的 Set 特性来过滤。非常简单：
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 种：
- undefined
- null
- NaN
- 0
- 空字符串
- false
去除这些值最简单的办法是使用下面的方法：
array.filter(Boolean)?如果你想先做一些更改然后再过滤，你可以用下面的方法。要记住，原始数组 array 是一直没变的，返回的是一个新数组。
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:4?- 发表于:
- 原文链接：http://news.51cto.com/art/202006/618873.htm
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
