是否有标准函数检查JavaScript中的null,undefined或空白变量?

2020/09/14 23:01 · javascript ·  · 0评论

是否有一个通用的JavaScript函数检查一个变量的值,并确保它不undefined还是null我有以下代码,但不确定是否能涵盖所有情况:

function isEmpty(val){
    return (val === undefined || val == null || val.length <= 0) ? true : false;
}

您可以仅检查变量是否具有truthy值。那意味着

if( value ) {
}

将计算为true,如果value不是

  • 空值
  • 未定义
  • N
  • 空字符串(“”)
  • 0

上面的列表表示falsyECMA- / Javascript中的所有可能值。在本规范找到它ToBoolean

此外,如果您不知道变量是否存在(也就是说,是否已声明),则应与typeof运算符联系。例如

if( typeof foo !== 'undefined' ) {
    // foo could get resolved and it's defined
}

如果可以确定至少声明了一个变量,则应直接检查它是否具有truthy如上所示值。

进一步阅读:http : //typeofnan.blogspot.com/2011/01/typeof-is-fast.html

检查value是undefined还是null的详细方法是:

return value === undefined || value === null;

您还可以使用==运算符,但这希望人们知道所有规则

return value == null; // also returns true if value is undefined
function isEmpty(value){
  return (value == null || value.length === 0);
}

这将返回true

undefined  // Because undefined == null

null

[]

""

和零参数函数,因为函数length是它所使用的已声明参数的数量。

要禁止使用后一种类别,您可能只需要检查空白字符串即可

function isEmpty(value){
  return (value == null || value === '');
}

这是最安全的支票,我还没有看到它像这样贴出来:

if (typeof value !== 'undefined' && value) {
    //deal with value'
};

它将涵盖从未定义过价值的情况,以及以下任何一种情况:

  • 空值
  • 未定义(未定义的值与从未定义的参数不同)
  • 0
  • “”(空字符串)
  • N

编辑:更改为严格相等(!==),因为目前为止这是标准;)

您可能会发现以下功能有用:

function typeOf(obj) {
  return {}.toString.call(obj).split(' ')[1].slice(0, -1).toLowerCase();
}

或在ES7中(如果有进一步改进,请评论)

function typeOf(obj) {
  const { toString } = Object.prototype;
  const stringified = obj::toString();
  const type = stringified.split(' ')[1].slice(0, -1);

  return type.toLowerCase();
}

结果:

typeOf(); //undefined
typeOf(null); //null
typeOf(NaN); //number
typeOf(5); //number
typeOf({}); //object
typeOf([]); //array
typeOf(''); //string
typeOf(function () {}); //function
typeOf(/a/) //regexp
typeOf(new Date()) //date
typeOf(new WeakMap()) //weakmap
typeOf(new Map()) //map

“请注意,绑定运算符(::)根本不是ES2016(ES7)的一部分,也不是ECMAScript标准的任何更高版本。它目前是该语言引入的阶段0(strawman)提议。” –西蒙·凯贝格(Simon Kjellberg)。作者希望对这个美丽的接受皇家提升的提议表示支持。

评分最高的第一个答案是错误的。如果值未定义,它将在现代浏览器中引发异常。您必须使用:

if (typeof(value) !== "undefined" && value)

要么

if (typeof value  !== "undefined" && value)

此条件检查

if (!!foo) {
    //foo is defined
}

是你所需要的全部。

检查空字符串(“”),null,undefined,false以及数字0和NaN。说,如果字符串为空,var name = ""console.log(!name)返回true

function isEmpty(val){
  return !val;
}

如果val空,null,未定义,false,数字0或NaN,则此函数将返回true

要么

根据您的问题域,您可以仅使用like !val!!val

我非常喜欢的解决方案:

让我们定义一个空白变量是nullundefined,或者如果它的长度是零,或者是一个对象,则没有键:

function isEmpty (value) {
  return (
    // null or undefined
    (value == null) ||

    // has length and it's zero
    (value.hasOwnProperty('length') && value.length === 0) ||

    // is an Object and has no keys
    (value.constructor === Object && Object.keys(value).length === 0)
  )
}

返回值:

  • 真: undefinednull""[]{}
  • 假: truefalse10-1"foo"[1, 2, 3]{ foo: 1 }

你有点过分了。要检查变量是否没有赋值,只需要检查undefined和null。

function isEmpty(value){
    return (typeof value === "undefined" || value === null);
}

假设0""和对象(甚至是空对象和数组)都是有效的“值”。

如果您更喜欢纯JavaScript,请尝试以下操作:

  /**
   * Checks if `value` is empty. Arrays, strings, or `arguments` objects with a
   * length of `0` and objects with no own enumerable properties are considered
   * "empty".
   *
   * @static
   * @memberOf _
   * @category Objects
   * @param {Array|Object|string} value The value to inspect.
   * @returns {boolean} Returns `true` if the `value` is empty, else `false`.
   * @example
   *
   * _.isEmpty([1, 2, 3]);
   * // => false
   *
   * _.isEmpty([]);
   * // => true
   *
   * _.isEmpty({});
   * // => true
   *
   * _.isEmpty('');
   * // => true
   */

function isEmpty(value) {
    if (!value) {
      return true;
    }
    if (isArray(value) || isString(value)) {
      return !value.length;
    }
    for (var key in value) {
      if (hasOwnProperty.call(value, key)) {
        return false;
      }
    }
    return true;
  }

否则,如果您已经在使用下划线或破折号,请尝试:

_.isEmpty(value)

这是我的-如果value为null,undefined等或空白(即仅包含空格),则返回true:

function stringIsEmpty(value) {

    return value ? value.trim().length == 0 : true;

}
return val || 'Handle empty variable'

是在很多地方处理它的一种非常不错的方法,也可以用来分配变量

const res = val || 'default value'

看看新的ECMAScript Nullish合并运算符

您可以考虑使用此功能- ??运算符-作为在处理null时“退回”默认值的方法undefined

let x = foo ?? bar();

同样,以上代码等效于以下代码。

let x = (foo !== null && foo !== undefined) ? foo : bar();

如果尚未声明该变量,则将无法使用函数测试未定义变量,因为会出现错误。

if (foo) {}
function (bar) {}(foo)

如果尚未声明foo,则两者都会产生错误。

如果要测试是否已声明变量,可以使用

typeof foo != "undefined"

如果要测试是否已声明foo并且它具有一个值,则可以使用

if (typeof foo != "undefined" && foo) {
    //code here
}

检查默认值

function typeOfVar (obj) {
      return {}.toString.call(obj).split(' ')[1].slice(0, -1).toLowerCase();
}
function isVariableHaveDefaltVal(variable) {
    if ( typeof(variable) === 'string' ) {  // number, boolean, string, object 
        console.log(' Any data Between single/double Quotes is treated as String ');        
        return (variable.trim().length === 0) ? true : false;
    }else if ( typeof(variable) === 'boolean' ) {
      console.log('boolean value with default value \'false\'');
        return (variable === false) ? true : false;
    }else if ( typeof(variable) === 'undefined' ) {
        console.log('EX: var a; variable is created, but has the default value of undefined.'); 
        return true;
    }else if ( typeof(variable) === 'number' ) { 
        console.log('number : '+variable);
        return (variable === 0 ) ? true : false;
    }else if ( typeof(variable) === 'object' ) {
   //   -----Object-----
        if (typeOfVar(variable) === 'array' && variable.length === 0) {
            console.log('\t Object Array with length = ' + [].length); // Object.keys(variable)
            return true;
        }else if (typeOfVar(variable) === 'string' && variable.length === 0 ) {
            console.log('\t Object String with length = ' + variable.length);
            return true;
        }else if (typeOfVar(variable) === 'boolean' ) {
            console.log('\t Object Boolean = ' + variable);
            return (variable === false) ? true : false;
        }else if (typeOfVar(variable) === 'number' ) {
            console.log('\t Object Number = ' + variable);
            return (variable === 0 ) ? true : false;
        }else if (typeOfVar(variable) === 'regexp' && variable.source.trim().length === 0 ) {
       console.log('\t Object Regular Expression : ');
        return true;
        }else if (variable === null) {
       console.log('\t Object null value');
        return true;
        }
    }
    return false;
}
var str = "A Basket For Every Occasion";
str = str.replace(/\s/g, "-");
//The "g" flag in the regex will cause all spaces to get replaced.

检查结果:

isVariableHaveDefaltVal(' '); // string          
isVariableHaveDefaltVal(false); // boolean       
var a;           
isVariableHaveDefaltVal(a);               
isVariableHaveDefaltVal(0); // number             
isVariableHaveDefaltVal(parseInt('')); // NAN isNAN(' '); - true         
isVariableHaveDefaltVal(null);              
isVariableHaveDefaltVal([]);               
isVariableHaveDefaltVal(/ /);              
isVariableHaveDefaltVal(new Object(''));               
isVariableHaveDefaltVal(new Object(false));            
isVariableHaveDefaltVal(new Object(0)); 
typeOfVar( function() {} );

我使用@Vix function()检查哪种类型的对象。

使用«

var prototypes_or_Literals = function (obj) {
    switch (typeof(obj)) {
        // object prototypes
        case 'object':
            if (obj instanceof Array)
                return '[object Array]';
            else if (obj instanceof Date)
                return '[object Date]';
            else if (obj instanceof RegExp)
                return '[object regexp]';
            else if (obj instanceof String)
                return '[object String]';
            else if (obj instanceof Number)
                return '[object Number]';

            else
                return 'object';
        // object literals
        default:
            return typeof(obj);
    }   
};
output test «
prototypes_or_Literals( '' ) // "string"
prototypes_or_Literals( new String('') ) // "[object String]"
Object.prototype.toString.call("foo bar") //"[object String]"        
function isEmpty(obj) {
    if (typeof obj == 'number') return false;
    else if (typeof obj == 'string') return obj.length == 0;
    else if (Array.isArray(obj)) return obj.length == 0;
    else if (typeof obj == 'object') return obj == null || Object.keys(obj).length == 0;
    else if (typeof obj == 'boolean') return false;
    else return !obj;
}

在带有修剪以处理空白字符串的ES6中:

const isEmpty = value => {
    if (typeof value === 'number') return false
    else if (typeof value === 'string') return value.trim().length === 0
    else if (Array.isArray(value)) return value.length === 0
    else if (typeof value === 'object') return value == null || Object.keys(value).length === 0
    else if (typeof value === 'boolean') return false
    else return !value
}

这可能是有用的。

数组中的所有值表示您想要的内容(空,未定义或其他内容),然后在其中搜索所需内容。

var variablesWhatILookFor = [null, undefined, ''];
variablesWhatILookFor.indexOf(document.DocumentNumberLabel) > -1

如果您正在使用TypeScript并且不想考虑“这些值false”,那么这是适合您的解决方案:

第一: import { isNullOrUndefined } from 'util';

然后: isNullOrUndefined(this.yourVariableName)

请注意:如下所述,此方法已被弃用,请value === undefined || value === null改用。参考

空虚

我不建议尝试定义或使用一个函数来计算整个世界中是否有任何空值。“空”到底意味着什么?如果有let human = { name: 'bob', stomach: 'empty' },应该isEmpty(human)退货true吗?如果有let reg = new RegExp('');,应该isEmpty(reg)退货true吗?怎么样isEmpty([ null, null, null, null ])-该列表仅包含空白,列表本身是否为空?我想在这里提出一些有关javascript中“空缺”(故意模糊的单词,以避免预先存在的关联)的注意事项-我想指出,javascript值中的“空缺”永远都不应加以处理。


真实/虚假

为了决定如何确定值的“空缺”,我们需要适应javascript对值是“真实”还是“虚假”的内在固有感觉。自然,null并且undefined都是“虚假的”。较不自然地,该数字0(除之外没有其他数字NaN)也是“虚假的”。自然最少:''是虚假的,但[]and {}(and new Set()和and new Map())是真实的-尽管它们看上去都一样虚空!


空值与未定义

还有一些关于nullvs的讨论undefined-为了在程序中表达虚无,我们真的需要两者吗?我个人避免在我的代码中按顺序出现字母u,n,d,e,f,i,n,e,d。我总是null用来表示“空缺”。同样,尽管如此,我们需要适应javascript固有的方式nullundefined区别:

  • 尝试访问不存在的属性会给 undefined
  • 调用函数时省略参数会导致该参数接收undefined
let f = a => a;
console.log(f('hi'));
console.log(f());
  • 具有默认值的参数仅在给定时才接收默认值undefined,而不是null
let f = (v='hello') => v;
console.log(f(null));
console.log(f(undefined));

非通用性

我认为,空虚绝不应该以一般方式处理。相反,在确定数据是否为虚空状态之前,我们应该始终严格要求获取有关数据的更多信息-我主要是通过检查要处理的数据类型来做到这一点的:

let isType = (value, Cls) => {
  try {
    return Object.getPrototypeOf(value).constructor === Cls;
  } catch(err) {
    return false;
  }
};

请注意,此函数会忽略多态性-它value应该是的直接实例Cls,而不是的子类的实例Cls我避免这样instanceof做有两个主要原因:

  • ([] instanceof Object) === true (“数组是对象”)
  • ('' instanceof String) === false (“字符串不是字符串”)

请注意,这Object.getPrototypeOf是用于避免类似情况的情况。let v = { constructor: String };isType函数对于isType(v, String)(false)和isType(v, Object)(true)仍正确返回

总体而言,我建议将此isType功能与以下提示一起使用:

  • 最小化未知类型的代码处理值的数量。例如,对于let v = JSON.parse(someRawValue);,我们的v变量现在为未知类型。我们应该尽早限制我们的可能性。做到这一点的最佳方法可能是要求一个特定的类型:例如if (!isType(v, Array)) throw new Error('Expected Array');-这是一种非常快捷,表达力强的方法,可以消除的通用性v,并确保它始终是Array但是,有时我们需要允许v为多种类型。在这种情况下,我们应该尽早创建v不再通用的代码块
if (isType(v, String)) {
  /* v isn't generic in this block - It's a String! */
} else if (isType(v, Number)) {
  /* v isn't generic in this block - It's a Number! */
} else if (isType(v, Array)) {
  /* v isn't generic in this block - it's an Array! */
} else {
  throw new Error('Expected String, Number, or Array');
}
  • 始终使用“白名单”进行验证。如果您需要一个值,例如字符串,数字或数组,请检查这3种“白色”可能性,如果不满足3种,则抛出错误。我们应该能够看到检查“黑色”可能性不是很有用:说我们写了if (v === null) throw new Error('Null value rejected');-这对于确保null值不会通过实现很有用,但是如果值确实通过了,我们仍然很难知道关于它的任何事情。v其通过这个空检查仍然是非常通用的-它的任何东西,但null黑名单很难消除通用性。
  • 除非值是null否则不要考虑“空值”。取而代之的是考虑“一个空的X”。本质上,永远不要考虑做任何事情if (isEmpty(val)) { /* ... */ }-不管该isEmpty函数如何实现(我不想知道...),它都没有意义!而且太普通了!空洞性仅应使用val的类型知识来计算连通性检查应如下所示:

    • “一个字符串,没有字符”:
      if (isType(val, String) && val.length === 0) ...
    • “一个带有0个道具的物体”: if (isType(val, Object) && Object.entries(val).length === 0) ...
    • “一个等于或小于零的数字”: if (isType(val, Number) && val <= 0) ...
    • “一个数组,没有项目”: if (isType(val, Array) && val.length === 0) ...

    • 唯一的例外是when null用于表示某些功能。在这种情况下,有意义的是说:“空值”:if (val === null) ...

尝试不同的逻辑您可以使用下面的代码检查所有四(4)条条件以进行验证,例如not null,not blank,not undefined和not zero,仅在javascript和jquery中使用此代码(!(!(variable)))。

function myFunction() {
    var data;  //The Values can be like as null, blank, undefined, zero you can test

    if(!(!(data)))
    {
        alert("data "+data);
    } 
    else 
    {
        alert("data is "+data);
    }
}
function isEmpty(val){
    return !val;
}

但是此解决方案是过度设计的,如果您以后不想为业务模型需求修改功能,那么直接在代码中使用它更干净:

if(!val)...
var myNewValue = myObject && myObject.child && myObject.child.myValue;

这将永远不会引发错误。如果myObjectchildmyValue为null,则myNewValue将为null。没有错误将被抛出

对于来这里提出类似问题的每个人来说,以下工作非常好,最近几年我在图书馆中找到了它:

(function(g3, $, window, document, undefined){
   g3.utils = g3.utils || {};
/********************************Function type()********************************
* Returns a lowercase string representation of an object's constructor.
* @module {g3.utils}
* @function {g3.utils.type}
* @public
* @param {Type} 'obj' is any type native, host or custom.
* @return {String} Returns a lowercase string representing the object's 
* constructor which is different from word 'object' if they are not custom.
* @reference http://perfectionkills.com/instanceof-considered-harmful-or-how-to-write-a-robust-isarray/
* http://stackoverflow.com/questions/3215046/differentiating-between-arrays-and-hashes-in-javascript
* http://javascript.info/tutorial/type-detection
*******************************************************************************/
g3.utils.type = function (obj){
   if(obj === null)
      return 'null';
   else if(typeof obj === 'undefined')
      return 'undefined';
   return Object.prototype.toString.call(obj).match(/^\[object\s(.*)\]$/)[1].toLowerCase();
};
}(window.g3 = window.g3 || {}, jQuery, window, document));

根据jAndy的回答,如果您希望避免以下情况中的任何一项成为真,则

  • 空值
  • 未定义
  • N
  • 空字符串(“”)
  • 0

一种可能避免获得真实值的可能解决方案如下:

function isUsable(valueToCheck) {
    if (valueToCheck === 0     || // Avoid returning false if the value is 0.
        valueToCheck === ''    || // Avoid returning false if the value is an empty string.
        valueToCheck === false || // Avoid returning false if the value is false.
        valueToCheck)             // Returns true if it isn't null, undefined, or NaN.
    {
        return true;
    } else {
        return false;
    }
}

它的用法如下:

if (isUsable(x)) {
    // It is usable!
}
// Make sure to avoid placing the logical NOT operator before the parameter (isUsable(!x)) and instead, use it before the function, to check the returned value.
if (!isUsable(x)) {
    // It is NOT usable!
}

除了这些方案之外,如果对象数组为空,则可能要返回false

您可以这样处理:

function isEmptyObject(valueToCheck) {
    if(typeof valueToCheck === 'object' && !Object.keys(valueToCheck).length){
        // Object is empty!
        return true;
    } else {
        // Object is not empty!
        return false;
    }
}

function isEmptyArray(valueToCheck) {
    if(Array.isArray(valueToCheck) && !valueToCheck.length) {
        // Array is empty!
        return true;
    } else {
        // Array is not empty!
        return false;
    }
}

如果要检查所有空格字符串(“”),可以执行以下操作:

function isAllWhitespace(){
    if (valueToCheck.match(/^ *$/) !== null) {
        // Is all whitespaces!
        return true;
    } else {
        // Is not all whitespaces!
        return false;
    }
}

注意:hasOwnProperty如果变量被声明为空字符串,则返回空字符串,0,false,NaN,null和undefined的true,因此可能不是最好的用法。可以修改该函数以使用它来表明它已被声明,但是不可用。

GitHub上的代码

const isEmpty = value => (
  (!value && value !== 0 && value !== false)
  || (Array.isArray(value) && value.length === 0)
  || (isObject(value) && Object.keys(value).length === 0)
  || (typeof value.size === 'number' && value.size === 0)

  // `WeekMap.length` is supposed to exist!?
  || (typeof value.length === 'number'
      && typeof value !== 'function' && value.length === 0)
);

// Source: https://levelup.gitconnected.com/javascript-check-if-a-variable-is-an-object-and-nothing-else-not-an-array-a-set-etc-a3987ea08fd7
const isObject = value =>
  Object.prototype.toString.call(value) === '[object Object]';

穷人测试😁

const test = () => {
  const run = (label, values, expected) => {
    const length = values.length;
    console.group(`${label} (${length} tests)`);
    values.map((v, i) => {
      console.assert(isEmpty(v) === expected, `${i}: ${v}`);
    });
    console.groupEnd();
  };

  const empty = [
    null, undefined, NaN, '', {}, [],
    new Set(), new Set([]), new Map(), new Map([]),
  ];
  const notEmpty = [
    ' ', 'a', 0, 1, -1, false, true, {a: 1}, [0],
    new Set([0]), new Map([['a', 1]]),
    new WeakMap().set({}, 1),
    new Date(), /a/, new RegExp(), () => {},
  ];
  const shouldBeEmpty = [
    {undefined: undefined}, new Map([[]]),
  ];

  run('EMPTY', empty, true);
  run('NOT EMPTY', notEmpty, false);
  run('SHOULD BE EMPTY', shouldBeEmpty, true);
};

检测结果:

EMPTY (10 tests)
NOT EMPTY (16 tests)
SHOULD BE EMPTY (2 tests)
  Assertion failed: 0: [object Object]
  Assertion failed: 1: [object Map]

可能最短的答案是

val==null || val==''

如果将rigth面更改为val===''空数组,则将返回false。证明

有关的更多详细信息==在此处获取

在此处输入图片说明

奖金:为什么=====

在此处输入图片说明

要编写清晰易懂的代码,请使用接受值的显式列表

val===undefined || val===null || val===''|| (Array.isArray(val) && val.length===0)

这将检查不确定嵌套的变量是否未定义

function Undef(str) 
{
  var ary = str.split('.');
  var w = window;
  for (i in ary) {
    try      { if (typeof(w = w[ary[i]]) === "undefined") return true; }
    catch(e) { return true; }
  }
  return false;
}

if (!Undef("google.translate.TranslateElement")) {

上面检查了Google翻译功能TranslateElement是否存在。这等效于:

if (!(typeof google === "undefined" 
 || typeof google.translate === "undefined" 
 || typeof google.translate.TranslateElement === "undefined")) {

当引用或函数可能未定义或为null时,可选的链接运算符提供一种简化通过连接的对象访问值的方法。

let customer = {
  name: "Carl",
  details: {
    age: 82,
    location: "Paradise Falls" // detailed address is unknown
  }
};
let customerCity = customer.details?.address?.city;

在未找到可选值之后,可以使用空值合并运算符来建立默认值:

let customer = {
  name: "Carl",
  details: { age: 82 }
};
const customerCity = customer?.city ?? "Unknown city";
console.log(customerCity); // Unknown city
function notEmpty(value){
  return (typeof value !== 'undefined' && value.trim().length);
}

它还将检查空白('')以及以下内容:

  • null,undefined,NaN,empty,string(“”),0,false
本文地址:http://javascript.askforanswer.com/shifouyoubiaozhunhanshujianchajavascriptzhongdenullundefinedhuokongbaibianliang.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!