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

站长

2024年04月29日 13:25 · 阅读数 29

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;

转载自:https://juejin.cn/post/6844904080632987656