提高代码质量的七大JavaScript优秀实践

更新日期: 2021-05-09阅读: 1.2k标签: 代码

自2015年以来,随着ECMAScript 6(简称ES6)的发布,每年都有新版本的ECMAScript规范面市。而每次迭代都为该语言添加新的功能、新的语法、以及新的质量改进。为此,大多数浏览器和Node.js中的JavaScript引擎都需要迎头赶上。就连程序员的编程习惯、以及代码组织方法,也需要与时俱进,以提高整体的代码质量,并方便后期的维护。

为了便于您编写出更简洁、更易读的程序代码,本文将在总结和归纳ECMAScript最新功能的基础上,为您提供提高JavaScript和Node.js代码质量的七种优秀实践。


1.块作用域声明(Block Scoped Declarations)

自从该语言问世以来,JavaScript开发人员一直使用var来声明变量。不过,正如下面代码段所展示的那样,由关键字var所创建的变量,在其作用域上会出现问题。

var x = 10 
if (true) { 
  var x = 15     // inner declaration overrides declaration in parent scope 
  console.log(x) // prints 15 
} 
console.log(x)   // prints 15 

由于已定义的变量var并非块作用域(block-scoped),因此如果在小作用域内被重新定义,它们就会影响到外部作用域的值。

然而,如果我们用let和const两个新的关键字来替换var,便可以避免该缺陷(请参见如下代码段)。

let y = 10 
if (true) { 
  let y = 15       // inner declaration is scoped within the if block 
  console.log(y)   // prints 15 
} 
console.log(y)     // prints 10 

当然,const与let在语义上有所不同,那些用const声明的变量,无法在其作用域内被重新分配(如下代码段所示)。不过,这并不意味着它们是不可改变的,而只是代表着它们的引用不能被更改。

const x = [] 
  
x.push("Hello", "World!") 
x // ["Hello", "World!"] 
  
x = [] // TypeError: Attempted to assign to readonly property. 


2.箭头函数(Arrow Functions)

作为新近被引入JavaScript的一项重要功能,箭头函数具有许多优点。首先,它们能够让JavaScript的函数看起来更加整洁,并且更便于开发者的编写。

let x = [1, 2, 3, 4] 
  
x.map(val => val * 2)                // [2, 4, 6, 8] 
x.filter(val => val % 2 == 0)        // [2, 4] 
x.reduce((acc, val) => acc + val, 0) // 10 

如上述示例所示,“=>”后面的函数以一种简洁的语法,替换了传统函数。

  • 如果函数主体是单个表达式,则已经隐含了作用域括号{}和return关键字,所以无需额外写入。
  • 如果函数只有一个参数,则也已经隐含了参数括号(),同样无需额外写入。
  • 如果函数体的表达式是一套字典(dictionary),则必须将其括入括号()中。

箭头函数的另一个优势在于:为了避免由于使用this关键字,而引起的诸多不便,箭头函数并不会定义作用域,而是会存在于其父作用域中。也就是说,箭头函数没有任何针对this的绑定。在箭头函数中,this的值与父作用域中的值是相同的。因此,箭头函数不能被用作各种方法或构造函数。它们既不适用于apply、bind或call,也没有针对super的绑定。

此外,箭头函数还会受到诸如:缺少可供传统功能访问的arguments对象,以及缺少函数体中的yield等其他限制。

可以说,箭头函数并非是与标准函数的1:1替代,而是向JavaScript中添加了额外的功能集。


3.可选链(Optional Chaining)

让我们来试想一个类似person对象的、具有深层嵌套的数据结构。业务应用需要访问到该对象的名字和姓氏。由此,我们可以编写出如下JavaScript代码:

public class HelloWorld { 
    public static void main(String[] args) { 
        System.out.println("Hello World"); 
    } 
} 

然而,如果person对象并不包含嵌套的name对象,则可能会出现如下错误。

person = { 
  age: 42 
} 
person.name.first // TypeError: Cannot read property 'first' of undefined 
person.name.last  // TypeError: Cannot read property 'last' of undefined 

对此,开发人员往往需要通过如下代码,来予以解决。显然,这些代码不但冗长难写,而且可读性较差。

person && person.name && person.name.first // undefined 

而作为JavaScript的一项新功能,可选链的语法允许您访问嵌套得更深的对象属性,而不用担心属性是否真的存在。也就是说,如果可选链在挖掘过程遇到了null或undefined的值,那么就会通过短路(short-circuit)计算,返回undefined,而不会报错。

person?.name?.first // undefined 

如上述代码所示,其结果代码简洁且明了。


4.空值合并(Null-ish Coalescing)

在引入空值合并运算符之前,在输入为空的情况下,JavaScript开发人员需要使用OR运算符--||,以回退到默认值。这就会导致:即使出现合法的、但属于虚假值(falsy values),也会被回退到默认值的情况。

function print(val) { 
    return val || 'Missing' 
} 
  
print(undefined) // 'Missing' 
print(null)      // 'Missing' 
  
print(0)         // 'Missing' 
print('')        // 'Missing' 
print(false)     // 'Missing' 
print(NaN)       // 'Missing' 

如今,JavaScript推出了null合并运算符--??。它能够保证只有在前面的表达式为null-ish的情况下,才会触发回退。值得注意的是,此处的空值是指null或undefined。

function print(val) { 
    return val ?? 'Missing' 
} 
  
print(undefined) // 'Missing' 
print(null)      // 'Missing' 
  
print(0)         // 0 
print('')        // '' 
print(false)     // false 
print(NaN)       // NaN 

如此,您可以确保自己的程序能够接受虚假值作为合法输入,而不会最终被回退。


5.逻辑赋值(Logical Assignment)

假设您需要先判断是否为空,再为变量分配数值,那么如下代码便展示了这样的基本逻辑:

if (x === null || x == undefined) { 
    x = y 
} 

如果您熟悉上面提到的短路计算的工作原理,则可能会使用null-ish合并运算符(coalescing operator),将上述三行代码替换为如下更简洁的版本。

x ?? (x = y) // x = y if x is nullish, else no effect 

由上述代码可知,如果x为null-ish的话,我们可以使用null-ish合并运算符的短路功能,来执行第二部分(x = y)。这段代码虽然非常简洁,但是不太容易被阅读或理解。而我们完全可以使用如下代码,根据逻辑上的null-ish分配,来消除此类变通方法。

x ??= y // x = y if x is nullish, else no effect 

同样,JavaScript还引入了逻辑AND赋值--&&=、逻辑OR赋值--||=的运算符。这些运算符仅在满足特定条件时被执行赋值,否则并不起作用。

x ||= y // x = y if x is falsy, else no effect 
x &&= y // x = y if x is truthy, else no effect 

专家建议:如果您有过Ruby的编程经验,那么您会一眼识别出||=和&&=运算符。毕竟Ruby并没有虚假值的概念。


6.已命名捕获组(Named Capture Groups)

不知您是否知晓正则表达式中的“捕获组”的相关概念?如下面的代码段所示,它是与括号中的正则表达式部分匹配的字符串。

let re = /(\d{4})-(\d{2})-(\d{2})/ 
let result = re.exec('Pi day this year falls on 2021-03-14!') 
  
result[0] // '2020-03-14', the complete match 
result[1] // '2020', the first capture group 
result[2] // '03', the second capture group 
result[3] // '14', the third capture group 

一直以来,正则表达式都能够支持已命名捕获组。这是一种通过引用名称、而非索引,来捕获各个组的方式。目前,在ES9中,该功能已被JavaScript实现。正如下面的代码段所示,其结果对象包含了一个嵌套的组对象,其中每个捕获组的值都能够映射到其名称上。

let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/ 
let result = re.exec('Pi day this year falls on 2021-03-14!') 
  
result.groups.year  // '2020', the group named 'year' 
result.groups.month // '03', the group named 'month' 
result.groups.day   // '14', the group named 'day' 

而且,新的api与JavaScript的解构分配功能,也能够完美地结合在一起(请参见下面的代码段)。

let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/ 
let result = re.exec('Pi day this year falls on 2021-03-14!') 
let { year, month, day } = result.groups 
  
year  // '2020' 
month // '03' 
day   // '14' 


7.async和await

众所周知,异步性是JavaScript的一项强大功能。许多可能长时间运行、或较为耗时的函数,能够返回Promise,而不会被阻止运行。

const url = 'https://the-one-api.dev/v2/book' 
let prom = fetch(url) 
prom // Promise {<pending>} 
  
// wait a bit 
prom // Promise {<fullfilled>: Response}, if no errors 
// or 
prom // Promise {<rejected>: Error message}, if any error 

在上述代码段中,针对fetch的调用返回了一个状态为“待处理(pending)”的Promise。而当API返回响应时,它将会转换为“已实现(fulfilled)”的状态。在Promises中,您可以执行如下操作,来通过API的调用,将响应解析成为JSON。

const url = 'https://the-one-api.dev/v2/book' 
let prom = fetch(url) 
prom                               // Promise {<fullfilled>: Response} 
  .then(res => res.json()) 
  .then(json => console.log(json)) // prints response, if no errors 
  .catch(err => console.log(err))  // prints error message, if any error 

2017年,JavaScript推出了两个新的关键字async和await,来使得Promises的处理和使用变得更加容易和流畅。当然,它们并非Promises的替代,只是Promises概念之上的语法增强。

而且,并非让所有的代码里都出现在一系列的“then”函数,await旨在让其更像同步的JavaScript。您可以使用带有await的try...catch,来代替直接使用Promise的catch函数去处理错误。下面是具有同等效果的await代码。

const url = 'https://the-one-api.dev/v2/book' 
let res = await fetch(url) // Promise {<fullfilled>: Response} -await-> Response 
try { 
    let json = await res.json() 
    console.log(json) // prints response, if no errors 
} catch(err) { 
  console.log(err)  // prints error message, if any error 
} 

当然,async关键字也有着“硬币的另一面”,它会将任何待发送的数据封装到一个Promise中。下面是一段旨在通过异步函数添加多个数字的程序代码。在现实情况中,您的代码可能会比它更加复杂。

async function sum(...nums) { 
    return nums.reduce((agg, val) => agg + val, 0) 
} 
sum(1, 2, 3)                    // Promise {<fulfilled>: 6} 
  .then(res => console.log(res) // prints 6 
let res = await sum(1, 2, 3)    // Promise {<fulfilled>: 6} -await-> 6 
console.log(res)                // prints 6 


小结

如您所见,JavaScript每年都会在其语言中加入新的功能。希望我们在上面介绍到的七项提到代码质量的优秀实践,能够对您的日常编程提供帮助。

原文标题:7 JavaScript Best Practices to Improve Code Quality
作者:Dhruv Bhanushali
翻译来自:http://developer.51cto.com/art/202105/661081.htm


链接: https://fly63.com/article/detial/10274

不要浪费时间写完美代码

一个系统可以维持5年,10年,甚至20年以上,但是代码和设计模式的生命周期非常短,当对一个解决方案使用不同的方法进行迭代的时候,通常只能维持数月,数日,甚至几分钟的时间

Google内部在代码质量上的实践

良好的编程习惯涉及到很多方面,但在软件行业内,大多数的公司或组织都不会把良好的编程习惯列为主要关注点。 例如,具有可读性和可维护性的代码比编写好的测试代码或使用正确的工具更有意义,前者的意义在于可以让代码更易于理解和修改。

减少嵌套,降低代码复杂度

减少嵌套会让代码可读性更好,同时也能更容易的找出bug,开发人员可以更快的迭代,程序也会越来越稳定。简化代码,让编程更轻松!

关于 Google 发布的 JS 代码规范

Google为了那些还不熟悉代码规范的人发布了一个JS代码规范。其中列出了编写简洁易懂的代码所应该做的最佳实践。代码规范并不是一种编写正确JavaScript代码的规则,而是为了保持源代码编写模式一致的一种选择。

你解决的问题比你编写的代码更重要!

程序员似乎忘记了软件的真正目的,那就是解决现实问题。您编写的代码的目的是为了创造价值并使现有世界变得更美好,而不是满足您对自我世界应该是什么的以自我为中心的观点。有人说:如果你拥有的只是一把锤子,那么一切看起来都像钉子一样

tinymce与prism代码高亮实现及汉化的配置

TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方强大,并且功能配置灵活简单。另一特点是加载速度非常快的。

js函数式编程与代码执行效率

函数式编程对应的是命令式编程, 函数式编程的核心当然是对函数的运用. 而高阶函数(Higher-order)是实现函数式编程的基本要素。高阶函数可以将其他函数作为参数或者返回结果。所以JS天生就支持函数式编程

接手代码太烂,要不要辞职?

朋友发表了一条说说:入职新公司,从重构代码到放弃”,我就问他怎么了?他说,刚进一家新公司,接手代码太烂,领导让我先熟悉业务逻辑,然后去修复之前项目中遗留的bug,实在不行就重构

js高亮显示关键词_页面、搜索关键词高亮显示

页面实现关键词高亮显示:在项目期间遇到一个需求,就是搜索关键词时需要高亮显示,主要通过正则匹配来实现页面关键词高亮显示。在搜索结果中高亮显示关键词:有一组关键词数组,在数组中筛选出符合关键字的内容并将关键字高亮

写优雅的代码,做优雅的程序员

软件工程学什么? 学计算机,写程序,做软件,当程序员。听说学计算机很辛苦? 是的,IT行业加班现象严重。在计算机世界里,技术日新月异,自学能力是程序员最重要的能力之一。选了这个专业,就要时刻保持好奇心和技术嗅觉,不能只满足于完成课内作业。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!