`
tomkoo
  • 浏览: 184822 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Javascript 中三元运算符的用法

    博客分类:
  • AJAX
阅读更多
一直来都对Javascript的三元运算符很迷惑,不知道究竟应该怎么用,大概是受了例如Java这样的语言的影响,总是觉得三元运算符的条件表达式必须返回Boolean类型。就是这个东西让我对Javascript的三元运算符迷惑了许久,今天终于忍受不下去了,于是自己写代码测试了一番,原来它是这样的。

三元预算表达式: Condition ? doSomething : doOtherThing ;

1. 同所有语言的三元运算一样,Javascript的三元运算同样支持Condition为Boolean类型的情况。当Condition为True的时候,执行doSomething,为False的时候执行doOtherThing。

2. 支持Condition为字符串。当Condition=“”的时候,等同于False,执行doOtherThing;当Condition!=“”的时候,等同于True,执行doSomething。

3. 支持Condition为对象。当Condition=undefined或者null的时候,等同于False,执行doOtherThing;当Condition!=undefined和null的时候,等同于True,执行doSomething。


目前我的总结就是发现了这3中使用方式,是否还有其他的使用方式还不知道。呵呵,不过就算是这样也让我减少了不少看Javascript代码时的疑惑!
分享到:
评论
4 楼 dabing69221 2013-06-29  
jianfeng008cn 写道
tomkoo 写道
一直来都对Javascript的三元运算符很迷惑,不知道究竟应该怎么用,大概是受了例如Java这样的语言的影响,总是觉得三元运算符的条件表达式必须返回Boolean类型。就是这个东西让我对Javascript的三元运算符迷惑了许久,今天终于忍受不下去了,于是自己写代码测试了一番,原来它是这样的。

三元预算表达式: Condition ? doSomething : doOtherThing ;

1. 同所有语言的三元运算一样,Javascript的三元运算同样支持Condition为Boolean类型的情况。当Condition为True的时候,执行doSomething,为False的时候执行doOtherThing。

2. 支持Condition为字符串。当Condition=“”的时候,等同于False,执行doOtherThing;当Condition!=“”的时候,等同于True,执行doSomething。

3. 支持Condition为对象。当Condition=undefined或者null的时候,等同于False,执行doOtherThing;当Condition!=undefined和null的时候,等同于True,执行doSomething。


目前我的总结就是发现了这3中使用方式,是否还有其他的使用方式还不知道。呵呵,不过就算是这样也让我减少了不少看Javascript代码时的疑惑!



这样的理解是舍本求末,你应该去看看js中各个原始类型的包装类,他们各自的特点以及相互的关系,转化的默认规则。要不,碰到同一个知识点的下一个应用,你又需要做各种实验来验证自己的建立在经验之上的想法了。


说的不错,"授人以鱼不如授人以渔"
3 楼 tomkoo 2006-09-22  
谢谢楼上两位的提点,受益匪浅!
2 楼 foxty 2006-09-21  
这些都是 javascript中的一些基础概念。本身javascript及时类型不严格的一中脚本语言 。在合适的地方,它会将自动进行类型转换 。

在三元表达式中,第一个表达式需要一个bool类型的表达式 。那么 在这里的类型都需要被转换成bool类型。undefined,null,0,""都会被转换成 false。

弄清楚了原理,理解起来就很容易了。
1 楼 jianfeng008cn 2006-09-21  
tomkoo 写道
一直来都对Javascript的三元运算符很迷惑,不知道究竟应该怎么用,大概是受了例如Java这样的语言的影响,总是觉得三元运算符的条件表达式必须返回Boolean类型。就是这个东西让我对Javascript的三元运算符迷惑了许久,今天终于忍受不下去了,于是自己写代码测试了一番,原来它是这样的。

三元预算表达式: Condition ? doSomething : doOtherThing ;

1. 同所有语言的三元运算一样,Javascript的三元运算同样支持Condition为Boolean类型的情况。当Condition为True的时候,执行doSomething,为False的时候执行doOtherThing。

2. 支持Condition为字符串。当Condition=“”的时候,等同于False,执行doOtherThing;当Condition!=“”的时候,等同于True,执行doSomething。

3. 支持Condition为对象。当Condition=undefined或者null的时候,等同于False,执行doOtherThing;当Condition!=undefined和null的时候,等同于True,执行doSomething。


目前我的总结就是发现了这3中使用方式,是否还有其他的使用方式还不知道。呵呵,不过就算是这样也让我减少了不少看Javascript代码时的疑惑!



这样的理解是舍本求末,你应该去看看js中各个原始类型的包装类,他们各自的特点以及相互的关系,转化的默认规则。要不,碰到同一个知识点的下一个应用,你又需要做各种实验来验证自己的建立在经验之上的想法了。

相关推荐

    javascript三元运算符用法实例

    三元运算符用法实例: 如名字表示的三元运算符需要三个操作数。 语法是 条件 ? 结果1 : 结果2;. 这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2。满足条件时结果1否则结果2。 代码如下: ...

    JavaScript三元运算符的多种使用技巧

    主要介绍了JavaScript三元运算符的多种使用技巧,本文讲解了普通用法、稍微聪明点的用法、甚至更变态些的用法等,需要的朋友可以参考下

    javascript文档

    条件(三元)运算符 (?:) 根据条件执行两个表达式之一。 constructor 属性 指定创建对象的函数。 continue 语句 停止循环的当前迭代,并开始一次新的迭代。 cos 方法 返回一个数的余弦。 Date 对象 提供日期和...

    gulp-cond:Gulp的三元运算符

    的三元运算符。 用法 首先,安装gulp-cond作为开发依赖项: npm install --save-dev gulp-cond 然后,使用它来条件化gulpfile.js管道插件: var cond = require ( 'gulp-cond' ) ; var prod = gulp . env . ...

    通过函数传递值,这是对ES使用建议的管道运算符(|>)的替代方法-JavaScript开发

    ppipe通过函数传递管道值,这是为ES使用建议的管道运算符(|>)的替代方法。 也支持返回承诺的功能。 在这种情况下,连锁的结果也将是一个希望。 这是通过函数获得的相似管道值,是为ES使用建议的管道运算符(|>)的...

    JavaScript实用范例词典01

    1.10 三元运算符(条件运算符) 9 1.11 检查变量是否存在... 10 1.12 表达式的计算顺序... 11 1.13 条件选取(if) 12 1.14 多条件的选取if 13 1.15 双重选取(if) 14 1.16 多重选取if 15 1.17 switch流程控制... ...

    微软JavaScript手册

    条件(三元)运算符 (?:) 根据条件执行两个表达式之一。 constructor 属性 指定创建对象的函数。 continue 语句 停止循环的当前迭代,并开始一次新的迭代。 cos 方法 返回一个数的余弦。 Date 对象 提供日期和...

    JavaScript_Bootcamp:JavaScript Bootcamp的内容

    算术运算符 按位运算符 类型强制 吊装 数据类型和变量的挑战[2挑战]处理数据 JavaScript编号+方法 JavaScript字符串+方法第1部分 JavaScript字符串+方法第2部分 JavaScript布尔值 数据类型方法挑战[5挑战]控制流 ...

    js_roadmap:JavaScript 开发人员路线图

    在 HTML 中,将其插入1) 基础知识JavaScript 词法结构JavaScript 变量数据类型评论 (1) JavaScript 数学运算符逻辑运算符周期三元运算符JavaScript 函数箭头函数JavaScript 循环视野范围严格模式 - “使用严格” 2)...

    leetcode算法分组-javascript_algorithms:各种算法在Javascript中的实现

    使用字符串和三元运算符完成。 添加两个数字 - 涉及链表的总和,使用递归解决(来自 LeetCode ) Group Anagrams - 识别和分组 Anagrams,使用正则表达式和循环解决(来自 LeetCode ) 唯一路径 - 动态规划问题,...

    javascript-ii-gama-xp:为 JS 2 模块创建的 Repo,Gama Academy

    使用 Javascript 应用的逻辑 - Gama Experience :rocket:高级Javascript 模板字符串三元运算符箭头函数数组、扩展运算符和迭代方法对象和解构SPA、PWA 和 WebComponents 小项目如何在浏览器外运行javascript vs 代码...

    js-exercises:万物JavaScript

    :在模板字符串中使用三元运算符。 :使用函数和模板字符串从关键字数组中渲染列表。 :模板文字的更高级形式,标签使您可以使用函数来解析模板文字。 :词典obj示例。 在句子中添加abbr标签。 :使用标记模板...

    React 条件渲染最佳实践小结(7种)

    在 javascript 中,我们通常使用if else 语句,switch case语句和三元运算符编写条件渲染。 以上所有这些方法都适用于 React。 但是问题是,我们如何才能有效地使用它们? 像你知道的那样,React 具有 JSX 标记,...

    怎么刷leetcode-100-days-of-code:扩展JavaScript知识

    怎么刷leetcode 代码 100 天 - 日志 第一天:2019 年 4 月 ...Javascript ...语句甚至三元运算符的所有信息。...Javascript,到目前为止我真的很喜欢这门语言。...我还刷了我的函数知识,并在方法中使用了“t

    javascript入门笔记

    三目(三元)运算符 :?: 1、语法 条件?表达式1:表达式2; 条件是一个boolean类型的数据,如果条件结果为true,则执行表达式1的内容,并将表达式1的结果作为整体表达式的结果。如果条件为false,则执行表达式2的...

    TIL:今天我学到了..

    函数,对象2020-02-17:(Ingang)数组,循环,数组内置函数,对象构造函数,类2020-02-18:(Ingang)三元运算符,Truthy,Flasy,缩短了评估逻辑计算方法,非结构化分配,价差,范围2020-02-19:JavaScript的历史...

    react-case:React的内联声明式逻辑

    React案例厌倦了三元运算符,而if-else在您的render方法之上? 是否需要没有奇怪语法的声明性逻辑? <Condition> ()}>Me too.</Case> <Case>Sorry to hear that.</Case></Condition>安装npm install react-...

    emoji_roulette:从列表中显示随机表情符号-编码器Dojo React Basics应用程序

    要实现的功能 在CoderDojo期间于2017年8月24日完成-React的一般介绍 ...如果未选择表情符号,则显示替代文本(使用三元运算符进行条件渲染) 将表情符号渲染标记提取到组件方法 使用twemoji包处理不支持

Global site tag (gtag.js) - Google Analytics