最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • JavaScript 、TypeScript 中的 Boolean

    正文概述 掘金(泡泡机不冒泡了)   2021-01-26   438

    boolean 是 JavaScript 中一种有趣的原始数据类型。在TypeScript中,非严格模式下("strictNullChecks": false),它总共允许4个值 true 、false、undefined、null

    JavaScript 中的 Boolean

    boolean 可以取值 truefalse 。 其他类型的值可以是真值或假值,例如 undefinednull

    let b = true
    if(b) console.log('logged')
    
    b = false
    if(b) console.log('not logged')
    
    b = undefined
    if(b) console.log('not logged')
    
    b = null
    if(b) console.log('not logged')
    

    要获取任何值对应的布尔值,可以使用Boolean函数

    Boolean(false) // false
    Boolean(true) // true
    Boolean("false") // true ❗️
    Boolean("Hey folks") // true
    Boolean({}) // true
    Boolean([]) // true
    Boolean(123.4) // true
    Boolean(Symbol()) // true
    Boolean(function() {}) // true
    Boolean(undefined) // false
    Boolean(null) // false
    Boolean(NaN) // false
    Boolean(0) // false
    Boolean("") // false
    

    Boolean 函数很适合用来过滤集合中的空值。

    const collection = [
      { name: 'A'},
      undefined,
      "false",
      false,
      23,
      null
    ]
    
    collection.filter(Boolean) //[{ name: 'A'}, "false", 23]
    

    Number 转换函数一起使用,将所有值转换为对应的数字或NaN,这是一种快速获取实际值的非常酷的方法:

    const x = ["1.23", 2137123, "wut", false, "lol", undefined, null]
      .map(Number)
      .filter(Boolean) // [1.23, 2137123] ?
    

    Boolean 有两种使用方式:

    Boolean(value);		//作为转换函数,上面讲解的使用方式
    new Boolean(value);	//作为构造函数
    

    Boolean 作为构造函数使用,具有与作为转换函数相同的转换规则。 但是使用 new Boolean(...),将创建一个包装对象,使值比较相等,而引用比较却不相等:

    const value = Boolean("test") // true
    const reference = new Boolean("test") // [Boolean: true]
    
    value == reference // true
    value === reference // false
    

    可以通过 .valueOf() 获得实际 boolean 值:

    value === reference.valueOf() // true
    

    TypeScript 中的 Boolean

    TypeScript 中的 boolean 是原始类型。 确保使用小写版本,并且不要引用 Boolean 的对象实例

    const boolLiteral: boolean = false // ?
    const boolObject: Boolean = false // ?
    
    //生成的js代码
    const boolLiteral = false; 
    const boolObject = false;
    

    虽然 ts 可以正常编译,且生成的 js 也一样,但这是一种不好的做法,会给使用者一种误导,他们会去用包装类型进行赋值,而我们实际上很少需要引用包装类型。就像使用 new String(...) 不是一个很好的实践一样。

    你可以在TypeScript中为 boolean 类型变量分配 true,false,undefinednull (因为 undefined、null 是所有类型的子类型),而无需严格的null检查。

    const boolTrue: boolean = true // ?
    const boolFalse: boolean = false // ?
    const boolUndefined: boolean = undefined // ?
    const boolNull: boolean = null // ?
    

    因此,布尔值是唯一可以通过联合类型完全表示的值

    type MyBoolean = true | false | null | undefined // 等同 boolean
    
    const mybool: MyBoolean = true
    const yourbool: boolean = false
    

    当我们启用 strictNullChecks 编译器标志时,值的集合将减少为truefalse

    const boolTrue: boolean = true // ?
    const boolFalse: boolean = false // ?
    const boolUndefined: boolean = undefined // ?
    const boolNull: boolean = null // ?
    

    因此我们的集合总共减少为两个值。

    type MyStrictBoolean = true | false
    

    这时我们可以使用NonNullable helper类型摆脱null值:

    type NonNullable<T> = T extends null | undefined
      ? never
      : T;
    
    type MyStrictBoolean = NonNullable<MyBoolean> // true | false
    

    boolean 类型结合 ts 的条件类型,可以构建一些有趣的类型。比如你更新、创建 用户共用一个类型,创建时不需要userId, 但更新时userId必传。

    type PersonDto<Person, IsUpdateOrCreate> = 
        IsUpdateOrCreate extends true 
        ? Person & { userId: string }
        : Person & { userId?: string }
    

    依赖于 IsUpdateOrCreate 的值,userId 被设置必填或选填。

    在使用时,它可能声明一个这样的函数

    declare function userUpdateOrCreate<P, A extends boolean = false>
      (personDto: PersonDto<P, A>, isUpdateOrCreate?: A): void
    

    注意,我甚至为a设置了一个默认值,以确保为 PersonDto 提供A的类型信息,这取决于是否设置 isUpdateOrCreate

    实际使用:

    userUpdateOrCreate({}) 
    userUpdateOrCreate({ name: '默认值' }) 
    userUpdateOrCreate({ name: '张三' }, false) 
    userUpdateOrCreate({ name: '李四' }, true) //  userId 缺失
    userUpdateOrCreate({ name: '王二麻子', userId: 'asdf' }, true) 
    

    示例地址 TypeScript Playground


    起源地下载网 » JavaScript 、TypeScript 中的 Boolean

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元