• JS系列:数据类型详细讲解


    ctrl+B加粗
    ### 数据类型:
    - 1.number数字类型
    NaN:not a number 不是一个数 ,但他是数字类型
    isNaN:检测当前值是否不是有效数字,返回true代表不是有效数字,false是有效数字
    ```
    //=>语法: isNaN([value])
    var num =12 ;
    isNaN(num); //=>检测num变量存储的值是否为非有效数字 返回12 false是有效数字
    isNaN('前端') =>true;
    isNaN(true)=>false;
    isNaN(false)=>false;
    isNaN(null)=>false;
    isNaN(underfined)=>true;
    isNaN({age:9})=>true;
    isNaN([12,23])=>true;
    isNaN([12])=>false;
    isNaN(/^$/)=>true;
    isNaN(function(){}) =>true;
    重要知识点:isNaN检测的机制:
    1.首先验证当前的检测的值是否为数字类型,如果不是浏览器会默认转化为数字类型
    把非数字类型的值转化为数字
    - 把其他基本类型转为数字:直接用number方法
    [字符串转数字]
    Number('13') -> 13 13.5
    Number('13px') ->NaN 如果当前字符串中出现任意一个非有效数字字符,结果为NaN
    Number('13.5') - >13.5 可以识别小数点
    [布尔转数字]
    Number('13.5.0') ->NaN
    Number(true) -> 1
    Number(false) ->0
    [其他]
    Number(null) ->0
    Number(underfined) ->NaN
    - 把引用类型转化为数字:先调取toString转化为字符串,然后调取Number转化为数字
    [对象]
    [{}].toString() - > '[obiect Object]' ->NaN
    [数组]
    [12,23].toString() -> '12,23' ->NaN
    [12].toString() - > '12' ->12
    [正则]
    /^$/.toString() ->'/^$/' ->NaN
    Number('')->0
    [].toString() ->'' =>isNaN([]):false
    ```
    2.当前检测的值已经是数字类型,是有效数字返回false,不是返回true(数字类型中只有NaN不是有效数字,其余都是有效数字)
    3.parseInt(解析)/parseFloat
    > 等同于Number,将其他类型转化为数字类型
    > Number:出现任意非有效数字字符,结果就是NaN
    > parseInt: 把一个字符的整数解析出来,parseFloat:把一个字符的小数部分都解析出来
    parseInt('13.5px') =>13
    parseFloat('13.5px') =>13.5
    parseInt('13.5px')=>NaN 从字符串最左边字符开始查找有效数字字符,并且转化为数字,一旦遇到分有效数字字符,查找结束
    4.NaN的比较
    ```
    NaN==NaN:false NaN和谁都不相等,包括自己
    ```
    思考:有一个变量num,存储的值不知道,想想检测它是否为一个有效数字,下面的方案是否可以?
    ```
    if(Number(num)==NaN){
    alert('num不是有效数字')
    }
    NaN和谁都不相等,条件永远不成立(number不是有效数字,转化结果却是是NaN,但是NaN!=NaN成立)
    if (isNaN(num)){
    //=>检测是否有效数字,只有这种方案
    alert('num不是有效数字!')
    }
    ```
    ### 布尔类型 true,false
    如何把其他数据类型转化布尔类型
    - Boolean
    - ! 取反(等于取反就是不等于)
    - !! 取反再取反
    ```
    Boolean(1) =>true
    Boolean(0)=>false
    Boolean(-1)=>true
    Boolean(NaN)=>false
    !'前端学习' =>先把其他类型转化布尔,然后取反
    !!null =>false 去两次饭,等价于每月取反,也就剩下转换为布尔
    ```
    规律:**在js中只有“0、NaN,字符串,null,underfined“这五个值转化为布尔类型为false,其余都为true”
    !!null !!underfined !!'' !!NaN !!0 =>false
    !![] !!{} =>true‘*
    ### null &underfined
    >都代表着空或者没有
    >- null:空对象指针
    >- underfined:未定义
    null 一般都是意料之中的没有,人为指定为空
    var num = null ;//=>null手动复制,意味着后面会把 num变量的值进行修改
    ...
    num = 12;
    ...
    underfined代表没有一般不是人为控制,大部分是浏览器自主为空。
    ```
    var num; //=>此时变量的值浏览器给分配的就是 underfined
    ```
    刘天瑞(boy)的女朋友是null,他的男朋友是underfined

    ### object 对象数据类型
    >普通对象
    >- 由大括号包裹起来的
    >- 由0到多组属性名和属性值组成(键值对)
    >描述它的特征或者特点的叫做属性
    **`属性是用来描述当前对象的特征,
    属性名是当前具备这个特征[key],
    属性值是对这个特征的描述[value]`**
    ```
    var obj = {
    name:'张三',
    age:9
    }

    //=>对象的操作,对兼职对的增删改查

    [获取] 对象.属性/对象['属性']
    obj.name
    obj['name'] 一般来说,对象的属性名都是字符串格式的,属性值不固定,任何格式都可以

    [增/改]
    js中的属性名唯一,不允许重复

    var obj1 = { name : 'xxx' }
    var obj2 = { name : 'qqq' }
    obj.name ='袁小清'; //=> 原有对象中存在NAME属性,此处修改属性值
    obj.sex = '男';//=>原有对象中不存在SEX,此处增加了一个属性sex
    obj['age']=28;

    [删除]
    彻底删除: 对象总不存在这个属性了
    delete obj['age'];
    假删除:并没有移除这个属性,只是属性值为空,
    **例子:**
    obj.sex=null;
    var obj = {
    name:'张三',
    age:9
    };
    undefined
    obj.age
    9
    obj['age']
    9
    obj.age=10
    10
    obj['age']
    10
    onj
    ReferenceError: onj is not defined
    debugger eval code:1:1
    obj
    Object { name: "张三", age: 10 }

    增加 obj['sex']='man'
    "man"
    obj
    Object { name: "张三", age: 10, sex: "man" }

    假删除 obj.age=null
    null
    obj
    Object { name: "张三", age: null, sex: "man" }

    真删除delete obj.sex
    true
    获取整个数组 obj
    Object { name: "张三", age: null }
    ---
    在获取属性值的时候,如果当前对象有这个属性名,则可以正常获取到值,那怕是null,但是如果没有这个属性名,则获取的结果是underfined
     
    obj['friends'] => underfined
    ```
    思考题:
    ```
    var obj = {
    name: '张三',
    age:9
    }
    var name='李四';
    obj.name -> '张三' 获取的name值
    obj['name'] -> '张三'获取的name值
    obj[name] -> underfined 此处的name是一个变量,我们获取的属性名不叫name,是name存储的值'珠峰' => obj['zhangsan'] => 没有这个属性,属性值是underfined
    ```
    ---
    'name'与name的区别?
    => 'name' 是一个字符串
    => name 是一个变量不是值,它代表的是本身存储的这个值
     
    * 一个对象中的属性名不仅是字符串格式的,还有可能是数字格式的
    var obj = {
    name: 'zhangsan',
    0:12
    }
    obj[0] / obj['0'] => 12
    obj.0 =>syntaxError :unexport number 指的是语法错误,检查自己的代码语法
    {} = [onject Object]
    如果当我们存储的属性名不是字符串也不是数字的时候,浏览器会把这个值转化为字符串在存储toString

    obj[{}]=300 ; =>先把{}.toString后的结果作为对象的属性名存储起来,obj['object Object']=300

    obj[{}] = >获取的时候,先把对象转化为字符串'[object Object]',然后获取之前存储的300

    ```
    var obj = {
    name: 'zhangsan',
    0:12
    }
    undefined
    obj[{}]=300;
    300
    obj
    {0: 12, name: "zhangsan", [object Object]: 300}
    obj['[object Object]']
    300
    ```
    ---
    数组对象(对象有键值对组成)数组是特殊的对象,对象有键值对组成,数组有键值对组成, 对象包含数组,对象没有的属性数组有,对象有的数组也有,正则也是对象,索引就是既可以作为属性名也可以递增,这就是数组本质。
    var oo = {
    a : 12
    };
    ```
    var ary =[12,23]
    undefined
    ary
    (2) [12, 23]0: 121: 23length: 2__proto__: Array(0)
    ary[0]
    12
    ary['0']
    12
    ary.length
    2
    ary['length']
    2

    ```
    var ary = [12 ,23]; 这组12和23都是属性值,属性名为数字
    =>
    0 :12 1:13 属性名为数字 或者字符串,加单引号为字符串,不加为变量 ,把数字属性名成为当前索引
    获取方式: 单个属性 ary['0'] / ary[0]
    获取长度: ary[length]/ ary['length']
    增加属性:ary[2]=340; =>

    ```
    obj
    (3) [12, 230, 340]
    0: 12
    1: 230
    2: 340
    length: 3
    __proto__: Array(0)
    obj['age']=10;
    10
    ary
    (3) [12, 230, 340, age: 10]
    0: 12
    1: 230
    2: 340
    age: 10
    length: 3
    __proto__: Array(0)

    正则琥珀:
    /{(d+)}/g.exec('{0}年{1}月')
    (2) ["{0}", "0", index: 0, input: "{0}年{1}月", groups: undefined]
    0: "{0}"
    1: "0"
    groups: undefined
    index: 0
    input: "{0}年{1}月"
    length: 2
    __proto__: Array(0) **`指向原型就是数组,特殊数组`**

    ```




     
     
     
  • 相关阅读:
    深入理解 Netty-新连接接入
    深入理解 Netty-Channel架构体系
    深入理解 NioEventLoop启动流程
    深入理解 NioEventLoopGroup初始化
    java8-Stream
    WebSocket+Netty构建web聊天程序
    Jpa 笔记
    观察者模式
    一只垂直的小爬虫
    字符集编码全方位解析
  • 原文地址:https://www.cnblogs.com/fron-tend/p/11946817.html
Copyright © 2020-2023  润新知