zoukankan      html  css  js  c++  java
  • 进击JavaScript核心 --- (1)基本数据类型

    ES5之前提供了 5种基本数据类型 和 1种引用数据类型


    基本数据类型:Undefined, Null, String, Number, Boolean

    引用数据类型:Object

    ES6开始引入了一种新的基本数据类型 Symbol,表示独一无二的值


    1、typeof 操作符

    typeof 是一个操作符而不是函数,因此后面的圆括号可以用,但不是必须的

    "undefined" --- 如果这个值未定义(注意:包括未声明和未初始化)

    "string" --- 如果这个值是字符串

    "number" --- 如果这个值是数值

    "boolean" --- 如果这个值是布尔值

    "object" --- 如果这个值是null 或 引用数据类型

    "function" --- 如果这个值是函数(某些低版本浏览器对正则表达式也会返回function)

    console.log(typeof a)                 // undefined  (未定义的变量,使用typeof 操作符检测也会返回undefined)
    console.log(typeof undefined)         // undefined
    console.log(typeof null)              // object  (null 被认为是一个空的对象引用)
    console.log(typeof('string'))         // string
    console.log(typeof 3)                 // number
    console.log(typeof true)              // boolean
    console.log(typeof function(){})      // function
    console.log(typeof [])                // object
    console.log(typeof {})                // object
    console.log(typeof /^d/)             // object

    2、Undefined类型

    Undefined类型只有一个特殊的值,即undefined。声明变量但未加以初始化时,该变量的值就是 undefined

    未初始化和未声明是完全不同的,前者会被赋值为 undefined,后者会报错。但是使用 typeof 操作符检测时,两者都会返回 undefined

    var a 
    console.log(a)          // undefined (声明但未初始化)
    console.log(b)          // Uncaught ReferenceError: b is not defined (报错:b 未定义)
    var a
    console.log(typeof a)     // undefined  
    console.log(typeof b)     // undefined 

    3、Null 类型

    Null 类型也只有一个特殊的值 null,null值表示一个空对象指针

    使用 typeof 操作符检测 null 值时会返回 "object"

    var a = null
    console.log(typeof a)    // object

    null 和 undefined 之间的关系:

    (1)、undefined 值派生自 null 值,所以二者相比较(==)总是返回true

    console.log(undefined == null)    // true
    console.log(undefined === null)   // false

    (2)、无论何时,都没有必要显示的为一个变量赋值为 undefined

    (3)、如果一个变量用于在将来保存对象,则可以将其初始化为 null

    4、String 类型

    字符串是不可变的,一旦创建,值就不能改变。如要改变某个变量保存的字符串,首先要销毁原来的字符串,然后再用新字符串来填充该变量

    var str = "java"
    str = "javascript" // 销毁掉原来的字符串,再用新字符串填充变量 str

    toString()方法 和 String()方法的区别:

    (1)、toString()方法适用于 String, Number, Boolean, Object,不可用于 Null 和 Undefined;String()方法则可以用于所有的

    var num = 1, bool = true
    alert(num.toString())         // '1'
    alert(bool.toString())        // 'true'
    alert(null.toString())        // Uncaught TypeError: Cannot read property 'toString' of null
    alert(undefined.toString())   // string.js:14 Uncaught TypeError: Cannot read property 'toString' of undefined
    
    alert(String(num))         // '1'
    alert(String(bool))        // 'true'
    alert(String(null))        // 'null'
    alert(String(undefined))   // 'undefined'

    (2)、toString()方法内部可以通过传递基数,输出二进制、八进制、十进制、十六进制的字符串值,默认是十进制

    var num = 10
    alert('不传基数,默认是十进制:' + num.toString())  // 不传基数,默认是十进制:'10'
    alert('二进制基数:' + num.toString(2))            // 二进制基数:'1010'
    alert('八进制基数:' + num.toString(8))            // 八进制基数:'12'
    alert('十六进制基数:' + num.toString(16))         // 十六进制基数:'a'

    字符串数值做加法运算 "+" 会拼接成新的字符串,其余的 "-", "*", "/", "%" 均会自动转成 Number类型,再计算

    var num1 = '11', num2 = '2', num3 = 3
    
    alert(num1 + num2 + num3)   // '1123'
    alert(num1 - num2)          // 9
    alert(num1 + num2 - num3)   // 109
    alert(num1 * num2 * num3)   // 66
    alert(num1 / num2 / num3)   // 1.8333333333333333
    alert(num1 % num2 % num3)   // 1

    5、Number 类型

    浮点数值

    (1)、由于保存浮点数值需要的内存空间是保存整数值的两倍,js引擎会不失时机的将浮点数值转为整数值

    var num1 = 10.0   // 解析为10

    (2)、浮点数的小数点前面可以没有整数,但不推荐这种写法

    var num1 = 0.3
    var num2 = .2    // 不推荐

    (3)、js引擎会将小数点后面带有6个零以上的浮点数转为科学计数法表示的值,例如:0.0000003 会被转换成 3e-7

    (4)、由于浮点数计算存在误差,因此,永远不要测试某个特定的浮点数值

    console.log(0.1 + 0.2)         // 0.30000000000000004
    if(0.1 + 0.2 == 0.3) { // 不要做这样的测试
        alert('0.1 加 0.2 等于 0.3')
    } else{
        alert('0.1 加 0.2 不等于 0.3')
    }
    // 0.1 加 0.2 不等于 0.3

    NaN 非数值(Not a Number),是一个特殊的数值,如果操作两个数值,但是不能正确返回数值,就会返回NaN(这样就可以避免报错)

    alert(0 / 0)     // NaN 
    alert(8 / 0)     // Infinity
    alert(-2 / 0)    // -Infinity

    NaN的两个特点:

    (1)、任何涉及NaN的操作,都会返回NaN

    alert(NaN / 0)      // NaN
    alert(NaN + '1')   // NaN1 (涉及字符串拼接的除外)
    alert(NaN + 1)     // NaN
    alert(NaN * 1)     // NaN

    (2)、NaN不大于,不小于,不等于任何数,包括NaN

    alert(NaN > 3)      // false
    alert(NaN < 0)      // false
    alert(NaN == 0)     // false
    alert(NaN == NaN)   // false
    alert(NaN > NaN)    // false
    alert(NaN < NaN)    // false

    isNaN() 函数接受一个参数,该参数可以是任意类型,如果该参数可以转为数值,则返回false;如不能转为数值,则是一个NaN,返回true

    alert(isNaN(10))          // false (10本来就是一个数字)
    alert(isNaN('10'))        // false (字符串10可以转为数字10)
    alert(isNaN('10str'))     // true  
    alert(isNaN('str'))       // true  
    alert(isNaN(true))        // false (可以转为数字1)
    alert(isNaN(NaN))         // true
    alert(isNaN({age: 3}))    // true   (先调用对象的valueOf() 方法,若返回数字则为false,反之为true)

    在基于对象调用 isNaN() 方法时,会首先调用 valueOf() 方法,如果返回值不可以转为数字,则基于这个返回值调用 toString() 方法,再测试返回值

    var obj1 = {
      name: 'Jim',
      age: 3,
      valueOf: function() {  // 返回一个数字
        return this.age
      }
    }
    var obj2 = {
      name: 'Jim',
      age: 3,
      valueOf: function() {  // 返回一个字符串
        return this.name
      }
    }
    var obj3 = {
      name: 'Jim',
      age: 3,
      score: {
        chinese: 96,
        math: 99,
        toString: function() {
          return 99
        }
      },
      valueOf: function() {  // 返回一个对象
        return this.score
      }
    }
    
    alert(isNaN(obj1))    // false (重写了 valueOf() 方法,返回一个数字3)
    alert(isNaN(obj2))    // true   (valueOf() 方法返回一个字符串 'Jim',这个字符串不能被转为数字)
    alert(isNaN(obj3))    // true   (valueOf() 方法返回了一个对象,尽管该对象重写了 toString()方法,但是并没有执行,此处不解 ~~~)

    数值转换, 一共提供了三个转型函数:

    Number():用于任何数据类型

    parseInt(), parseFloat():专门用于把字符串转为数值

    Number() 转换规则:

    (1)、Boolean类型的值,true 和 false 分别被转为1 和 0

    (2)、null 值返回 0, undefined 返回 NaN

    (3)、字符串类型分为以下几种情况:


    如果字符串中只包含数字,则将其转为十进制数值(前导的0会被忽略)

    如果字符串中包含有效的浮点数,则将其转为对应的浮点数值(前导的0会被忽略)

    如果字符串中包含有效的十六进制数,则将其转为对应的十进制数

    如果是空字符串,则将其转为0

    除了以上情况之外的字符,一律转为NaN

    alert(Number(true))          // 1
    alert(Number(null))          // 0
    alert(Number(undefined))     // NaN
    alert(Number('32'))          // 32
    alert(Number('000011'))      // 11
    alert(Number('-3'))          // -3
    alert(Number('3.14'))        // 3.14
    alert(Number('0.1'))         // 0.1
    alert(Number('.1'))          // 0.1
    alert(Number('0xf'))         // 15
    alert(Number(''))            // 0
    alert(Number('{}'))          // NaN

    parseInt() 转换规则:

    (1)、忽略字符串前面的空格,直至找到第一个非空格字符(如果第一个字符不是数字或者负号,则转为NaN;不同于Number(),空字符串也转为NaN)

    (2)、如果找到的第一个有效字符是数字,则会依次解析后面的字符,直至结束或遇到非字符

    (3)、不同于Number()将所有进制转为十进制,parseInt()可以正确解析八进制和十六进制数据

    alert(parseInt(null))         // NaN
    alert(parseInt(undefined))    // NaN
    alert(parseInt('blue123'))    // NaN
    alert(parseInt('123blue'))    // 123
    alert(parseInt('string'))     // NaN
    alert(parseInt(true))         // NaN
    alert(parseInt(3.14))         // 3
    alert(parseInt(.1))           // 0
    alert(parseInt('070'))        // 70  (ECMAScript 3 认为是 56(八进制),ECMAScript 5 认为是 70(十进制))
    alert(parseInt('70'))         // 70
    alert(parseInt('0xf'))        // 15
    alert(parseInt('0xAF'))       // 175

    鉴于上面处理八进制数时的困惑,parseInt() 函数提供了第二个参数,转换时的基数(不填则默认是10)。

    alert(parseInt('070', 8))    // 56
    alert(parseInt('070'))       // 70
    alert(parseInt('AF', 16))    // 175
    alert(parseInt('AF'))        // NaN

    parseFloat() 转换规则:

    (1)、字符串中第一个小数点是有效地,第二个小数点是无效的,因此后面的字符串将会被忽略

    (2)、只解析十进制的数,没有第二个参数。因此,十六进制的数始终被转换为0

    (3)、如果字符串解析后是一个整数,或者小数点后面都是0,则被转换为一个整数

    alert(parseFloat('3.14'))     // 3.14
    alert(parseFloat('.1'))       // 0.1
    alert(parseFloat('0.66'))     // 0.66
    alert(parseFloat('0.6.3'))    // 0.6
    alert(parseFloat('AF'))       // NaN
    alert(parseFloat('070'))      // 70
    alert(parseFloat('0xf'))      // 0
    alert(parseFloat('3.0000'))   // 3
    alert(parseFloat('00011'))    // 11
    alert(parseFloat('123blue'))  // 123

    6、Boolean 类型


    Boolean() 转换规则:

    (1)、String类型:任何非空字符串都转为true,空字符串转为false

    (2)、Number类型:任何非零数值(包括Inifity)都转为true,0 和 NaN 转为false

    (3)、Object类型:任何对象都转为true,null 转为false

    (4)、Undefined类型:转为false

    alert(Boolean('true'))      // true
    alert(Boolean('false'))     // true
    alert(Boolean(''))          // false
    alert(Boolean(25))          // true
    alert(Boolean(-0.1))        // true
    alert(Boolean(Infinity))    // true
    alert(Boolean(0))           // false
    alert(Boolean(NaN))         // false
    alert(Boolean({}))          // true
    alert(Boolean([]))          // true
    alert(Boolean(null))        // false
    alert(Boolean(undefined))   // false

    7、相等操作符


    相等和不想等:自动隐式转换,先转换再比较


    规则:

    (1)、如果有一个操作数是布尔值,则在比较之前先将其转为数值,false 转为 0,true 转为 1

    (2)、如果有一个操作数是字符串,另一个操作数是数值,则在比较之前先将字符串转为数

    (3)、如果有一个操作是对象,另一个操作数不是,则调用对象的 valueOf() 方法,用得到的基本类型值按照前面的规则比较

    (4)、如果两个操作数都是对象,则比较它们是不是同一个对象。如果都指向同一个对象,则返回true,否则,返回false

    alert(true == 1)                  // true
    alert(true == 2)                  // false
    alert(false == 0)                 // true
    alert(false == [])                // true
    alert(0 == '')                    // true
    alert('5' == 5)                   // true
    alert('blue' == true)             // false ('blue'转为数值是NaN)
    alert('blue' == 1)                // false
    alert(null == undefined)          // true
    alert(undefined == 0)             // false
    alert(undefined == false)         // false
    alert(null == false)              // false
    alert(undefined == undefined)     // true
    alert(null == null)               // true
    alert(undefined == [])            // false
    alert(NaN == NaN)                 // false
    alert(NaN != NaN)                 // true
    alert([] != [])                   // true
    alert({age: 3} == 3)              // false
    alert({age: 3, valueOf: function(){return this.age}} == 3)   // true

    全等和不全等:仅比较不转换

    alert(5 === '5')              // false (不同数据类型,不相等)
    alert(null === undefined)     // false (二者是类似的值,但是不同类型的值)
  • 相关阅读:
    选择器
    asp.net 操作ftp类
    女装类视觉设计感悟
    跨域读取js变色
    关于jQuery的ajax初级应用
    打造前端自动化编译环境(思路)
    <base>标签在ie6下的问题
    通过压缩图片 来提升页面加载速度
    原来我一直不懂cookie
    去处浏览器的默认效果(autocomplete, outline)
  • 原文地址:https://www.cnblogs.com/rogerwu/p/10914961.html
Copyright © 2011-2022 走看看