项目中多余的js写法之join和||连用

先看一段代码，框里面和框外面代码有区别吗？

也就是说直接给bookHtmlStr和checkHtmlStr赋值和经过一些无意义计算再赋值有什么区别，或者说有什么优劣吗？

首先我们看以上代码执行的结果截图，再分析原因。

也就是说，以上代码执行的最终结果为：

var bookHtmlStr = "<tr><td colspan=‘10‘>暂无数据!</td></tr>";
var checkHtmlStr = "<tr><td colspan=‘12‘>暂无数据!</td></tr>";

为什么最终结果是这样的呢？我们先看一下js中join的用法。例如：

var arr = new Array("1","2","3");
document.write(arr.join("."));
打印的结果为： 1.2.3 

在js中||和&&的用法如下：

a() && b() :如果执行a()后返回true，则执行b()并返回b的值；如果执行a()后返回false，则整个表达式返回a()的值，b()不执行；

a() || b() :如果执行a()后返回true，则整个表达式返回a()的值，b()不执行；如果执行a()后返回false，则执行b()并返回b()的值；

在js中，null、undefined、字符串空“”、数字0 转化boolean值时，都是为false。

var bookHtmlArr = [];
var checkHtmlArr = [];
var bookHtmlStr = bookHtmlArr.join("")||"<tr><td colspan=‘10‘>暂无数据!</td></tr>";
var checkHtmlStr = checkHtmlArr.join("")||"<tr><td colspan=‘12‘>暂无数据!</td></tr>";

这样的代码导致bookHtmlArr.join(“”)一直都是false，最后的结果一直都会返回”暂无数据!“。所以估计这段代码应该是当初写的时候从其它地方copy过来改改的。以上代码的原意是：如果bookHtmlArr为空，就把“暂无数据”赋值bookHtmlStr ，如果bookHtmlArr有值，就把bookHtmlArr赋值给bookHtmlStr 。

知其人还有知其所以然。不管以后看别人代码还是自己写代码，都尽量做到不留多余代码在项目中。