10个超级实用的JavaScript开发技巧

最新推荐文章于 2023-04-20 13:36:50 发布

web前端开发V

最新推荐文章于 2023-04-20 13:36:50 发布

阅读量380

点赞数

英文 | https://blog.bitsrc.io/10-super-useful-tricks-for-javascript-developers-f1b76691199b

翻译 | web前端开发（ID：web_qdkf)

众所周知，JavaScript一直在迅速变化。借助新的ES2020，引入了许多很棒的功能，你可能想知道这些功能。老实说，你可以通过许多不同的方式编写代码。

他们可能会达到相同的目标，但其中一些会更短，更清晰，更友好，更易读易维护。你可以使用一些小技巧来使代码更清晰。这里列出了一些对JavaScript开发人员有用的技巧，这些技巧一定会对你有所帮助。

1、方法参数验证

JavaScript允许你设置参数的默认值。使用此方法，我们可以实施一个巧妙的技巧来验证你的方法参数。

const isRequired = () => { throw new Error('param is required'); };const print = (num = isRequired()) => { console.log(`printing ${num}`) };print(2);//printing 2print()// errorprint(null)//printing null

这样是不是更整洁了？

2、格式化JSON代码

现在你已经很熟悉了JSON.stringify。但是您知道可以使用来格式化输出stringify吗？实际上，这更简单。

该stringify方法需要输入value，replacer和space三个参数。后两个是可选参数。这就是为什么我们以前不使用它们。要缩进JSON，必须使用space参数。

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

3、从数组中获取唯一值

从数组中获取唯一值，要求我们使用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]

4、从数组中删除虚假值

在某些情况下，你可能想从数组中删除伪造的值。虚假值是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);

5、合并多个对象

我有几个实例需要合并两个或多个类，这是我的首选方法。

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中也称为散布运算符。

6、排序数字数组

JavaScript数组带有内置的sort方法。默认情况下，此sort方法将数组元素转换为字符串，并对其进行字典排序。在对数字数组进行排序时，这可能会导致问题。因此，这里是解决此问题的简单解决方案。

[0,10,4,9,123,54,1].sort((a,b) => a-b);>>> [0, 1, 4, 9, 10, 54, 123]

你正在提供一个将number数组中的两个元素与sort方法进行比较的函数。此功能可帮助我们接收正确的输出。

7、禁用右键

你可能曾经想阻止用户在你的网页上单击鼠标右键。尽管这种情况很少见，但是在某些情况下你可能需要此功能。

< body oncontextmenu = “ return false” >    < div > < / div>< / body>

这个简单的代码段将为你的用户禁用右键单击。

8、使用别名进行销毁

该解构赋值语法是JavaScript表达式，使得它可以从阵列解压缩的值，或从属性的对象，为不同的变量。可以不使用现有的对象变量，而可以将其重命名为自己的首选项。

const object = {number：10};//抓取数字const {number} = object;//抓取数字并将其重命名为otherNumberconst {number：otherNumber} = object;console.log（otherNumber）; // 10

9、获取数组中的最后一项

如果要从数组的末尾获取元素，则可以将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]

10、等到进程完成

在某些情况下，你将需要等待多个进程结束。我们可以用来Promise.all并行履行进程。

注意：进程将在单核CPU中同时运行，并在多核CPU中并行运行。它的主要任务是等待传递给它的所有进程都得到解决。

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，当一个进程拒绝时，该方法将引发错误。这意味着你的代码将不会等到你所有的进程都完成。

如果你要等到所有进程都完成后，无论它们被拒绝还是被解决，都可以使用Promise.allSettled。此方法在ES2020的最终版本中。

const PromiseArray = [    Promise.resolve（100），    Promise.reject（null），    Promise.resolve（“数据发布”），    Promise.reject（新的错误（'出问题了'）））];Promise.allSettled（PromiseArray）.then（res => {console.log（res）;}）。catch（err => console.log（err））;// [// {状态：“已完成”，值：100}，// {状态：“已拒绝”，原因：空}，// {状态：“已完成”，值：“数据发布”}}，// {状态：“已拒绝”，原因：错误：出了点问题……}//]

即使某些进程被拒绝，Promise.allSettled也会从你所有的承诺中返回结果。