10 个超有用的 JavaScript 技巧

作者：Mahdhi Rezvi
翻译：疯狂的技术宅

原文：https://blog.bitsrc.io/10-sup...

未经允许严禁转载

众所周知，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
}

从数组中获取唯一值

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

从数组中删除虚值（Falsy Value）

在某些情况下，你可能想从数组中删除虚值。虚值是 JavaScript 的 Boolean 上下文中被认定为为 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 方法。默认情况下 sort 方法把数组元素转换为字符串，并对其进行字典排序。在对数字数组进行排序时，这有可能会导致一些问题。所以下面是解决这类问题的简单解决方案。

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

这里提供了一个将数字数组中的两个元素与 sort 方法进行比较的函数。这个函数可帮助我们接收正确的输出。

Disable Right Click

禁用右键

你可能想要阻止用户在你的网页上单击鼠标右键。

<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。

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

如果你想等到所有 promise 都完成后，无论它们被拒绝还是被解决，都可以使用 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 被拒绝，Promise.allSettled 也会从你所有的 promise 中返回结果。

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...

10 个超有用的 JavaScript 技巧

方法参数的验证

格式化 json 代码

从数组中获取唯一值

从数组中删除虚值（Falsy Value）

合并多个对象

对数字数组进行排序

Disable Right Click

禁用右键

使用别名进行解构

获取数组中的最后一项

等待 Promise 完成

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

疯狂的技术宅

引用和评论

为什么浮点数运算会产生误差

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高