如何让你的JavaScript代码更优雅(上)

简介: 写了好多年的JavaScript代码,你的代码是不是可以更加优雅?下面整理了一些优化代码的建议,大家可以酌情做一下参考,希望能给到大家一些帮助。

1.推荐使用全等和不全等操作符


ECMAScript 提供两组操作符:相等和不相等(== 和 !=)——先转换再比较,全等和不全等(=== 和!==)——仅比较而不转换


除了在比较之前不转换操作数之外,全等和不全等操作符与相等和不相等操作符没有什么区别


如下所示:


var result1 = ("66" == 66);    //true,因为转换后相等 
var result2 = ("66" === 66);  //false,因为不同的数据类型不相等


要记住:null == undefined 会返回 true,因为它们是类似的值;但 null === undefined 会返 回 false,因为它们是不同类型的值。


由于相等和不相等操作符存在类型转换问题,而为了保持代码中数据类型的完整性,推荐使用全等和不全等操作符。如果变量的类型是已经确定了的,那么使用==是根本没必要的;如果类型不确定,应该手动做一下转换:


var code = "5";
if(parseInt(code) === 0){
}


2.不建议修改变量所保存值的类型


变量是松散类型的,所谓松散类型就是可以用来保存任何类型的数据。换句话说, 每个变量仅仅是一个用于保存值的占位符而已;如下代码:


var message = "hi"; 


像这样初始化变量并不会把它标记为字符串类型; 初始化的过程就是给变量赋一个值那么简单。因此,可以在修改变量值的同时修改值的类型:


var message = "hi"; 
message = 100;         // 有效,但不推荐 


这样给人的感觉就过于随意了,且可读性太差,同时,js引擎在进行编译的时候也需要额外的耗时,不利于性能。推荐的方式是在初始化变量的时候给变量一个默认值:


var message = "hi",
    found = false,     
    age = 29


3.避免延长作用域链


在两种情况下会发生作用域链的延长:


  • try-catch 语句的 catch 块;


  • with 语句


这两个语句都会在作用域链的前端添加一个变量对象。对 with 语句来说,会将指定的对象添加到 作用域链中。对 catch 语句来说,会创建一个新的变量对象,其中包含的是被抛出的错误对象的声明。


我们知道,标识符解析是沿着作用域链一级一级地搜索标识符的过程。搜索过程始终从作用域链的前端开始, 然后逐级地向后回溯,直至找到标识符为止,因此作用域链越长,查找越慢。


4.缓存变量


比如数组长度:


for (let j = 0; j < area.geo.length; j++) {
 }


应该写到一个变量里,避免每次循环都去查找这个对象且计算长度


let geoLength = area.geo.length
for (let j = 0; j < geoLength; j++) {
 }


另外,缓存变量可以进行dom的优化:


let odiv=document.getElementById('content');
//接下来是一些操作dom的代码。。。


这样避免了多次去查找dom元素,可以提高代码效率。


5.关于if语句


大多数编程语言中为常用的一个语句就是 if 语句,这里提三点建议:


(1)始终使用代码块


业界普遍推崇的佳实践是始终使用代码块,即使要执行的只有一行代码。因为这样可以消 除人们的误解,否则可能让人分不清在不同条件下要执行哪些语句。


if (i > 25)    
alert("Greater than 25.");             // 单行语句 
else {     
alert("Less than or equal to 25.");    // 代码块中的语句 
} 


(2)用三目运算符取代简单的 if-else


比如一个简单的函数:


lightBackground () {
      if(this.mode === 'dark'){
          return normal
      }else {
           return light
      }
    }


用三目运算符来写就不会显得很臃肿,给人的感觉很清晰


lightBackground () {
      return this.mode === 'dark' ? 'normal' : 'light'
    }


原来的五行代码现在需要一行就OK了,代码的执行效率也比之前的要高。


(3)优化嵌套的条件语句


比如有大量的if-else语句:


if (index === 0) {
       fn0();
      } else if (index === 1) {
        fn1();
      } else if (index === 2) {
        fn2();
      } else if (index === 3) {
        fn3();
      }


可以用switch语句来优化代码。从根本上讲,switch 语句就是为了让开发人员免于编写像上面这样的代码。


switch(index){
    case 0:
    fn0();
    break;
    case 1:
    fn(1);
    break;
    case 2:
    fn2();
    break;
    case 3:
    fn3();
    break;
    default:
    fn()
}


或者使用对象的方法替代:


let idxObj = {
    0: fn0,
    1: fn1,
    2: fn2,
    3: fn3,
    4: fn
}
if(num in idxObj){
    idxObj[num]()
}


相关文章
|
8天前
|
JavaScript 前端开发 Python
用python执行js代码:PyExecJS库
文章讲述了如何使用PyExecJS库在Python环境中执行JavaScript代码,并提供了安装指南和示例代码。
45 1
用python执行js代码:PyExecJS库
|
4天前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
6天前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
7天前
|
存储 JavaScript 前端开发
webSocket+Node+Js实现在线聊天(包含所有代码)
文章介绍了如何使用WebSocket、Node.js和JavaScript实现在线聊天功能,包括完整的前端和后端代码示例。
34 0
|
4天前
|
存储 JavaScript 前端开发
改进JavaScript代码,给水果有序赋色
改进JavaScript代码,给水果有序赋色
|
6天前
|
存储 JSON JavaScript
JavaScript帮我编写快递自动分拣的代码,区分省份市区县城乡镇
JavaScript帮我编写快递自动分拣的代码,区分省份市区县城乡镇在JavaScript中编写一个用于快递自动分拣的代码,区分省份、市区、县、城乡镇,通常意味着你需要一个数据结构来存储这些地理区域的信息,并编写逻辑来根据快递地址中的信息将其分配到正确的分类中。 这里,我将提供一个简化的示例,说明如何使用JavaScript对象和函数来实现这一功能。请注意,这个示例是高度简化的,并且假设你已经有了某种方式(如正则表达式或API调用)来从快递地址中提取省份、市区、县等信息。 ----------------------------------- ©著作权归作者所有:来自51CTO博客作者goS
|
7天前
|
JavaScript 前端开发 Python
python执行js代码
本文档详细介绍如何安装Node.js环境及PyExecJS库,并提供示例代码展示其功能。首先,通过指定链接安装Node.js,安装完毕后可在命令行中输入`node --version`来验证安装是否成功。接着,使用`pip install PyExecJS`安装PyExecJS库,该库允许Python程序执行JavaScript代码。文档还提供了多个示例代码,展示了如何在Python环境中执行和编译JavaScript代码,并可以选择特定的JavaScript运行时环境,如Node.js或JScript。最后,通过具体案例展示了PyExecJS的功能与使用方法。
14 3
|
16天前
|
JavaScript
网站内容禁止复制的js代码
网站内容禁止复制的js代码
|
22天前
|
缓存 JavaScript 前端开发
js和html代码一定要分离吗
JavaScript(JS)和HTML代码的分离虽非绝对必要,但通常被推荐
|
24天前
|
移动开发 JavaScript 安全
总有一款适合您分享78个JS相册代码
本文分享了78款JS相册代码,包括3D相册旋转木马、图片悬浮效果、倾斜图片幻灯片切换等特效,适用于各种图片展示场景。无论您需要哪种样式,都能在这里找到满意的解决方案。快来挑选吧!参考链接:[点击这里](https://www.vipwb.com/sitemap.xml)。
28 4
下一篇
无影云桌面