周末学会了 10个超级实用 Javascript 技巧!

时间 2020-07-06

标签周末学会超级实用 javascript 技巧栏目 JavaScript 繁體版

原文原文链接

做者：Mahdhi Rezvi 译者：前端小智来源：mediumjavascript

点赞再看，养成习惯前端

本文 GitHub github.com/qq449245884… 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。java

众所周知，JavaScript 一直在快速变化。在新的 ES2020 中，有不少很棒的特性，咱们大都已经火烧眉毛尝试了。老实说，有时咱们能够用不一样角度来编写代码，一样也能达到相同的效果，并且有的还会更简短，更清晰。git

下面是列出一些 JavaScript 有用的技巧，相信总有一天会对你有所帮助。github

1.方法参数验证

ES6 中能够为函数的参数设置默认值，有了这个，咱们能够实现一个验证方法参数不能为空的巧妙技巧。面试

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

复制代码

2.格式化JSON代码

咱们都很是熟悉JSON.stringify，但比较少知道的是它还能够进行格式化的输出。数组

stringify 方法有三个参数：value，replacer和space。其中，后两个是可选参数，这也是咱们不多知道它的缘由。要缩进JSON，必须使用space参数。bash

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}
复制代码

6.排序数字数组

JavaScript 数组带有内置的sort方法。默认状况下，此sort方法将数组元素转换为字符串，并对其进行字典排序。但这在对数字数组进行排序时，会有问题，解决方法就是手写一个排序方法。

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

>>> [0, 1, 4, 9, 10, 54, 123]
复制代码

7.禁用鼠标右键

有些状况，咱们想在网页上禁用鼠标的右键，可使用下面的方式来禁用：

<body oncontextmenu="return false">
  <div></div>
</body>
复制代码

这个简单的代码就能够禁用右键单击。

8.在解构中使用别名

解构赋值是一个JavaScript表达式，它能够将数组中的值或对象中的属性解构缩不一样的变量中。没必要使用现有的对象变量，咱们能够根据本身的偏好重命名它们。

const object = { number: 10 }

const { number } = object

// 使用别名
const { number: otherNumber } = object

console.log(otherNumber) //10
复制代码

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

若是要获取数组的末尾元素，可使用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]

复制代码

10. 等待 Promises

在某些状况下，咱们须要等待多个Promise结束，这里，咱们使用Promise.all。

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 ...}
//]
复制代码

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：blog.bitsrc.io/10-super-us…

交流

文章每周持续更新，能够微信搜索「大迁世界」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub github.com/qq449245884… 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。