对js运算符“

2023-11-18

首先出个题:

如图:

假设对成长速度显示规定如下:

成长速度为5显示1个箭头;

成长速度为10显示2个箭头;

成长速度为12显示3个箭头;

成长速度为15显示4个箭头;

其他都显示都显示0各箭头。

用代码怎么实现?

 

差一点的if,else:

Js代码   收藏代码
  1. var add_level = 0;  
  2.   
  3. if(add_step == 5){  
  4.     add_level = 1;  
  5. }  
  6. else if(add_step == 10){  
  7.     add_level = 2;  
  8. }  
  9. else if(add_step == 12){  
  10.     add_level = 3;  
  11. }  
  12. else if(add_step == 15){  
  13.     add_level = 4;  
  14. }  
  15. else {  
  16.     add_level = 0;  
  17. }  

 

稍好些的switch:

Js代码   收藏代码
  1. var add_level = 0;  
  2.   
  3. switch(add_step){  
  4.     case 5 : add_level = 1;  
  5.         break;  
  6.     case 10 : add_level = 2;  
  7.         break;  
  8.     case 12 : add_level = 3;  
  9.         break;  
  10.     case 15 : add_level = 4;  
  11.         break;  
  12.     default : add_level = 0;  
  13.         break;  
  14. }  

如果需求改成:

成长速度为>12显示4个箭头;

成长速度为>10显示3个箭头;

成长速度为>5显示2个箭头;

成长速度为>0显示1个箭头;

成长速度为<=0显示0个箭头。

 

那么用switch实现起来也很麻烦了。

 

那么你有没有想过用一行就代码实现呢?

ok,让我们来看看js强大的表现力吧:

Js代码   收藏代码
  1. var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;   

更强大的,也更优的:

 

Js代码   收藏代码
  1. var add_level={'5':1,'10':2,'12':3,'15':4}[add_step] || 0;  

第二个需求:

Js代码   收藏代码
  1. var add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0;  


首先我们来梳理一下一个概念,请你一定要记住:在js逻辑运算中,0、""、null、false、undefined、NaN都会判为false,其他都为true(好像没有遗漏了吧,请各位确认下)。这个一定要记住,不然应用||和&&就会出现问题。

这里顺便提下:经常有人问我,看到很多代码if(!!attr),为什么不直接写if(attr);
其实这是一种更严谨的写法:
请测试 typeof 5和typeof !!5的区别。!!的作用是把一个其他类型的变量转成的bool类型。

下面主要讨论下逻辑运算符&&和||。

几乎所有语言中||和&&都遵循“短路”原理,如&&中第一个表达式为假就不会去处理第二个表达式,而||正好相反。
js也遵循上述原则。但是比较有意思的是它们返回的值。
代码:var attr = true && 4 && “aaa”;
那么运行的结果attr就不是简单的true或这false,而是”aaa”
再来看看||:
代码:var attr = attr || “”;这个运算经常用来判断一个变量是否已定义,如果没有定义就给他一个初始值,这在给函数的参数定义一个默认值的时候比较有用。因为js不像php可以直接在型参数上定义func($attr=5)。再次提醒你记住上面的原则:如果实参需要是0、""、null、false、undefined、NaN的时候也会当false来处理。


if(a >=5){

    alert("你好");
}
可以写成:
a >= 5 && alert("你好");


这样只需一行代码就搞定。但是需要注意的一点就是:js中||和&&的特性帮我们精简了代码的同时,也带来了代码可读性的降低。这就需要我们自己来权衡了。
一方面精简js代码,能实质性的减少网络流量,尤其是大量应用的js公用库。个人比较推荐的做法是:如果是相对复杂的应用,请适当地写一些注释。这个和正在表达式一样,能够精简代码,但是可读性会降低,对读代码的人要求会高些,最好的办法就是写注释。

 

我们可以不使用这些技巧,但是我们一定要能看懂,因为这些技巧已经广泛应用,尤其是像JQuery等js框里的代码,不理解这些你就很难看懂别人的代码。

像var Yahoo = Yahoo || {};这种是非常广泛应用的。

 

ok,最后让我们来看一段jQuery中的代码吧:

 

Js代码   收藏代码
  1. var wrap =  
  2.     // option or optgroup  
  3.     !tags.indexOf("<opt") &&  
  4.     [ 1, "<select multiple='multiple'>""</select>" ] ||  
  5.       
  6.     !tags.indexOf("<leg") &&  
  7.     [ 1, "<fieldset>""</fieldset>" ] ||  
  8.       
  9.     tags.match(/^<(thead|tbody|tfoot|colg|cap)/) &&  
  10.     [ 1, "<table>""</table>" ] ||  
  11.       
  12.     !tags.indexOf("<tr") &&  
  13.     [ 2, "<table><tbody>""</tbody></table>" ] ||  
  14.       
  15.     // <thead> matched above  
  16.     (!tags.indexOf("<td") || !tags.indexOf("<th")) &&  
  17.     [ 3, "<table><tbody><tr>""</tr></tbody></table>" ] ||  
  18.       
  19.     !tags.indexOf("<col") &&  
  20.     [ 2, "<table><tbody></tbody><colgroup>""</colgroup></table>" ] ||  
  21.       
  22.     // IE can't serialize <link> and <script> tags normally  
  23.     !jQuery.support.htmlSerialize &&  
  24.     [ 1, "div<div>""</div>" ] ||  
  25.       
  26.     [ 0, """" ];  
  27.       
  28.     // Go to html and back, then peel off extra wrappers  
  29.     div.innerHTML = wrap[1] + elem + wrap[2];  
  30.       
  31.     // Move to the right depth  
  32.     while ( wrap[0]-- )  
  33.         div = div.lastChild;  

 

这段代码是作者用来处理 $(html) 时,有些标签必须要约束的,如<option>必须在<select></select>之内的。

可能你也发现了作者还有一个很巧的地方就是 !tags.indexOf("<opt") ,作者很巧很简单的就实现了startWith的功能了,没有一点多余的代码。jquery源代码中还有很多如此精妙的代码,大家可以去学习学习。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

对js运算符“ 的相关文章

  • 仿中国婚博会微信小程序

    仿中国婚博会微信小程序 app json pages pages index index pages cash cash pages marry marry pages community community pages me me pag
  • VUE项目中的全局格式化时间过滤器

    自定义格式化时间 一 问题 这是一个后台管理系统中的商品列表页 其中的时间这一项在调用接口后会发现是以毫秒来计算的 这样当然是不行的啦 要换算成我们日常使用的2020 04 07 17 13 这样的时间格式 二 解决办法 1 打开项目中的m
  • js倒计时

    html部分代码 div class time span 60 span span s span div js部分代码 var second document getElementById second var m 60 var time
  • 问题记录:js的=>和function

    这个问题搞了一整天 是这么一个功能
  • 微信小程序自动检测版本并提示更新新版本

    微信小程序自动检测版本并提示更新新版本 微信小程序开发过程中 我们在版本更新迭代后 微信小程序客户端并不能触发自动更新 需要用户手动清理小程序后重新搜索进入后才能获取到最新的小程序版本 但是这个是用户所不能感知到的操作 也很麻烦 故需要提醒
  • Vue中鼠标悬停更换图片/文字内容,动态展示/修改某些属性

    Vue中鼠标悬停更换图片 文字内容 动态展示 修改某些属性 鼠标悬停时 mouseenter 鼠标离开时 mouseleave 利用以上来绑定相应方法 例如 div 分别为鼠标悬停时和离开时绑定方法changeImageSrc 并传递参数
  • postMan使用技巧

    使用postMan调试接口 一些接口要实现登录才能访问 即要还token才能访问 一般登录后 拿到token才复制到其他接口下添加token变量 如些复制感觉是挺麻烦的 这时我们可以设置postman的全局变量 操作如下 添加调试环境和全局
  • js 本地存储和获取

    localStorage setItem temp orderAr 存入 参数 1 调用的值 2 所要存入的数据 console log localStorage getItem temp 输出
  • js数组相加相减函数

    数组相减 reduceArray arr1 arr2 for var i arr1 length 1 i gt 0 i var a arr1 i for var j arr2 length 1 j gt 0 j var b arr2 j i
  • live-server的使用

    本地开发常常需要搭建临时的服务 第一时间我们会想到用http server 但现在流行修改文件浏览器自动刷新hot socketing 热拔插 如live reload 若想浏览器自动打开项目 用opener 现在live server实现
  • Umi+Dva初印象<基础应用,结构,流转逻辑>

    目录 前言 知识储备 generator函数 Dva初识 实际交互 函数式组件 class组件 前言 项目初始为umi脚手架进行初始化 lt 初始化过程 http t csdn cn cuTaY gt 工程中加载了umi自带的antd ui
  • JS声明二维数组常见办法

    JS声明二维数组常见办法 目录 文章目录 前言 new Array 和 fill fill 灵活插入 for 笨办法 Array from 前言 目前论坛常见的办法代码质量奇差 因此针对这个问题进行整理 new Array和fill con
  • html 中的正则(基础)

    正则表达式 1 什么是 正则表达式就是专门规定一个字符串中字符出现的规律的一套规则 2 何时 2大类场景 a 验证字符串格式 b 查找敏感词 如何在js中创建正则表达式 用于查找和匹配 2种 1 标准写法 a var 变量 new RegE
  • js 字符串拼接的4种方法

    一 使用连接符 把想要连接的字符串串起来 let shy 帅哥 let a 我是 shy console log a 我是帅哥 二 模板字符串 模板字符串 template string 是增强版的字符串 用反引号 标识 特点 1 字符串中
  • JavaScript every() 方法:提示、技巧和用例

    JavaScript 巩固了其作为世界上最流行和最广泛使用的编程语言之一的地位 这是有充分理由的 它的动态特性和多功能性使其成为 Web 开发 从客户端交互到服务器端编程 的首选 提高其效率的一个重要因素是内置方法的多样性 其中一种有用的方
  • js 手机、邮箱、身份证格式验证

  • Vue中key

    相信很多小伙伴跟我一样在使用v for的时候对key值的存在和必要性有疑问 通过ESlint进行代码检查的时候不加上key还会报错 想知道key为什么存在可以先想想key为什么产生 会不会是尤雨溪灵光一闪就给Vue添加上了key 也有可能
  • React class组件、react-hook函数组件分别实现五子棋

    react class类组件 react hook函数组件分别实现五子棋 前言 使用create react app脚手架简单搭建 不用安装其他依赖 纯 js css实现 这里就只是简单的说明目录结构和思路 具体的代码实现请转到 Githu
  • react(craco)移动端使用postcss-px-to-viewport自适应布局

    Craco 使用postcss px to viewport devDependencies craco craco 6 4 3 xianzhengquan postcss px 2 vw 0 0 1 postcss 8 3 0 peerD
  • js 对数组对象进行排序

    let listData id 1 name 测试1 presenttime 1557883600000 id 2 name 测试2 presenttime 1580751813000 id 3 presenttime 1561448381

随机推荐

  • sklearn决策树怎么使用ccp_alpha进行剪枝

    本站原创文章 转载请说明来自 老饼讲解 机器学习 ml bbbdata com 目录 一 CCP后剪枝是什么 二 如何通过ccp alpha进行后剪枝 1 查看CCP路径 2 根据CCP路径剪树 三 完整CCP剪枝应用实操DEMO 四 CC
  • c语言初学者如何编写一个相加求和程序

    欢迎来到南方有乔木的博客 博主主页 点击点击 戳一戳 博主QQ 1636758318 博主简介 一名在校大学生 正在努力学习Java语言编程 穷且意坚 不坠青云之志 希望能在编程的世界里找到属于自己的光 跪谢帅气or美丽的朋友们能够帮我点赞
  • 【翻译】Dagre-D3 文档整理和翻译

    地址 github Dagre D3 目录 文章目录 dagre d3 设计优先级 安装 npm Bower Browser Scripts 源代码构建 如何使用Darge 聚焦渲染 例子 配置布局 生成的图像 第三部分例子 推荐阅读 da
  • Android——Intent用法

    Intent 意图 一般可以被用于启动活动 启动服务以及发送广播等场景 现在先说一下启动活动这部分 Intent分为显式Intent和隐式Intent 一 显式Intent的使用 Intent有多个构造函数的重载 常用的一个有Intent
  • 基于Qt的OpenGL编程(3.x以上GLSL可编程管线版)---(十九)混合

    Vries的教程是我看过的最好的可编程管线OpenGL教程 没有之一 其原地址如下 https learnopengl cn github io 04 20Advanced 20OpenGL 03 20Blending 关于混合的详细知识了
  • WOW装备大全(07.11.30)

    德需求 布拉克希斯的睡眠法杖 装备后绑定双手法杖131 223 伤害速度 3 每秒伤害 59 550 点护甲 39 耐力 耐久度 100 100 需要等级 64 装备 在猎豹 熊 巨熊和枭兽形态下的攻击强度提高234点 大地守卫者拾取后绑定
  • MySQL数据库学习笔记(九)实验课六之触发器和存储过程

    没想到这就是最后一次实验了 一点知识 道具 delimiter DELIMITER 这是用于指定语句分隔符的特殊命令 默认情况下 MySQL使用分号 作为语句的结束符 然而 当我们需要定义存储过程 触发器或函数等包含多条SQL语句的对象时
  • 单片机毕设 基于单片机的酒精浓度检测仪 - stm32 酒驾检测 酒精检测

    文章目录 0 简介 1 项目简介 2 系统设计 3 硬件设计 3 1 MQ 3 模块 3 2 GPRS模块 4 软件设计 4 1 GPRS模块使用 常用AT指令 4 1 1 数据收发demo 5 实现效果 5 最后 0 简介 Hi 大家好
  • 冷启动与热启动的定义

    在 Android 应用程序开发中 启动应用程序时 系统可以采用两种启动方式 冷启动和热启动 冷启动 Cold start 当应用程序从未启动过或者被系统杀死后再次启动时 就是冷启动 在冷启动时 应用程序的进程会被系统创建 应用程序需要重新
  • 100天精通Python(基础篇)——第9天:字符串拼接

    文章目录 拼接符号 代码示例 拼接符号 代码示例 print LCL 全世界 最帅 最有钱的 name lcl address 特斯拉总经理办公室 tel 8888888 print 我是 name 地址 address 电话 tel
  • 附录:kafka源码启动

    本文以源码2 8为例 准备如下 idea 2019 1 4 jdk 1 8 scala 2 12 8 gradle 6 8 1 zookeeper 3 4 10 kafka2 8源码 注意 以下安装都需要装在没有空格的路径上 比如D Pro
  • 分享一个selenium jar包 的下载地址,各版本都有,包括selenium-server-standalone.jar、selenium、selenium-server

    http selenium release storage googleapis com index html
  • 不懂代码也不用怕!10款无代码网站搭建平台

    作为设计师 对网站满脑子的构思 却受限于时间和技能 比如写代码 这是何其无奈 那个在你脑中盘桓许久的网站 或许是一个博客 可能是作品展示网站 但无论是哪种 想要让想法落地成形终究是一个艰巨的任务 今天为你推荐10款网站设计 开发工具能帮你改
  • Micropython驱动ST7735显示中文(中文字体库)

    大家是不是遇到显示中文就头大了 又是取模又是怎么的 但麻烦 太繁琐了 对确定的字符显示来说还可以 但不确定的内容时就麻烦了 所以 今天还是来讲讲干货了 来使用一个方便的方式来显示中文 不用取模 直接显示你想要的中英文字体 开始之前要说一下的
  • 戴尔服务器c系列,主打云计算市场 戴尔C系列服务器大盘点

    戴尔机架 R系列 塔式 T系列 和刀片 M系列 中采用至强5600处理器的服务器 其实 还有一个系列同样采用至强5600的处理器 它就是PowerEdge C 系列 这支系列是戴尔在2010年4月推出 是面向云计算平台的全新产品线 值得关注
  • 10种进阶方法让你快速测试端口连通性

    转载连接 介绍 Ping是Windows Linux和Unix系统下的一个检查网络连通性的命令工具 对于大部分互联网用户来说很实用 很方便 但是ping有个缺点 不能指定端口 如果源地址被设置禁ping 那么ping命令就形同虚设 为了弥补
  • Mysql教程(二):DDL学习

    Mysql教程 二 DDL学习 DDL Data Definition Language 数据定义语言 用来定义数据库对象 数据库 表 字段 1 DDL数据库操作 查询 查询所有数据库 SHOW DATABASES 查询当前数据库 SELE
  • 【华为OD】华为性格测试(综合测试)高分策略

    性格测试 综合测试 注意 1 性格测试非常重要 是一次否决制 18 个月有效期 所以态度一定要认真对待 不要随便乱选 2 做题原则 正向原则 积极乐观向上 3 时间为 25 30 分钟 会频繁出现重复选项重复出现的题目注意一致性 提示 1
  • 排列数组使得偶数在奇数的前面

    Name ReorderOddEven c Author 齐保元 Version Copyright Your copyright notice Description Hello World in C Ansi style include
  • 对js运算符“

    首先出个题 如图 假设对成长速度显示规定如下 成长速度为5显示1个箭头 成长速度为10显示2个箭头 成长速度为12显示3个箭头 成长速度为15显示4个箭头 其他都显示都显示0各箭头 用代码怎么实现 差一点的if else Js代码 var