进击JavaScript核心 --- 基本数据类型

Posted 2021-12-03 rogerwu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了进击JavaScript核心 --- 基本数据类型相关的知识，希望对你有一定的参考价值。

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 （二者是类似的值，但是不同类型的值）

以上是关于进击JavaScript核心 --- 基本数据类型的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript核心语法之基本数据类型（绝对详细，满满干货）

JavaScript面试核心考点(精华)

JavaScript面试核心考点(精华)阿斯顿23

春招季如何横扫 Javascript 面试核心考点？ | 技术头条

JavaScript语言核心