很多JavaScript开发人员都忽略了的十大超实用技巧

 本文转载自公众号“读芯术”(ID：AI_Discovery)

专注于为中小企业提供网站制作、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业汉中免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

众所周知，JavaScript更新换代的速度特别快，总能给人新鲜感，也一直有能让我们挖掘探索的东西，新版ES2020就有许多特别厉害的功能让人迫不及待想试试。

写代码的方法有很多，总有一些方法写出来的代码要更加简洁清楚，这就需要一些小技巧了。本文就列出了一些对JavaScript开发人员有用的技巧，希望会对你有所帮助。

方法参数校验

JavaScript可以设置参数的默认值，这提供了一个验证方法参数的小窍门：

 
 
 
 
    
  
  
  
  
  1. const isRequired = () => { thrownew 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，后两个是可选参数，所以之前没有用到过它，如果要缩进JSON就必须设置space参数。

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

从数组中获取唯一值

从数组中获取唯一值要使用filter过滤出重复值，但有了新的set原生对象就变得顺手多了。

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

筛选数字数组

JavaScript数组带有内置的筛选方法。默认情况下，该方法将数组元素转换为字符串，并对其进行字典排序。在对数字数组进行排序时可能会出现问题，这儿有一个简单的解决方案：

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

这个函数通过比较数字数组中的两个元素实现筛选，可以得到正确的输出。

删除数组中的虚假值

有时我们可能需要删掉数组中的虚假值，即那些在JavaScript中等同于FALSE的值，JavaScript有六种虚假值，包括：

  1. undefined
  2. null
  3. NaN
  4. 0
  5.  “” (空字符串)
  6. false

过滤出虚假值比较简单的方法是使用下面的函数：

 
 
 
 
    
  
  
  
  
  1. myArray 
    2. 
  
  
  
  
  2.     .filter(Boolean); 
    3.

如果要对数组进行一些修改，然后过滤新数组，可以尝试如下操作。记住，原始myArray保持不变。

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

合并多个对象

碰到要合并两类或多类的情况时，下面的方法非常好用：

 
 
 
 
    
  
  
  
  
  1. const user = { 
    2. 
  
  
  
  
  2. name: 'John Ludwig', 
    3. 
  
  
  
  
  3. gender: 'Male' 
    4. 
  
  
  
  
  4. };const college = { 
    5. 
  
  
  
  
  5. primary: 'Mani Primary School', 
    6. 
  
  
  
  
  6. secondary: 'Lass Secondary School' 
    7. 
  
  
  
  
  7. };const skills = { 
    8. 
  
  
  
  
  8. programming: 'Extreme', 
    9. 
  
  
  
  
  9. swimming: 'Average', 
    10. 
  
  
  
  
  10. sleeping: 'Pro' 
    11. 
  
  
  
  
  11. };const summary = {...user, ...college,...skills}; 
    12.

等所有promise完成后再行动

有时你需要等一些promise对象完成后才能进行下一步操作，我们可以使用Promise.all 来同步完成。注意，所有Promise可以在单核CPU中同时运行，在多核CPU中并行运行。它的主要任务是等待传递给它的所有promise对象全部得到解析。

 
 
 
 
    
  
  
  
  
  1. const PromiseArray = [ 
    2. 
  
  
  
  
  2.     Promise.resolve(100), 
    3. 
  
  
  
  
  3.     Promise.reject(null), 
    4. 
  
  
  
  
  4.     Promise.resolve("Datarelease"), 
    5. 
  
  
  
  
  5.     Promise.reject(new Error('Somethingwent wrong'))];Promise.all(PromiseArray) 
    6. 
  
  
  
  
  6.   .then(data => console.log('allresolved! here are the resolve values:', data)) 
    7. 
  
  
  
  
  7.   .catch(err => console.log('gotrejected! reason:', err)) 
    8.

Promise.all必须注意的要点是，如果其中一个promise被拒，就会发出错误警告。这意味着你的代码不用等所有promise对象全部解析完毕。

如果不管promise是否被拒都想让它全部运行完，可以用Promise.allSettled，在ES2020的最终版本中使用这个方法：

 
 
 
 
    
  
  
  
  
  1. const PromiseArray = [ 
    2. 
  
  
  
  
  2.     Promise.resolve(100), 
    3. 
  
  
  
  
  3.     Promise.reject(null), 
    4. 
  
  
  
  
  4.     Promise.resolve("Datarelease"), 
    5. 
  
  
  
  
  5.     Promise.reject(new Error('Somethingwent wrong'))];Promise.allSettled(PromiseArray).then(res =>{ 
    6. 
  
  
  
  
  6. console.log(res); 
    7. 
  
  
  
  
  7. }).catch(err => console.log(err));//[ 
    8. 
  
  
  
  
  8. //{status: "fulfilled", value: 100}, 
    9. 
  
  
  
  
  9. //{status: "rejected", reason: null}, 
    10. 
  
  
  
  
  10. //{status: "fulfilled", value: "Data release"}, 
    11. 
  
  
  
  
  11. //{status: "rejected", reason: Error: Something went wrong ...} 
    12. 
  
  
  
  
  12. //] 
    13.

尽管有些promise被拒，Promise.allSettled 会返回所有promise的结果。

禁用右键

尽管不多见，但有时你可能需要阻止用户在网页上使用鼠标右键，这个简单的代码就能做到：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.     
     
    3. 
  
  
  
  
  3.  
    4.

利用别名节点解构

解构赋值是JavaScript的一种表达式，可以将数组中的值或对象属性解压为不同的变量，且不必坚持使用现有的对象变量，而可以按照个人喜好对其重新命名：

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

获取数组中的最后几项

如果要提取数组最后几项，可以使用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.

这些可能会被忽视的小技巧可能会给你帮大忙，赶快学起来吧!

本文题目：很多JavaScript开发人员都忽略了的十大超实用技巧
网站链接：http://www.shufengxianlan.com/qtweb/news12/134412.html

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

广告

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

猜你还喜欢下面的内容

解决方案知识

行业网站建设

四川白乌鱼　　 　胜锦安防科技　　 　重庆企业网站建设　　 　成都手机网站建设　　 　网站建设开发　　 　优化排名　　 　艾瑞格衣柜　　 　乐山企业网站设计　　 　域名注册　　 　成都网站托管　　 　成都网站制作　　 　h5页面制作　　 　成都logo设计公司　　 　梓潼网站建设　　 　广安网站设计　　 　Google外贸推广　　 　成都服务器租用　　 　兴久牧业　　 　成都云服务器　　 　成都酒店服定制