JavaScript 开发者常用的 10 个技巧

红太狼 2020-06-22 15:01 834阅读 0赞

# JavaScript 开发者常用的 10 个技巧

我们知道，JavaScript 这门语言正在高速发展中。伴随着 ES2020，又有很多很棒的功能加入。老实说，您可以通过许多不同的方式编写代码。实现同样一个功能，有的代码很长而有的却很短。你可以通过一些小技巧来让你的代码更干净清晰。下面这些小技巧肯定对你接下来的开发工作有所用处。

## 函数参数验证器

JavaScript 允许你对函数参数设置默认值。通过这个特性，我们可以实现一个小技巧来验证函数参数。

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

## 格式化 JSON 代码

你肯定对 `JSON.stringify` 非常熟悉了，但是你知道吗，你也可以通过 `stringify` 方法格式化你的代码。其实这很简单。

`stringify` 方法有三个参数，分别是 `value` `replacer` 和 `space`。后面两个参数是可选的，所以我们平常也不会用到它们。想要缩进输出的代码，我们可以使用2个空格 ，或者4个空格。

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

## 对数组去重

以往对数组去重我们会使用 `filter` 函数来过滤掉重复的值。但是现在我们可以使用新的 `Set` 特性来过滤。非常简单：

```javascript
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`

去除这些值最简单的办法是使用下面的方法：

```javascript
array.filter(Boolean)
```

如果你想先做一些更改然后再过滤，你可以用下面的方法。要记住，原始数组 `array` 是一直没变的，返回的是一个新数组。

```javascript
array
  .map(item => {      // Do your changes and return the new item
  })
  .filter(Boolean);
```

## 同时合并多个对象

如果需要同时合并多个对象或者类，可以用下面这种方法。

```javascript
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`。 这个排序方法默认把数组元素转换成字符串，并对其进行字典序排序。这个默认行为会在排序数字数组时出现问题，所以下面有一个办法来处理这个问题。

```javascript
[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]
```

## 禁用右键

有时候你可能想要禁止用户点击右键。虽然这个需求很少见，但是可能派的上用场。

```html
<body oncontextmenu="return false">
  <p></p>
  </body>
```

这个简单的代码片段就可以禁止用户点击右键了。

## 解构时重命名

解构赋值是 JavaScript 的一个特性，它允许直接从数组或者对象中获取值，而不需要繁琐的声明变量再赋值。对对象来讲，我们可以通过下面这种方式来给属性名重新定义一个名字。

```javascript
const object = { number: 10 };// Grabbing numberconst { number } = object;// Grabbing number and renaming it as otherNumberconst { number: otherNumber } = object;console.log(otherNumber); // 10
```

## 获取数组中的最后一项

如果你想获取数组中的最后一项，你可以使用 `slice` 函数，同时带上一个负数作为参数。

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

```javascript
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 的一个新特性。

```javascript
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.<anonymous> 
        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:47
  }
]
```