你可能错过这些非常有用的技巧。
翻译自 10 Super Useful Tricks for JavaScript Developers,作者 Mahdhi Rezvi。
我们知道,JavaScript 这门语言正在高速发展中。伴随着 ES2020,又有很多很棒的功能加入。老实说,您可以通过许多不同的方式编写代码。实现同样一个功能,有的代码很长而有的却很短。你可以通过一些小技巧来让你的代码更干净清晰。下面这些小技巧肯定对你接下来的开发工作有所用处。
函数参数验证器
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。后面两个参数是可选的,所以我们平常也不会用到它们。想要缩进输出的代码,我们可以使用2个空格 ,或者4个空格。
- console.log(JSON.stringify({ name:"John", Age:23 }, null, ' '));
- >>>
- {
- "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]
去除数组中的 Boolean(v) 为 false 的值
有时候你想删除数组中 Boolean(v) 为 false 的值。在 JavaScript 中只有以下 6 种:
- undefined
- null
- NaN
- 0
- 空字符串
- false
去除这些值最简单的办法是使用下面的方法:
- array.filter(Boolean)
如果你想先做一些更改然后再过滤,你可以用下面的方法。要记住,原始数组 array 是一直没变的,返回的是一个新数组。
- array
- .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 };
-
- >>>
- {
- name: 'John Ludwig',
- gender: 'Male',
- primary: 'Mani Primary School',
- secondary: 'Lass Secondary School',
- programming: 'Extreme',
- swimming: 'Average',
- sleeping: 'Pro'
- }
三个点也叫扩展操作符。
对数字数组排序
JavaScript 数组有一个原生的排序方法 arr.sort。 这个排序方法默认把数组元素转换成字符串,并对其进行字典序排序。这个默认行为会在排序数字数组时出现问题,所以下面有一个办法来处理这个问题。
- [0, 10, 4, 9, 123, 54, 1].sort()
- >>> [0, 1, 10, 123, 4, 54, 9]
-
- [0, 10, 4, 9, 123, 54, 1].sort((a,b) => a-b);
- >>> [0, 1, 4, 9, 10, 54, 123]
禁用右键
有时候你可能想要禁止用户点击右键。虽然这个需求很少见,但是可能派的上用场。
- "return false">
-
-
这个简单的代码片段就可以禁止用户点击右键了。
解构时重命名
解构赋值是 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
获取数组中的最后一项
如果你想获取数组中的最后一项,你可以使用 slice 函数,同时带上一个负数作为参数。
- 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]
等待 Promises 全部执行完成
有时候你可能需要等待几个 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 中有一个是 rejected 状态时,其会立即停止执行并抛出异常。
如果你想忽略 resolved 或者 rejected 状态,你可以使用 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("here", res);
- })
- .catch((err) => console.log(err));
- >>>
- here [
- { status: 'fulfilled', value: 100 },
- { status: 'rejected', reason: null },
- { status: 'fulfilled', value: 'Data release' },
- {
- status: 'rejected',
- reason: Error: Something went wrong
- at Object.
- at Module._compile (internal/modules/cjs/loader.js:1200:30)
- at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
- at Module.load (internal/modules/cjs/loader.js:1049:32)
- at Function.Module._load (internal/modules/cjs/loader.js:937:14)
- at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
- at internal/main/run_main_module.js:17:4