你或许错过这些十分有用的技巧。
翻译自 10 Super Useful Tricks for JavaScript Developers，作者 Mahdhi Rezvi。
咱们知道，JavaScript– | J 4 这门言语正在高速发展中。伴随着 ES2020，又有许多很棒的功用加入。老实说，您能够经过许多不同的方式编写代码。实现相同一个功用，有的代码很长而有的却很短。你能够经过一些小技巧来让你的代码更干_ ! 2 :净明晰。下面这些小技巧肯定对你接下来的开发工作有所用处。
函数参数验证器
JavaScript 答应你对函数参数设置默许值。经过这个特性，咱们能够实现一个小技巧来验证函J i b 2数参数。
const isRequired = () => { throw new Error('param is required'); };
const print = (num = isRequired()) =` A 4 1> { console.log(`printing ${num}`) };
print(2); //printing 2
print(); // error
print(null); //printing null
格式化 JSON 代码
你肯定对 JSON.st. H 1 bringify 十分熟悉了，可是你知道吗，你也能 k _ x l够经过 stringify 方法格式Q C V l N 1 ,化你的代码。其实这很简略。
stringify 方法有三个参数，分别是 value replacer 和 space。后边两个参数是可选的，所以L p O m A Z I咱们平常也不会用到它们。想要缩进输出的代码，咱们能够运用2个空格 ，或许4个空格。
console.log(JSON; f V M ) T k.stringify({ name:", ` $ @ m ! G VJohn", Age:z q w |23 }, nub P L a @ *ll, '^ / ) t ; ? ~ g '));
>>>
{
"name": "John",
"Age": 23
}
对数组去重
以往对数组去重咱们会运用 filter 函数来过滤掉重复的值。可是现在咱们能够运用新的 Set 特性来过滤。十分简略：
let uniK g ] A r X GqueArray = [...new Set([1, 2, 3, 3, 3, "school", "school", 'ball', false, false, true, true])];
>>> [1, 2, 3,L N N ` "schoj ( wol", "ball", false, true]
去除数组中的 Boolean(v) 为 false 的值
有时候你想删去数组中 Boolean(v) 为 false 的值。在 JavaScript 中只需以下i ? J A @ } 6 种：
undG ] G A 3 ) 3efinednullNaN0- 空字2 4 U 9 j / p e符串
false
去除这些值最简略的方法是运用下面的方法：
array.filter(Boolean)
假如你想先做一些更改然后再过滤，你能够用下面的方法。要记住，原始数组 array 是一向没变的，返回的是一个新数组。K | 1
array
.map(item => {
// Do yl n mour changes and retuT u wrn the new item
})
.filter(Boo? ) S l f + B rlean);
一起兼并多个目标
假如需要一起兼并多个目标或许c H j .类，能够用下面这种方法。
c. S % v f donst user = {
namez . 5 * a t & 4: Z 7 | D ) E c S"JohnD d . { _ Ludwig",
gender: "MaU e Jle",
};
const college = {
primary: "Mani Primary School",
seconda} W ery: "Lass Secondary School",
};
const skills = {
programming: "Extreme",
swimming: "Ave_ / x { i 6 , n )rage",
sleeping: "Pro",
};
const summary = { ...user, ...colle2 r 1 a d (ge, ...skills };
>>>
{
name: 'Johk I = y O + { R n Ludwig',
genderl o Z c X ] F = X: 'Male',
primary: 'Mani Primary School',
secondary: 'Lass Secondary School',
programming: 'ExtremeN o s l x 6 r',
swimming: 'Average',
sleeE 2 -ping: 'Pro'b Q 6 # O ~
}
三个点V I % 7 ^ k _也叫扩展操作符。
对数字数组排序
JavaScript 数组有一个原生的排U 5 : _ _序方法 arr.sort。 这个排序方法默许把数组元素转换成字符x ! p 5 d ;串，并对其进行字典序排序。这个默许行为会在排序数字数组时出现问题i D 1 j ~ D m J k，所以下面有` l Y L g 1 ] {一个方法来处理这个问题。
[0, 10, 4,% x C 7 v w i 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"&6 c I ^ %gt;
<div></div>
</body>
这个简略的代码片段就能够制{ h Y K z B v止用户点击右键了。
解构时重命名
解构赋值是 JavaScript 的一个特性，它答应直接从数组或许目标中获取值，而不需要繁琐的声明变量再赋值。对目标来讲，咱们能够经过下面这种方式来给属性名从头界说一个姓名。
const object = { number: 10 };
// Grabbing number
const { number } = object;
// Gra? 4 Y 6bbing number and renaming it as otherNumber
const { number: otherNun ^ %mber } = object;
console.log(otherNumber); // 10
获取数组中的最后一项
假如你想获取数组中的最后一项，你能够运D ; [ p n @ n * $用 slice 函数，一起带上一个负数作为参数。
let array = [0, 1, 2, 3, 4, 5, 6, 7]
console.log(+ 0 j = n 9 S oarray.slice(-1));
>>>[7]
console.log(array.slice(-2));S : ` U T
>>>[6, 7]
console[ w | ~ R & 3 8 c.log(array.slice(B = Q-3));
>j n ; T;>>[5, 6, 7]
等候 Pre 2 ! o aomises 悉数履行完结
有时候你或许需要等候几个 promise 都履行完然后进行后边的操作。你能够运用 Prom_ r [ | i wise.all 来并行履行这些 promise。
const PromiseArray = [
Promise.resolve(100),
Promise.reject(nuln m ]l)m 6 A , L,
Promise.resolve("Data release"),
Promi& ] | lse.reject(new Error('Something went wrong'))];
Promise.all(PromiseArray)
.then(data => coC ^ w T h X O Jnsole.log('all resolved! here are the resolve v3 P R u Z ! u salues:', data)8 ? o = h C)
.catch(err => console.log('got rejected! reason:', err))
要注意，只需 PrO f [ Nomi] } & Z 3 Ise.all 中有一个是 rejected 状况时，其会立即停止履行并抛出反常。
假如你想忽略 resolved 或许 rejected 状况，你能够运用 Promise.allSettled。这个是 ES2020 的一个新特l M J m性。
const PromiseArray = [
Promise.resolve(100),
Promise.reject(null),
Promise.resolve("Data release"),
Promise.o 0 C T Qreject(new Erro# . ] w g # D c 8r("Something went wrong")),
];
Promise.allSettled(Promises R F o W H T o ]Array)
.then((z 9 Q o : =res) => {
consolej g g ; ) w W H.log("here", res);
})
.catch((err) => console.log(err)# F T } M - - k m);
>>>
here [
{ status: 'fulfilled', value: 100 },
{ status: 'rejecte` ; p Ad', reason: null },
{ status: 'fulf` 3 $ M illed', value: 'Data release' },
{
status: 'rejected',
reason: Error: SomF a A 1 m S i vething went wrong
at ObjeC y o ) E w 6 z oct.<anonymq T q 3 O H e :ous>
at Module._compile (internal/modules/s ! | c /cjs/loader.js:1200:30)
at Object.Module._extensions..js (internal/modules/cjs/loaE i 8 8 | ? 0 h -der.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
}
]
假如你觉得文章不错，请点上一个* t X 0 ~ .赞，假如你有疑惑，能够在评论区发问，创造不易，您的点赞和评论是对我最大的鼓励~~
欢迎关注大众号 云影sky，你我遇见就是最大的缘分~~
