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

时间 2020-05-30

原文原文链接

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

基本数据类型和引用数据类型，基本数据类型又分为number、string、boolean、null、undefined、还有ES6新语法规范中的Symbol，BigInt

引用数据类型：对象(普通对象、数组对象、正则对象、Math、Date)、函数

今天咱们主要先简单了解一下各类数据类型：java

1、基本数据类型

按值操做数组

一、number

包含：
- 正数、负数、0安全
- NaNbash
  对于NaN咱们须要了解的内容:函数
  - not a number 不是一个有效数字，可是属于number类型的
  - NaN和任何值都不相等（包括本身自己）
  - NaN == NaN //=>false
- Infinity:无穷大的值，也是number类型的学习
思考：想要验证一下n是否是有效数字，要怎么验证？
- 既然NaN表明不是一个有效数字，那么直接用n==NaN是检测是否能够呢？
- 答：不能够；由于NaN自己表明不是一个数，不是一个数的内容包含不少，NaN与其自身都不相等，因此不能用NaN来检测一个数是否为有效数字。

由此咱们引伸出isNaN的概念ui

一、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 进行检测的时候，若是检测的值是非数字类型的值，则须要先把其转换为数字类型，而后在进行检测。

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

1) Number([value])

定义：是JS内置的转换方法，能够把其余数据类型“强制”转换为数字类型
一、字符串转数字
- 只有都是有效数字字符的才能转换为具体的数字，一旦字符串中出现非有效数字字符，则结果为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
复制代码
```

二、布尔转数字

true 转换为1
false 转换为 0

console.log(Number(true)); //=>1
console.log(Number(false)); //=>0
复制代码

三、把空转数字

null 转换为 0
undefined 转换为NaN

console.log(Number(null)); //=>0
console.log(Number(undefined)); //=>NaN
复制代码

四、Symbol 转数字

不能把Symbol类型转换为数字，不然会报错

console.log(Number(Symbol(13))); //=>Cannot convert a Symbol value to a number
复制代码

五、对象转数字

过程：
- 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

六、函数转数字

结果都是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
复制代码

三、方法

在Number这一大类中，有不少公用的方法，本次只列举两个较为经常使用的spa

一、toFixed()

语法：数字.toFixed(N)

定义：保留小数点后N位（最后的结果是一个字符串）

let n = 3.1415926;
console.log(n.toFixed(2)); //=>"3.14"
复制代码

二、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新增的基本数据类型 */
复制代码

思惟导图

二、string

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

一、把其它数据类型转换为字符串类型：

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

二、在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); 
复制代码

思惟导图

三、boolean

包含：
- true
- false

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

方法：
- 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 假
复制代码

思惟导图

四、null 和undefined

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

一、声明了一个变量，可是没有赋值，这个变量就是undefined;3d

var num;
console.log(num)===>undefined
复制代码

二、咱们在获取一个对象的属性名对应的属性值的时候，若是这个属性名在对象中没有，获得的这个值就是undefined

var obj={name:"lili"};
    obj.name ====>"lili"
    obj.age====>undefined
复制代码

三、若是函数里面有形参，我们在执行函数的时候，并无传参数，那么，在函数体中去打印这个形参，获得值就是undefined;

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

四、正常的一个函数里面return多少，那么这个执行函数最后的返回结果就是多少，若是没写return，（即此函数没有返回值），在执行函数的时候，返回值就是undefined;

function fn2(){

}
var res=fn2()  =====>undefined;
复制代码