JS基本类型

    更新时间: 2022-08-04 19:53:48
    点击量: 849
    标签: 前端js

    简介:JS基本类型、类型检测介绍

    文章均为个人原创, 搬运请附上原文地址感谢, 原文来自MasterYi博客

    原始数据类型

    string

    • 字符串类型 是由 Unicode 字符、数字、标点符号等组成的序列

    number

    • Number不区别整数型和浮点型,而是双精度浮点数,它可以表示的最大安全范围是正负9007199254740991,也就是2的53次方减一,这种类型既可以表示整数,也可以表示小数
    • 超过安全范围会产生精度丢失
        let number;
        number = '9007199254740992';
        console.log(`string: ` + number, `转化为 number: ` + Number(number))  // string: 9007199254740992 转化为 number: 9007199254740992
    
        number = '9007199254740995';
        console.log(`string: ` + number, `转化为 number: ` + Number(number))  // string: 9007199254740995 转化为 number: 9007199254740996
    
        number = '6145390195186705543';
        console.log(`string: ` + number, `转化为 number: ` + Number(number))   // string: 6145390195186705543 转化为 number: 6145390195186705000

    bigInt

    • BigInt是JavaScript中的一个新的原始类型,可以用任意精度表示整数。使用BigInt,即使超出JavaScript Number 的安全整数限制,也可以安全地存储和操作大整数
    • 和number一样能做正常计算,为了处理大整数精度缺失而产生的
        let bigInt;
        // 整数后面+n可以创建bigInt
        bigInt = 9007199254740995n;
        console.log(bigInt)  // 9007199254740995n
    
        // 支持整数或string 转换bigInt
        bigInt = BigInt('6145390195186705543');
        console.log(bigInt)  // 6145390195186705408n
        
        +bigInt; // 这种运算方式会报错

    boolean 布尔类型

    null

    • 因为是一个空对象指针,在使用typeof 进行检测时会检测为object
    • 指定变量为null, 可用于销毁变量
    • null 属于js 的关键词

    undefind

    • js 运行时创建的全局变量
    • 表示 “缺少值”,就是此处应该有一个值,但是还没有定义

    object

    • 复合值
    • 对象是属性的无序集合,由键名和属性值组成

    symbol

    • ES6 引入的新的原始数据类型Symbol,表示独一无二的值
    • 对象定义一些非私有的、但又希望只用于内部的方法
    • 这对于一个对象由多个模块构成的情况非常有用,能防止某一个键被不小心改写或覆盖
    • 消除魔术字符串
    
    // 我们在创建一个symbol的值时, 中间的字符串并不是symbol的值, 只是代表对这个symbol的描述
    let Symbol_a = Symbol('description');
    let Symbol_b = Symbol('description');
    console.log(Symbol_a === Symbol_b) // false
    
    // 可以通过.description 取出描述值
    console.log(Symbol_a.description) // description
    
    // 可以转为 bool 或 string, 但是不能与其他类型的值进行运算
    console.log(Symbol_a.toString()) // Symbol(description)
    console.log(Boolean(Symbol_a)) // true
    
    
    Symbol_a + 'a' // 这种运算符写法会报错
    
    
    
    // 用途一:对象定义一些非私有的、但又希望只用于内部的方法 
    let obj = {
        'a': '小张',
        [Symbol_a]: '小红',
        [Symbol_b]: '小明',
    }
    // 这个遍历只会打印 a  因为symbol不会被遍历 但可以正常访问
    for (let i in obj){
        console.log(i)
    }
    console.log(obj[Symbol_a]) // 小红
    
    
    
    // 用途二:防止某一个键被不小心改写或覆盖 ( 当然这里只是简单的示例, 会显得有点奇葩, 但是这种一般用于框架层 和 消息订阅的通道名 就会使得更加的严谨和唯一 )
    obj[Symbol_a] = '小黑' // 拿到唯一的symbol的实例才能改写相应值
    obj['a'] = '小绿' // 原写法就没有唯一性, 可随意覆盖
    
    
    
    // 用途三: 消除魔术字符串 ( 写过ts应该会觉得有点enum的味道, 但symbol更具有严谨性(唯一代表无法直接使用对应值做判断,强制性的采用枚举), 有一些写的enum不严谨的新手会直接采用枚举对应的值做判断 )
    const language = {
        chinese: Symbol(),
        english: Symbol(),
    }
    function getLanguage(type) {
        switch (type) {
            case type.chinese:
                return '中文'
            case type.english:
                return '英语'
        }
    }
    getLanguage(language.chinese)  //中文

    类型检测

    typeof

    • typeof 操作符返回一个字符串
    • 只能准确判断基本数据类型和函数
    • 有局限性, 特殊对象类型null, [], new Map()...都会被判断为object
        console.log(typeof true); // boolean
        console.log(typeof undefined); // undefined
        console.log(typeof 'string') // string
        console.log(typeof 1) // number
        console.log(typeof 1n) // bigint
        console.log(typeof Symbol('')) // symbol
        console.log(typeof function (){}) // function
        console.log(typeof new function (){}) // object
        console.log(typeof null); // object
        console.log(typeof {}) // object
        console.log(typeof []) // object
        console.log(typeof new Map()) // object

    instanceof

    • 用于判断某个变量是否是某个对象的实例 返回 布尔值
    • 包含一些继承, 深层原型链的关系都能判断出来
    • 原理是顺着原型链去找,直到找到相同的原型对象
        let test = function (){};
        console.log(test instanceof Function); // true
        console.log(new test() instanceof Function); // false  因为已经被实例化
        console.log(new test() instanceof Object); // true
        console.log(new test() instanceof test); // true
    
        console.log(new Map() instanceof Map); // true
        console.log(new Map() instanceof Object); // true
        console.log(new Map() instanceof Function); //  false  因为已经被实例化
        console.log(Map instanceof Function); //  true