uni-app 关于undefined和null 作为判断条件

本文探讨了在uni-app中如何利用undefined作为条件判断。当后台返回的数据对象值为undefined时,这种情况在if语句中等价于false。以一个具体的业务场景为例,当已报价时间为空且截至报价时间大于等于当前时间时,允许进行报价。文章还提到了时间日期转换的util工具在处理此类问题中的应用。

前提需求:后台得到的数据对象中的某个值没有。会提示undefined,此时可以作为if 条件语句的判断,在条件判断中 undefined 的作用=false

具体业务:已报价时间为空且截至报价时间大于等于此刻的时间-----可报价

具体代码:

export default{
 data(){
 return{
   allow:false   //控制是否可以报价
 }
 },
 methods:{
    getData(){
    //后台请求得到数据后
    // 判断报价单,是否允许报价
		if (!this.Data.qDate) {      //Data 为后台得到数据 qDate为报价时间,没有undefined=false
			const oDateTime = new Date().getTime();  //此刻的时间 转为时间戳
			let pqExpiryDate = oDateTime;
			if (this.Data.expiryDate) {   //expiryDate为截至时间 有的话
			ExpiryDate = dateUtil.strToDate(this.Data.expiryDate).getTime(); 
			//转为时间戳
			//dateUtil.strToDate是一个日期转换的方法js(见下面代码)
					}
			if (oDateTime <= pqExpiryDate) {     //比较
					this.allowQuotation = true;   //允许报价
							}
						}

   }

}
}

时间,日期转换util

   /**
 * 字符串转换为日期对象
 * @param dateStr string 格式为yyyy-MM-dd HH:mm:ss,必须按年月日时分秒的顺序,中间分隔符不限制
 */
export function strToDate(dateStr) {         //dateStr:'2021-03-23 16:36:00'
    return strFormatToDate('yyyy-MM-dd HH:mm:ss', dateStr);
}
**
 * 把指定格式的字符串转换为日期对象yyyy-MM-dd HH:mm:ss
 *
 */
export function strFormatToDate(formatStr, dateStr) {
    let year = 0;
    let start = -1;
    let len = (dateStr|| '').length;
    if ((start = formatStr.indexOf('yyyy')) > -1 && start < len) {
        year = dateStr.substr(start, 4);
    }
    let month = 0;
    if ((start = formatStr.indexOf('MM')) > -1 && start < len) {
        month = parseInt(dateStr.substr(start, 2)) - 1;
    }
    let day = 0;
    if ((start = formatStr.indexOf('dd')) > -1 && start < len) {
        day = parseInt(dateStr.substr(start, 2));
    }
    let hour = 0;
    if (((start = formatStr.indexOf('HH')) > -1 || (start = formatStr.indexOf('hh')) > 1) && start < len) {
        hour = parseInt(dateStr.substr(start, 2));
    }
    let minute = 0;
    if ((start = formatStr.indexOf('mm')) > -1 && start < len) {
        minute = dateStr.substr(start, 2);
    }
    let second = 0;
    if ((start = formatStr.indexOf('ss')) > -1 && start < len) {
        second = dateStr.substr(start, 2);
    }
    return new Date(year, month, day, hour, minute, second);
}
<think>我们判断一个变量是否为数字类型,在JavaScript中有多种方法。在uni-app的Vue2环境中,我们同样可以使用这些方法,因为Vue2基于JavaScript。常用的方法有:1.typeof操作符:对于数字类型,typeof返回"number"。但是要注意,NaN也是数字类型,typeof NaN返回"number"。2.isNaN()函数:用于检查一个值是否为NaN。但注意,isNaN会尝试将参数转换为数字,所以对于非数字字符串也会返回true(因为转换后是NaN)。3.结合使用:我们可以先使用typeof判断是否为"number",然后再使用isNaN()判断是否为有效数字(如果需要排除NaN的话)。4.使用Number.isFinite()方法:该方法检测一个数值是否为有限的(finite),即不是NaN、Infinity或-Infinity。它不会进行类型转换,只有真正的数字(且有限)才返回true。5.使用Number.isInteger():如果只需要判断整数,可以使用这个方法。根据需求,我们可能想要判断的是:-任何数字(包括NaN、Infinity)?-有效的有限数字(排除NaNInfinity)?-整数?在uni-app中,我们通常需要判断用户输入的数值,所以大多数情况下我们想要判断的是有效的有限数字(即实数)。因此,推荐一个函数来判断一个变量是否为有效的有限数字(即实数):```javascriptfunction isNumber(value){//先判断类型是否为number,然后判断是否为有限数return typeofvalue ==='number' &&isFinite(value); }```注意:这里使用了`isFinite`函数,它会排除NaN、Infinity-Infinity。但是注意,`isFinite`也会将字符串数字转换为数字,例如`isFinite('123')`返回true。所以为了严格判断数字类型,我们先使用typeof确保类型是number。因此,上面的函数会返回:-对于123,3.14等返回true-对于NaN,Infinity,'123'(字符串)返回false如果希望字符串数字也被视为数字(比如在表单输入中,输入的是字符串,但内容为数字),那么我们可以调整:```javascriptfunction isNumeric(value){//使用parseFloat尝试转换,然后判断是否为有限数return !isNaN(parseFloat(value)) &&isFinite(value); }```但是注意:这个函数会认为字符串'123'也是数字,而有时我们可能只需要原始数字类型。所以根据需求选择。在Vue2的uni-app中,我们可以在methods中定义这样的函数,然后在需要的地方使用。示例: ```vue<template><view><inputtype="text" v-model="inputValue" /><button @click="checkType">检查类型</button></view> </template><script>export default{data(){return {inputValue:''}},methods:{isNumber(value){return typeofvalue ==='number' &&isFinite(value);},checkType() {letvalue= this.inputValue;//如果输入的是字符串数字,我们可能需要转换为数字再判断,或者直接用上面的isNumeric//这里我们假设需要判断的是原始数字类型,所以直接判断输入值(字符串)肯定不是数字类型//如果我们希望输入的数字字符串也被认为是数字,那么我们可以使用isNumeric函数if (this.isNumber(value)) {uni.showToast({ title: '是数字',icon:'none' });}else {//尝试判断是否为数字字符串if(this.isNumeric(value)) {uni.showToast({ title: '是数字字符串,可以转换为数字:' +parseFloat(value),icon:'none' });}else {uni.showToast({ title: '不是数字', icon: 'none'});}}},isNumeric(value) {return!isNaN(parseFloat(value))&& isFinite(value);}}} </script>```总结:-严格判断数字类型(原始类型,且有效数字):使用`typeof value=== 'number'&& isFinite(value)`-判断一个值是否可以转换为有效的数字(包括字符串数字):使用`!isNaN(parseFloat(value)) &&isFinite(value)`根据实际需求选择。引用说明:-关于JavaScript中数字类型的判断,属于JavaScript基础知识,没有引用特定文献。</think>在 uni-app Vue2 中判断变量是否为数字类型,推荐使用以下方法: ### 1. 使用 `typeof` 操作符(最常用) ```javascript if (typeof yourVariable === 'number') { // 是数字类型 console.log('是数字类型'); } else { // 不是数字类型 console.log('不是数字类型'); } ``` **特点**: - 直接检测原始类型 - 能识别整数、浮点数、NaN Infinity - 对于 `NaN` 也会返回 `'number'`(需额外处理)[^1] ### 2. 严格数字检测(排除 NaN/Infinity) ```javascript function isStrictNumber(value) { return typeof value === 'number' && isFinite(value); } // 使用示例 if (isStrictNumber(yourVariable)) { // 是有效有限数字 } ``` **特点**: - 排除 NaN Infinity - 只接受真正的有效数字 ### 3. 使用 `isNaN()` 辅助检测 ```javascript // 检测是否为数字(包括NaN) if (!isNaN(yourVariable) && typeof yourVariable === 'number') { // 是数字且不是NaN } ``` ### 4. 处理字符串数字(需要转换时) ```javascript // 如果变量可能是字符串形式的数字 const numValue = Number(yourVariable); if (!isNaN(numValue) && typeof numValue === 'number') { // 是可转换为数字的值 } ``` ### 实际应用示例 ```vue <script> export default { data() { return { inputValue: '', result: '' } }, methods: { checkIsNumber() { const value = this.inputValue; if (typeof value === 'number' && isFinite(value)) { this.result = `✅ ${value} 是有效数字`; } else { this.result = `❌ ${value} 不是有效数字`; } } } } </script> <template> <input v-model="inputValue" placeholder="输入值" /> <button @click="checkIsNumber">检测</button> <p>{{ result }}</p> </template> ``` ### 注意事项 1. **NaN 的特殊性**:`typeof NaN === 'number'` 返回 `true`,需配合 `isNaN()` 或 `isFinite()` 使用 2. **字符串数字**:`typeof "123"` 返回 `'string'`,需要先转换 3. **空值null**:`typeof null` 返回 `'object'`,需单独处理 4. **ES6 优化**:可用 `Number.isFinite()` 避免类型转换 ```javascript Number.isFinite(123) // true Number.isFinite('123') // false ``` ### 类型检测对照表 | 值 | typeof | isFinite | Number.isFinite | |-------------|----------|----------|----------------| | 42 | 'number' | true | true | | 3.14 | 'number' | true | true | | NaN | 'number' | false | false | | Infinity | 'number' | false | false | | '42' | 'string' | false | false | | true | 'boolean'| false | false | | null | 'object' | false | false | | undefined | 'undefined'| false | false | 根据实际需求选择合适的方法,推荐使用 `typeof + isFinite` 组合作为通用解决方案[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值