JavaScript 开发者 10 个非常有用的技巧

169 阅读5分钟

原文地址: 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 在你的项目中引用,改变它,然后用新的版本号推送到后台即可。

在你的团队中分享组件,最大限度的复用代码,提升交付效率,然后,构建可扩展的应用。