10 个超有用的 JavaScript 技巧

时间 2020-06-06

原文原文链接

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

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

未经容许严禁转载java

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

你可能对 JSON.stringify 很是熟悉。可是你是否知道能够用 stringify 进行格式化输出？实际上这很简单。segmentfault

stringify 方法须要三个输入。 value，replacer 和 space。后两个是可选参数。这就是为何咱们之前没有注意过它们。要对 json 进行缩进，必须使用 space 参数。数组

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

从数组中获取惟一值

要从数组中获取惟一值，咱们须要使用 filter 方法来过滤出重复值。可是有了新的 Set 对象，事情就变得很是顺利和容易了。promise

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 中返回结果。

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

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

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

更多文章...