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

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

6.巧用短路操作符


逻辑或和逻辑与的操作属于短路操作,即如果第一个操作数能够决定结果,那么就不会再对第二个操作数求值。


(1)我们可以利用逻辑或的这一行为来避免为变量赋 null 或 undefined 值。


例如:


const hmsr = this.$route.query.hmsr || query.hmsr || ''


ECMAScript程序的赋值语句经常会使用这种模式。


(2)逻辑与可以避免调用undefined的属性时报错


watch: {
    carList (to) {
      this.swiper && this.swiper.slideTo(0)
    },
  },


7.函数的优化


在JavaScript开发中,大多时候都离不开函数,关于函数,提以下几点建议:


(1)函数的命名


函数名应该以动词开始,如 getName()。返回布尔类型值的函数一般以 is 开头,如 isEnable()。


(2)明确函数的返回类型


比如这样的代码:


function getPrice(num){
    if(num < 0) return "";
    else return num * 20;
}


这个函数有时候返回空字符串,有的时候又会返回整数。这样写虽然不会报错,但是有可能为后边的代码埋下隐患。假如你一不小心进行了运算,返回字符串的情况你就得到了NaN,o(╯□╰)o。。 推荐的写法是:


function getPrice(num){
    if(num < 0) return -1;
    else return num * 20;
}


这样写避免了一些不必要的错误,也使这个函数更清晰,不会让人疑惑。


(3)关于函数的参数


实际开发中,向函数传递参数是不可避免的,但是如果一个函数要传一大串的参数,那这看起来是非常恐怖的,使用这个函数的人不但要搞懂每个参数的意义,而且要对号入座不能出一点差错。


所以我们应该将函数的参数尽可能的减少,可以把参数都放入一个对象内,然后把该对象传函数


8.ES6的一些使用


代码中ES6的使用可以让你的代码更简洁,当然是有很多的了。这里列几个平时比较常用的:


(1)反引号(`)


模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。


传统的 JavaScript 语言,输出模板通常是这样写的:


citys="<li value="+item.xzqh+">"+item.name+"</li>";  


模板字符串中嵌入变量,需要将变量名写在${}之中。


citys=`<li value="${xzqh}">${name}</li>`; 


使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。


$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);


上面代码中,所有模板字符串的空格和换行,都是被保留的,比如ul标签前面会有一个换行。


(2)箭头函数


箭头函数使得表达更加简洁。


const isEven = n => n % 2 === 0;
const square = n => n * n;


上面代码只用了两行,就定义了两个简单的工具函数。如果不用箭头函数,可能就要占用多行,而且还不如现在这样写醒目。


箭头函数的一个用处是简化回调函数。


// 正常函数写法
[1,2,3].map(function (x) {
  return x * x;
});
// 箭头函数写法
[1,2,3].map(x => x * x);


Java用->箭头,C#用的箭头与JS一样:=>,这个箭头叫“lambda运算符”.

lambda表达式(箭头函数)据说是定义函数最简洁的方法,语法上几乎没有冗余成分了。因为JS弱类型的特点,JS中的lambda表达式要比C#和Java中的更简洁。


(3)使用 ES6 的 class


虽然 ES6 的 class 和使用 function 的 prototype 原理上是没有区别的,都是用的原型。class 可以通过extends关键字实现继承,这比通过修改原型链实现继承,要清晰和方便很多。


比如:


function Person(name, age){
    this.name = name;
    this.age = age;
}
Person.prototype.addAge = function(){
    this.age++;
};
Person.prototype.setName = function(name){
    this.name = name;
};


使用class的话代码就看起来简洁易懂了


class Person{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    addAge(){
        this.age++;
    }
    setName(name){
        this.name = name;
    }
}


总结


以上就是一些让代码看起来更优雅的建议,当然不仅仅是看起来优雅而已,有时候你随手写的一两句代码可能就会对性能造成不同的影响,可大可小。所以这里还是建议大家按照一定的规范来写,更简洁高效的代码不仅仅是个人能力的一种体现,你的团队也需要写出你来写出优雅高效的代码来提高团队的整体效率。


相关文章
|
25天前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
120 58
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
221 2
|
1月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
35 0
|
2月前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
2月前
|
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下测试正常
|
12天前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
29 3
原生js炫酷随机抽奖中奖效果代码
|
17天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
174 4
|
19天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
69 6
|
15天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
45 1