对JavaScript开发者非常有用的10个技巧

你可能错过这些非常有用的技巧。

创新互联公司是一家集网站建设,沂源企业网站建设,沂源品牌网站建设,网站定制,沂源网站建设报价,网络营销,网络优化,沂源网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

翻译自 10 Super Useful Tricks for JavaScript Developers，作者 Mahdhi Rezvi。

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

函数参数验证器

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

 
 
 
 
    
  
  
  
  
  1. const isRequired = () => { throw new Error('param is required'); };
    2. 
  
  
  
  
  2. const print = (num = isRequired()) => { console.log(`printing ${num}`) };
    3. 
  
  
  
  
  3. print(2); //printing 2
    4. 
  
  
  
  
  4. print(); // error
    5. 
  
  
  
  
  5. print(null); //printing null
    6.

格式化 JSON 代码

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

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

 
 
 
 
    
  
  
  
  
  1. console.log(JSON.stringify({ name:"John", Age:23 }, null, '  '));
    2. 
  
  
  
  
  2. >>> 
    3. 
  
  
  
  
  3. {
    4. 
  
  
  
  
  4.   "name": "John",
    5. 
  
  
  
  
  5.   "Age": 23
    6. 
  
  
  
  
  6. }
    7.

对数组去重

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

 
 
 
 
    
  
  
  
  
  1. let uniqueArray = [...new Set([1, 2, 3, 3, 3, "school", "school", 'ball', false, false, true, true])];
    2. 
  
  
  
  
  2. >>> [1, 2, 3, "school", "ball", false, true]
    3.

去除数组中的 Boolean(v) 为 false 的值

有时候你想删除数组中 Boolean(v) 为 false 的值。在 JavaScript 中只有以下 6 种：

  • undefined
  • null
  • NaN
  • 0
  • 空字符串
  • false

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

 
 
 
 
    
  
  
  
  
  1. array.filter(Boolean)
    2.

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

 
 
 
 
    
  
  
  
  
  1. array
    2. 
  
  
  
  
  2.   .map(item => {
    3. 
  
  
  
  
  3.       // Do your changes and return the new item
    4. 
  
  
  
  
  4.   })
    5. 
  
  
  
  
  5.   .filter(Boolean);
    6.

同时合并多个对象

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

 
 
 
 
    
  
  
  
  
  1. const user = {
    2. 
  
  
  
  
  2.   name: "John Ludwig",
    3. 
  
  
  
  
  3.   gender: "Male",
    4. 
  
  
  
  
  4. };
    5. 
  
  
  
  
  5. const college = {
    6. 
  
  
  
  
  6.   primary: "Mani Primary School",
    7. 
  
  
  
  
  7.   secondary: "Lass Secondary School",
    8. 
  
  
  
  
  8. };
    9. 
  
  
  
  
  9. const skills = {
    10. 
  
  
  
  
  10.   programming: "Extreme",
    11. 
  
  
  
  
  11.   swimming: "Average",
    12. 
  
  
  
  
  12.   sleeping: "Pro",
    13. 
  
  
  
  
  13. };
    14. 
  
  
  
  
  14. const summary = { ...user, ...college, ...skills };
    15. 
  
  
  
  
  15. 
  
  
  
  
  16. >>>
    17. 
  
  
  
  
  17. {
    18. 
  
  
  
  
  18.   name: 'John Ludwig',
    19. 
  
  
  
  
  19.   gender: 'Male',
    20. 
  
  
  
  
  20.   primary: 'Mani Primary School',
    21. 
  
  
  
  
  21.   secondary: 'Lass Secondary School',
    22. 
  
  
  
  
  22.   programming: 'Extreme',
    23. 
  
  
  
  
  23.   swimming: 'Average',
    24. 
  
  
  
  
  24.   sleeping: 'Pro'
    25. 
  
  
  
  
  25. }
    26.

三个点也叫扩展操作符。

对数字数组排序

JavaScript 数组有一个原生的排序方法 arr.sort。 这个排序方法默认把数组元素转换成字符串，并对其进行字典序排序。这个默认行为会在排序数字数组时出现问题，所以下面有一个办法来处理这个问题。

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

禁用右键

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.   
    3. 
  
  
  
  
  3.

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

解构时重命名

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

 
 
 
 
    
  
  
  
  
  1. const object = { number: 10 };
    2. 
  
  
  
  
  2. // Grabbing number
    3. 
  
  
  
  
  3. const { number } = object;
    4. 
  
  
  
  
  4. // Grabbing number and renaming it as otherNumber
    5. 
  
  
  
  
  5. const { number: otherNumber } = object;
    6. 
  
  
  
  
  6. console.log(otherNumber); // 10
    7.

获取数组中的最后一项

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

 
 
 
 
    
  
  
  
  
  1. let array = [0, 1, 2, 3, 4, 5, 6, 7] 
    2. 
  
  
  
  
  2. console.log(array.slice(-1));
    3. 
  
  
  
  
  3. >>>[7]
    4. 
  
  
  
  
  4. console.log(array.slice(-2));
    5. 
  
  
  
  
  5. >>>[6, 7]
    6. 
  
  
  
  
  6. console.log(array.slice(-3));
    7. 
  
  
  
  
  7. >>>[5, 6, 7]
    8.

等待 Promises 全部执行完成

有时候你可能需要等待几个 promise 都执行完然后进行后面的操作。你可以使用 Promise.all 来并行执行这些 promise。

 
 
 
 
    
  
  
  
  
  1. const PromiseArray = [
    2. 
  
  
  
  
  2.     Promise.resolve(100),
    3. 
  
  
  
  
  3.     Promise.reject(null),
    4. 
  
  
  
  
  4.     Promise.resolve("Data release"),
    5. 
  
  
  
  
  5.     Promise.reject(new Error('Something went wrong'))];
    6. 
  
  
  
  
  6. Promise.all(PromiseArray)
    7. 
  
  
  
  
  7.   .then(data => console.log('all resolved! here are the resolve values:', data))
    8. 
  
  
  
  
  8.   .catch(err => console.log('got rejected! reason:', err))
    9.

要注意，只要 Promise.all 中有一个是 rejected 状态时，其会立即停止执行并抛出异常。

如果你想忽略 resolved 或者 rejected 状态，你可以使用 Promise.allSettled。这个是 ES2020 的一个新特性。

 
 
 
 
    
  
  
  
  
  1. const PromiseArray = [
    2. 
  
  
  
  
  2.   Promise.resolve(100),
    3. 
  
  
  
  
  3.   Promise.reject(null),
    4. 
  
  
  
  
  4.   Promise.resolve("Data release"),
    5. 
  
  
  
  
  5.   Promise.reject(new Error("Something went wrong")),
    6. 
  
  
  
  
  6. ];
    7. 
  
  
  
  
  7. Promise.allSettled(PromiseArray)
    8. 
  
  
  
  
  8.   .then((res) => {
    9. 
  
  
  
  
  9.     console.log("here", res);
    10. 
  
  
  
  
  10.   })
    11. 
  
  
  
  
  11.   .catch((err) => console.log(err));
    12. 
  
  
  
  
  12. >>>
    13. 
  
  
  
  
  13. here [
    14. 
  
  
  
  
  14.   { status: 'fulfilled', value: 100 },
    15. 
  
  
  
  
  15.   { status: 'rejected', reason: null },
    16. 
  
  
  
  
  16.   { status: 'fulfilled', value: 'Data release' },
    17. 
  
  
  
  
  17.   {
    18. 
  
  
  
  
  18.     status: 'rejected',
    19. 
  
  
  
  
  19.     reason: Error: Something went wrong
    20. 
  
  
  
  
  20.         at Object. 
    21. 
  
  
  
  
  21.         at Module._compile (internal/modules/cjs/loader.js:1200:30)
    22. 
  
  
  
  
  22.         at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
    23. 
  
  
  
  
  23.         at Module.load (internal/modules/cjs/loader.js:1049:32)
    24. 
  
  
  
  
  24.         at Function.Module._load (internal/modules/cjs/loader.js:937:14)
    25. 
  
  
  
  
  25.         at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    26. 
  
  
  
  
  26.         at internal/main/run_main_module.js:17:4
    27.

本文名称：对JavaScript开发者非常有用的10个技巧
路径分享：http://www.zyruijie.cn/qtweb/news9/959.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

小程序开发知识

各行业网站

商城网站　　 　古巴雪茄　　 　成都网络公司　　 　成都酒店服定制　　 　ssl证书申请　　 　成都租用服务器　　 　成都添翼二手车　　 　LED显示屏　　 　注册域名　　 　成都做网站　　 　申请域名　　 　主机托管　　 　网站seo优化　　 　四川航空文化　　 　自适应网站　　 　成都h5网站建设　　 　眉山做网站　　 　成都小程序定制开发公司　　 　成都路面机械设备　　 　成都定制网站开发