javaScript优雅的进行数据判断/类型判断

如何优雅解决Javascript开发过程中数据类型判断或者空值判断

	npm i safe-chain-object

// 1：依次判断每一个层级数据 
// 2：使用 可选链 语法
class Item{
    id:string;
    name:string;
    create_time:Date;
    child?:Item
}
class FetchData{
    code:Number;
    message:String;
    data:Array<Item>
}

function renderItemView(result:FetchData){
    // 为防止参数空值报错,或者人为传值错误
    // 使用之前需要进行类型判断
    if(result && result.code === 200 && result.data && Array.isArray(result.data)){
        
    }
    // 或者采用可选类型
    if(result?.code === 200 && result.data && Array.isArray(result?.data)){
    	
    }
}

这里提供一个可选链的判断并提供便捷函数。

// 解决无限层级数据判断
class Item{
    id:string;
    name:string;
    create_time:Date;
    child?:Item
}
class FetchData{
    code:Number;
    message:String;
    data:Array<Item>
}
import { createSafe as $_} = from  'safe-object';

function renderItemView(result:FetchData){
    // 为防止参数空值报错,或者人为传值错误
    const chain = $_(result)
    if(chain.code.isEqual(200) && chain.data.isArray() && chain.data.arrayEvery(Item)){
        // code 为200 并且data 为 Item 数组
    }
}

• 工具链

  instanceof(prototype: Function): boolean;
  isObjectTypeOf(targetType: ObjectEnumType | string): boolean;
  isNull(): boolean;
  isUndefined(): boolean;
  isNumber(): boolean;
  isString(): boolean;
  isBoolean(): boolean;
  isFunction(): boolean;
  isSymbol(): boolean;
  isDate(): boolean;
  isRegExp(): boolean;
  isPromise(): boolean;
  isArray(): boolean;
  isMap(): boolean;
  isSet(): boolean;
  // 字面量 会转为对应的数据对象。1==>Number false==>Boolean ''===>String
  isEqual(target: any): boolean;
  isTruly(): boolean;
  // 判断数据是否全部为true
  /***
  * class Item{}
  * source.arrayEvery((item)=>{
  *  return isItem(item)
  * })
  */
  arrayEvery<T>(compare: (item: T) => boolean): boolean;
  /***
  * class Item{}
  * source.arrayEvery(Item)
  */
  arrayEvery<T>(compare: Function): boolean;
  // 空对象 {}
  // 空集合 (Array|Set|Map).(length|size) === 0
  isEmpty(): boolean;
  

• 功能说明

  • 安全的数据链

    import { createSafe as $_} = from  'safe-object';
    
    const target = $_({code:100,data:{}})
    // 数据链可无限
    target.data.Xpro.Ypro.Zprop.isEqual(200)
    

  • typeof操作符

    import { createSafe as $_} = from  'safe-object';
    
    const target = $_({code:100,data:{ id:10000,items:[] }})
    
    typeof target.data.id === 'function'
    typeof target.data.item === 'function'
    typeof target.data.item.forEach === 'function'
    

  • 解构

    import { createSafe as $_} = from  'safe-object';
    
    const target = $_({code:100,data:{ id:10000,items:[1,2,3] }})
    // 对象解构
    const  { id, items } =  target.data;
    // 数组解构
    const [$1,$2] = target.date.items;
    

  • 函数

    import { createSafe as $_} = from  'safe-object';
    
    const source = {code:100,data:{ id:10000,items:[1,2,3] }}
    const target = $_(source)
    // target.a.b.c.d() 可执行，return NULL;
    // 可行 但不推荐。
    target.data.items.forEach(callback)
    //推荐写法
    if(target.data.items.isArray()){
        source.data.items.forEach
    }
    

  • instanceof类型判断

    import { createSafe as $_} = from  'safe-object';
    
    const target = $_({item:[]})
    target.item instanceof Array // success
    target.item instanceof Number // fail
    target.sa.a.sas.as  instanceof Object 始终成立
    target.sa.a.sas.as  instanceof Function 始终成立
    ==============
    class Item {}
    const target = $_({item:new Item()})
    target.item instanceof Item // true
    
    

  • Object.prototype.toString.call 可正常使用

     /**
    
     ** 可自行实现 Symbol.toStringTag
    
     */
    
     const toTypeString = Function.call.bind(Object.prototype.toString);
    
     const target = createSafe({a:[],b:1})
    
     toTypeString(target) === "[object Object]"
    
     toTypeString(target.a) === "[object Array]"
    
     toTypeString(target.b) === "[object Number]"
    
     toTypeString(target.sasb.sasa.asa.acdd) === "[object Undefined]"