大致介绍

这是小m马发布的第一篇文章，关于前端领域的开发习惯，这是自己的一些经验总结，希望可以给大家带来一定的帮助，提升自己的开发效率以及代码质量，m马会用react，以及vue分别举出一些正反例来进行对比，从而更直观的体现代码开发的质量性

NO.1 接了上一任前端的坑（if判断的升级）

往往前端进入一家新公司以后，看到上一任的前端留下的一片if，else，一片的for循环嵌套for循坏，顿时小m马都要傻眼了，无任何逻辑上面的梳理，遇见问题就if，遇见遍历就一个for，往往会造成代码开发的维护性极差，甚至还会让人无法理解开发者的意图，接下来小m马给大家介绍简洁一点的if写法以及for循环的写法！

//常规针对一个值是否存在的if，完全可以用三目运算符进行代替
if (foo) bar(); else baz(); ==> foo?bar():baz(); 

//这是小m马在网上浏览到的，觉得也是非常不错，用到或与非的技巧
if (foo) bar(); ==> foo&&bar();
if (!foo) bar(); ==> foo||bar();

针对以上的if进行一个总结

1. 首先在开发中if判断是避免不了的，我们尽量通过逻辑去减少if的使用频率，而不是遇见一个需要进行抉择的if下来（具体的这个思维逻辑小m马会在下一期中更新出来）
2. 使用if之后我们也需要简洁明了的表达出来，上面的这两个例子中，使用三目运算符就不多做解释了，重点讲一下第二种使用或与非的形式
3. &&符号遇见为false的选项就会停止下来，如果是true就会往后继续执行，讲到这大家就明白了吧，在例子中，foo存在就会往后执行函数，不存在，函数也就不会执行。
4. ||符号，在判断条件中，是遇见false的话就会往后执行，可以看出我们是要当这个foo不存在的时候才会执行函数的，所以使用||，foo不存在了，是fasle，所以执行了后面 的函数。
   

接下来进行持续升级，出小干货！

//反例来了！！！！
//第一种  小m马不知道大家有没有在公司看到过这样的代码，真的实在忍受不了
if( a ==1){
	return 'red'
}
else if (a == 2){
	return 'yellow'
}
else {
	return 'green'
}
//第二种，通过switch进行处理，这还好一点，是可以接受的
switch(a){
	case 1:
	return 'red';
	case 2:
	return 'yellow';
	case 3:
	return 'green';
}

//第三种，这是小m马推荐的写法，简洁明了！
//这个obj[a]的写法是很基础的，因为小m马写的东西也是比较基础所以多介绍一下，
//这是es6中的对象写法，大家可以看一下es6
//入口：http://es6.ruanyifeng.com/
let obj = {
	1:'red',
	2:'yellow',
	3:'green'
}
return obj[a]

//通过对象的形式，在开发微信小程序的时候会更加可以体现出价值..举例
//比如通过一个按钮进行跳转不同页面的时候，可以写成一下这样
jumppage（pageone）
//函数域
let address = {
 pageone = 'page/home/home?user_id=111',
 pagetwo = 'page/home/mine?user_id=222',
 pagethree = 'page/home/active?user_id=333',
}
wx.navigateTo({
  url: address[parameters]
})

1. 这是关于if判断的使用，通过使用对象的形式快速的可以让开发者明白自己的意图这才是我们程序员的重中之重啊，一个好的代码习惯，可以让自己做的都开心点。（下一期中关于if判断的写法还有持续的升级，小m马还有更多的关于开发的习惯有分享）
   

跳出反反复复一直写的for循环

//来来来，小m马给大家分享一下for循坏要怎么写，首先举一个反例给大家看
//在工作中，我们经常要针对后端的数据进行一些修改，补充
//因为有点惨的是，后端的数据经常不是我们想要的格式，来咯来咯
//反例！！！
for( let i = 0 ; i < subjects.length ; i++){
		subjects[i].color = 'red'
	for( let n = 0 ; n < subjects[i].topics.length ; n++){
			subjects[i].topics[n].color = 'blue'
		for( let m = 0 ; m < subjects[i].topocs[n].options.length ; m++){
			subjects[i].topics[n].options[m]= 'yellow'
		}
	}
}

//正例，很明显啊，这个对数组以及对象的一些操作，又是一个多维的状态，
//上面的这一片for循环下来，小m马真是眼花缭乱啊，让我想起了功夫的那句话，
//‘我到底是打他还是打他m啊’

for(let subject of subjects){
		subject.color = 'red'
	for (let topic of subject.topics){
			topic.color = 'blue'
		for(let option of topic.options){
				option = 'yellow'
		}
	}
}
//这一段代码，就一个字，爽！

1. 通过使用for of 在处理这种三维或者说多层的数据时，可以很清晰的处理好每一步，并且可以看得很清楚我每一步都是在做什么，不会出现说一大串密密麻麻我自己都不知道自己在写什么的情况，接下来小m马，针对for循环给大家进行写出每一种不同情况下应该用什么循环进行处理

let myArray = [1,2,3,4]

myArray.forEach(function(index){
    //操作你的index，index即为数组中的元素
    console.log(index)  // 依次为1,2,3,4,缺点在于没有返回值
})

for (let index in myArray) { 
  console.log(myArray[index]);  
  //数组操作同样为1,2,3,4,for in 会存在一些小问题，所以不太推荐使用
}

for (let value of myArray) {
  console.log(value);
  //for of 上面的代码已经演示过了，针对数组或者对象都是极好的选择
}

当然还有一些循环的操作，比如在react中经常用于遍历dom节点的map，和ea6中的new map ，小m马依然会在下一期分享中写出，这些用法来和大家进行分享，希望大家的程序员开发道路会越来越顺利，加油！！！

最后

以上就是懦弱大船为你收集整理的前端js if判断以及for循环该如何写的更好，优化upup大致介绍的全部内容，希望文章能够帮你解决前端js if判断以及for循环该如何写的更好，优化upup大致介绍所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。