js和或运算符| | ampamp 妙用

让我从一个问题开始：

如图，假设增长率显示指定如下：如果增长率为5，将显示一个箭头；成长速度10显示2箭；12的成长速度显示3箭；15的增长率显示了4个箭头；将显示所有其他内容。显示0的所有箭头。如何用代码实现？if，else: Js代码几乎重复的代码如下： var add _ level=0；if(add _ step==5){ add _ level=1；} else if(add _ step==10){ add _ level=2；} else if(add _ step==12){ add _ level=3；} else if(add _ step==15){ add _ level=4；} else { add _ level=0；}稍微好一点的开关：Js代码复制如下： var add _ level=0；switch(add _ step){ case 5 : add _ level=1；打破；案例10 : add _ level=2；打破；案例12 : add _ level=3；打破；案例15 : add _ level=4；打破；默认： add _ level=0；打破；}如果需求改为：增长率为12，显示4个箭头；10的增长率显示3个箭头；成长速度5显示2箭；生长速度为0时显示1个箭头；增长率=0显示0箭头。那么用switch实现就很麻烦了。那么，你有没有想过用一行代码？好了，我们来看看js强大的表现力：Js代码副本的代码如下： var ADD _ LEVEL=(ADD _ STEP==5 1)| |(ADD _ STEP==10 2)| |(ADD _ STEP==12 3)| |(ADD _ STEP==15 4)| | 0；更强大更好：Js代码复制如下：VAR ADD _ LEVEL={'5' :1，' 10' :2，' 12' :3，' 15 ' 33604 }[ADD _ step]| | 0；第二个要求：Js代码复制如下： var add _ level=(add _ step 124)| |(add _ step 103)| |(add _ step 52)| |(add _ step 01)| | 0；首先，我们来梳理一个概念。请记住：在js逻辑运算中，0 ' '，null，false，undefined，NaN都会被判定为假，而其他的都是真的(好像没缺什么，请确认一下)。这一点一定要记住，否则在应用| |和时会出现问题。顺带一提，经常有人问我，看到很多代码if(！Attr)，为什么不直接写if(attr)；其实这是一种比较严谨的写法：请测试typeof 5和typeof！5.是将其他类型的变量转换为bool类型。下面主要讨论逻辑运算符和|。在几乎所有语言中，| |和都遵循“短路”原则。如果第一个表达式为false，则不会处理第二个表达式，而| |则正好相反。Js也遵循上述原则。但更有趣的是它们所回报的价值。代码：varattr=true 4“AAA”；那么运行结果attr不是简单的真或假，而是“aaa”。我们来看看| |:代码：var attr=attr | |这个操作常用于判断一个变量是否定义，如果没有定义，就给它一个初始值，这在定义函数参数的默认值时很有用。因为与php不同，js可以直接在类型参数上定义func($attr=5)。再次提醒大家记住上面的原则：如果实际参数需要为0 ' '、null、false、undefined或NaN，则按false处理。if(a=5){ alert(' hello ')；}可以写成：a=5 alert(' hello ')；只需要一行代码就可以完成。但是，需要注意的是，js中| |和的特性不仅帮助我们简化了代码，还降低了代码的可读性。这需要我们自己来权衡。一方面，精简js代码可以大幅减少网络流量，尤其是大量的js公共库。个人建议，如果是比较复杂的应用，请适当写一些评论。像这个正表达式，可以简化代码，但是可读性会降低，对读代码的人要求会更高。最好的方法是写评论。我们不需要使用这些技术，但是我们必须能够理解它们，因为这些技术已经被广泛使用，尤其是像JQuery这样的js盒子中的代码。如果你不理解他们，你很难理解别人的代码。like var Yahoo=Yahoo | | { }；这是非常广泛使用的。

好吧，最后让我们来看一段框架中的代码吧：Js代码复制代码代码如下： var wrap=//选项或optgroup！tags.indexOf('opt') [ 1，' select multiple='multiple ' '，'/select' ] ||！tags.indexOf('leg') [ 1，' fieldset '，'/field set ']| | tags.match(/^(thead|tbody|tfoot|colg|cap)/[1,'表'，'/table' ] |！tags.indexOf('tr') [ 2，' tabletbody '，'/tbody/table' ] || //上面匹配的d(！tags.indexOf('td') ||！标签。indexof(' th ')[3，' tabletbodytr '，'/tr/tbody/table' ] ||！tags.indexOf('col') [ 2，'表体/tbodycolgroup '，'/colgroup/table ']| | |//IE无法正常序列化链接和脚本标记！jQuery.support.htmlSerialize [ 1，' ' divdiv '，'/div ']| | | |[0，'，' ']；//转到超文本标记语言并返回，然后剥离额外的包装器div。inner html=wrap[1]elem wrap[2]；//向右移动深度，同时（换行[0]-)div=div。最后一个孩子；这段代码是作者用来处理$(html)时，有些标签必须要约束的，如选择权必须在选择/选择之内的。可能你也发现了作者还有一个很巧的地方就是！tags.indexOf('opt ')，作者很巧很简单的就实现了从.开始的功能了，没有一点多余的代码jquery。源代码中还有很多如此精妙的代码，大家可以去学习学习。