原文地址: blog.bitsrc.io/10-super-us…
译文地址:github.com/xiao-T/note…
本文版权归原作者所有,翻译仅用于学习。
我们知道,JavaScript 正在迅速的发生改变。ES2020 中带来了很多神奇的功能。老实说,你有很多编写代码的方式。它们都可以达到相同的目的,但是,有一些就比较简单明了。你也可以使用一些技巧,让你的代码更加清晰。在这里我为 JavaScript 开发者列举一些有用的技巧,相信有一天会对你有帮助。
函数参数校验
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
。后两个是可选的。这也是我们不常用的原因。为了格式化 JSON,我们必须使用 space
。
console.log(JSON.stringify({name:"John",Age:23},null,'\t'));
>>>
{
"name": "John",
"Age": 23
}
我在 Bit 发布了一个 React 组件。可以随意使用它来输出 stringify 的结果。
数组去重
从数组中获取不重复的值我们需要使用 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]
移除数组中的假值
很多情况下,你希望移除数组中的假值。JavaScript 中的假值就是那些计算后是 FALSE 的值。JavaScript 中有六个假值:
undefined
null
NaN
0
“”
(空字符串)false
过滤假值最简单的方式就是使用以下的方法。
myArray
.filter(Boolean);
如果,你想做些改变,然后过滤生成新的数组,你的代码看起来应该是这样。记住,原数组 myArray
会保持不变。
myArray
.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};
JavaScript 中三个连续的点也被称作为展开操作符。你可以在这了解更多情况。
全数字的数组排序
JavaScript 数组内置了 sort 方法。此方法会把数组中的元素转化成字符串,然后,按照默认的方式排序。如果,数组中全是数字这就会有问题。有一个简单的方式来解决这个问题。
[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
获取数组中最后的元素
如果,你想获取数组中后面的元素,你可以使用 splice
方法并传递一个负整数参数。
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]
等待 Promise 的完成
有些情况你需要等待多个 promise。我们可以使用 Promise.all
来并发多个 promise。
注意:Promise 在单核 CPU 会同时执行或者在多核 CPU 中并发。主线程将会等待所有 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 reject,Promise.all
就会抛出一个错误。这就代表着你的代码不会等到所有的 Promise 完成。
如果,你想等待所有的 Promise 完成,而不关心它们是 rejected,还是 resolved,你可以使用 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(res);
}).catch(err => console.log(err));//[
//{status: "fulfilled", value: 100},
//{status: "rejected", reason: null},
//{status: "fulfilled", value: "Data release"},
//{status: "rejected", reason: Error: Something went wrong ...}
//]
尽管有些 Promise 返回了 rejected,Promise.allSettled
还是返回了所有的结果。
用 Bit 发布和重用 React 组件
Bit 让发布可重用的 React 组件变得更加简单。
**需要更新已发布的组件?**用 bit import
在你的项目中引用,改变它,然后用新的版本号推送到后台即可。
在你的团队中分享组件,最大限度的复用代码,提升交付效率,然后,构建可扩展的应用。