JS中的数据类型简析——基本数据类型值

3,647 阅读9分钟

JS中的数据类型,是学习JS的基础,他主要分为两大类分别是:

  • 基本数据类型和引用数据类型,基本数据类型又分为number、string、boolean、null、undefined、还有ES6新语法规范中的Symbol,BigInt
  • 引用数据类型:对象(普通对象、数组对象、正则对象、Math、Date)、函数

今天我们主要先简单了解一下各种数据类型:

一、基本数据类型

按值操作

1、number

  • 包含:
    • 正数、负数、0

    • NaN

      对于NaN我们需要了解的内容:

      • not a number 不是一个有效数字,但是属于number类型的
      • NaN和任何值都不相等(包括自己本身)
      • NaN == NaN //=>false
    • Infinity:无穷大的值,也是number类型的

  • 思考:想要验证一下n是不是有效数字,要怎么验证?
    • 既然NaN代表不是一个有效数字,那么直接用n==NaN是检测是否可以呢?
    • 答:不可以;因为NaN本身代表不是一个数,不是一个数的内容包含很多,NaN与其自身都不相等,所以不能用NaN来检测一个数是否为有效数字。

由此我们引申出isNaN的概念

1、isNaN

  • 定义:专业用来验证一个值是否为非有效数字
  • 返回值
    • 有效数字:返回false
    • 非有效数字:返回true
console.log(isNaN(1)); //=>false
console.log(isNaN(NaN)); //=>true
console.log(isNaN(Infinity)); //=>false
console.log(isNaN('AA')); //=>true
console.log(isNaN('12.5')); //=>false
console.log(isNaN('12.5px')); //=>true
console.log(isNaN([])); //=>false
console.log(isNaN([10])); //=>false
console.log(isNaN([10, 20])); //=>true
console.log(isNaN({})); //=>true
console.log(isNaN(null)); //=>false
console.log(isNaN(undefined)); //=>true
console.log(isNaN(Symbol(1))); //=>报错
  • 注意:
    • 在使用 isNaN 进行检测的时候,如果检测的值是非数字类型的值,则需要先把其转换为数字类型,然后在进行检测。

2、把其它数据类型转换为数字类型

1) Number([value])

  • 定义:是JS内置的转换方法,可以把其他数据类型“强制”转换为数字类型
  • 1、字符串转数字
    • 只有都是有效数字字符的才能转换为具体的数字,一旦字符串中出现非有效数字字符,则结果为NaN
    • 空字符串转数字===>0
    console.log(Number('12')); //=>12
    console.log(Number('12.5')); //=>12.5
    console.log(Number('12px')); //=>NaN
    console.log(Number('12.5.0')); //=>NaN
    
  • 2、布尔转数字
    • true 转换为1
    • false 转换为 0
    console.log(Number(true)); //=>1
    console.log(Number(false)); //=>0
    
  • 3、把空转数字
    • null 转换为 0
    • undefined 转换为NaN
    console.log(Number(null)); //=>0
    console.log(Number(undefined)); //=>NaN
    
  • 4、Symbol 转数字
    • 不能把Symbol类型转换为数字,否则会报错
    console.log(Number(Symbol(13))); //=>Cannot convert a Symbol value to a number
    
  • 5、对象转数字
    • 过程:
      • 1.先把obj转化为字符串 "[object Object]"
      • 2.把字符串转换为数字 Number("[object Object]")
    • 普通对象
    let obj={x:100};
    console.log(Number(obj)); //=>NaN
    
    • 数组对象:空数组转数字为 0
    /*
     * 1.先把ARR转换为字符串: "10"
     * 2.在把"10"转换为数字:10
     */
    let arr = ["10"];
    console.log(Number(arr)); //=>10
    /*
     * 1.先把ARR转换为字符串: "10,20"
     * 2.在把"10,20"转换为数字:NaN
     */
    arr = ["10", "20"];
    console.log(Number(arr)); //=>NaN
    console.log(Number([])); //=>  []->''  Number('')->0
    console.log(Number(['AA'])); //=> ['AA']->'AA'  Number('AA')->NaN
    
    • 其余对象基本都是NaN
  • 6、函数转数字
    • 结果都是NaN
    console.log(Number(function func() {}));//=>NaN
    

2)parseInt([value])

  • 定义:从字符串最左边开始查找,把找到的有效数字字符转换为数字,一直遇到一个非有效数字字符为止,则结束查找
  • 原理:
    • 处理原理与Number不一样
    • 他们是把字符串转换为数字类型(如果处理的值不是字符串,需要先转换为字符串然后再去转换为number类型的)

3)parseFloat([value])

  • 与 parseInt 区别
    • parseFloat 比 parseInt 多识别一位小数点
    console.log(Number('12px')); //=>NaN
    console.log(parseInt('12px')); //=>12
    console.log(parseInt('12px24')); //=>12
    console.log(parseInt('width:12px')); //=>NaN
    console.log(parseInt('12.5px')); //=>12
    console.log(parseFloat('12.5px')); //=>12.5  parseFloat比parseInt多识别一个小数点
    
    console.log(Number(true)); //=>1
    console.log(parseInt(true)); //=>先把TRUE转换为字符串"TRUE"  parseInt('true') =>NaN
    console.log(parseInt(NaN)); //=>NaN
    console.log(Number(null)); //=>0
    console.log(parseInt(null)); //=> parseInt('null') =>NaN
    console.log(isNaN(Number(parseInt("0.8")))); //=>parseInt("0.8")->0   Number(0)->0  isNaN(0)->false
    
    console.log(Number('')); //=>0
    console.log(parseInt('')); //=>NaN
    

3、方法

在Number这一大类中,有很多公用的方法,本次只列举两个较为常用的

1、toFixed()

  • 语法:数字.toFixed(N)
  • 定义:保留小数点后N位(最后的结果是一个字符串)
    let n = 3.1415926;
    console.log(n.toFixed(2)); //=>"3.14"
    

2、MAX_SAFE_INTEGER

  • 定义:最大安全数(js能够识别的最大整数)
  • 数值:9007199254740991
  • 注意:ES6中提供了一个新的数据类型 BigInt ,管理超过安全数值的数字
console.log(Number.MAX_SAFE_INTEGER); //=>9007199254740991 最大安全数(JS能够有效识别的最大整数)
console.log(9007199254740992 == 9007199254740993); //=>true  应该是不一样的,但是超过了最大数值,JS无法精准计算
ES6中提供了一个新的数据类型 BigInt:管理超过安全数值的数字
console.log(BigInt(9007199254740992), BigInt(9007199254740993));
/* 
 * 基本数据类型
 *   number string boolean null undefined symbol  => BigInt新增的基本数据类型
 */

思维导图

2、string

  • 定义:在JS中,用单引号/双引号/反引号,包起来的都是字符串

1、把其它数据类型转换为字符串类型:

  • 方法:
    • String([value])
    • [value].toString()
  • 隐式转换:
    • 字符串拼接时
    • 把对象转换为数字之前,先要转换为字符串
  • 普通对象转字符串:“[object object]”
  • 数组对象转换为字符串:“第一项,第二项,...”(用逗号分隔数组中的每一项)

2、在JS中常用的数学运算

  • %(膜)取余数
console.log(7 % 3); //=>取余  1
  • 减乘除:
    • 都是数学运算(如果遇到非数字类型,需要基于Number 把其强制转换为数字类型,然后进行运算)
  • 加的作用:
    • 数学运算:
    • 字符串拼接:

字符串拼接

  • 定义:只要加号两边的任意一边出现字符串,则变为字符串拼接
  • 注意:对象转数字时需要先转换为字符串,变为字符串之后则直接拼接,不再转为数字
  • 例子:console.log(100 + true + 21.2 + null + undefined + 'Tencent' + [] + null + 9 + false);//==>NaNTencentnull9false
console.log(3 - "3px"); //=>NaN
console.log(3 + "3px"); //=>"33px"  字符串拼接
console.log(1 + "1"); //=>"11" 字符串拼接
console.log(1 + {}); //=>"1[object Object]"  在把{}转换为数字过程中,先把他转换为字符串"[object Object]",此时右侧出现了字符串,则不再是数学运算,而是字符串拼接了
console.log(1 + []); //=>'1'
console.log([10] + true); //=>"10true"  在转换[10]到数字的过程中,先把其转换为字符串"10",此时操作变为字符串拼接(和数学运算没关系了)
console.log(true + [10]); //=>"true10"
console.log(1 + true); //=>2

console.log(100 + true + 21.2 + null + undefined + "Tencent" + [] + null + 9 + false);
    100 + true => 101
    101 + 21.2 => 122.2
    122.2 + null => 122.2
    122.2 + undefined => NaN 
    NaN + "Tencent" => "NaNTencent"  字符串拼接(以后都是字符串拼接)
    "NaNTencent" + [] => "NaNTencent"
    "NaNTencent" + null => "NaNTencentnull"
    "NaNTencentnull" + 9 => "NaNTencentnull9"
    "NaNTencentnull9" + false => "NaNTencentnull9false"
  • 真实项目中经常把一些变量的值拼接到指定的字符串中
    // 完成字符串拼接处理:2020年03月03日 12:00:00
    	let year = '2020';
    	let month = '03';
    	let day = '03';
    	let hours = '12';
    	let minutes = '00';
    	let seconds = '00';
    
  • 传统的拼接方式
    • 我们需要在字符串中基于“++”或者‘++’的方式把变量拼接到字符串中
    • let result = year + '年' + mouth + '月' + day + '日' + hours + ':' + minutes + ':' + seconds
    • 这种方式涉及很多恶心的规则,一不留神就容易拼错
    //从页面中获取一个元素拼接内容
    
     let str='<div class="box" id="box">';
     str+='<h2 class="title">哈哈</h2>';
     str+='<ul class="item">';
     str+='<li></li>';
    ....
    
  • ES6 中的模版字符串
    • 反引号${}反引号:为了解决传统字符串拼接中的问题反引号${}反引号中存放变量或者其他的JS表达式即可
    • let result = 反引号${year}年${mouth}月${day}日${hours}:${minutes}:${seconds}反引号
    • 可以很简单的完成字符串拼接
// ES6中的模板字符串就是为了解决传统字符串拼接中的问题(反引号 TAB上面的撇):${}中存放变量或者其它的JS表达式即可,很简单的完成字符串拼接
	let result = `${year}${month}${day}${hours}:${minutes}:${seconds}`;
	console.log(result);
//从页面中获取一个元素拼接内容

let str = `<div class="box" id="box">
	<h2 class="title">哈哈</h2>
	    <ul class="item">
		${[10,20,30].map(item=>{
			return `<li>${item}</li>`;
		}).join('')}
	    </ul>
	</div>`;
	console.log(str); 

思维导图

3、boolean

  • 包含:
    • true
    • false

1、把其它数据类型转换为布尔类型

  • 方法:
    • Boolean([value])
    • ![value] : 把指定的值转换为布尔类型后取反
    • !![value] : 取反再取反,相当于没有取反,只是把它转换为布尔类型值
  • 规则:
    • 只有 “0/NaN/null/undefined/空字符串” 最后是false,其余的都是true
    console.log(!!1); //=>true
    console.log(!1); //=>false
    
    console.log(!!-1); //=>true
    console.log(!!0); //=>false
    console.log(!!undefined); //=>false
    console.log(!!Number('12px')); //=>Number('12px')->NaN  false
    console.log(!![]); //=>true
    console.log(!!''); //=>false
    console.log(!!{}); //=>true
    
  • 条件判断时:
    /* 条件判断中,每一个条件最后一定是true/false */
        if (1 == 1) {}
    	if (1) {
    		//=>写一个值,也是要把这个值转换为布尔,然后校验程序的真假
    	}
    	if (3 + '3px') {} //=>3 + '3px' =>'33px'  真
    	if (3 - '3px') {} //=>3 - '3px' =>NaN   假
    

思维导图

4、null 和undefined

  • null 空对象指针
  • undefined 的应用场景

1、声明了一个变量,但是没有赋值,这个变量就是undefined;

var num;
console.log(num)===>undefined

2、我们在获取一个对象的属性名对应的属性值的时候,如果这个属性名在对象中没有,得到的这个值就是undefined

var obj={name:"lili"};
    obj.name ====>"lili"
    obj.age====>undefined

3、如果函数里面有形参,咱们在执行函数的时候,并没有传参数,那么,在函数体中去打印这个形参,得到值就是undefined;

function fn(n,m){
    console.log(n);====>undefined
 }
fn()

4、正常的一个函数里面return多少,那么这个执行函数最后的返回结果就是多少,如果没写return,(即此函数没有返回值),在执行函数的时候,返回值就是undefined;

function fn2(){

}
var res=fn2()  =====>undefined;