前端JavaScript的五种数据类型【及数据类型间的相互转换】------ 详解

最新推荐文章于 2024-05-16 18:42:43 发布

-Food流油

最新推荐文章于 2024-05-16 18:42:43 发布

阅读量1k

点赞数 27

分类专栏： js数据类型文章标签：前端 javascript 开发语言 js

本文链接：https://blog.csdn.net/Lan_0316/article/details/138714861

版权

js数据类型专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

前言
一、五种数据类型分别是什么？
二、如何查看某个数据的数据类型
三、数据类型详解
四、数据类型转换

前言

在js中，所有的数据都可以用某一种类型来概述!
数据类型这个知识点存在的目的就是为了：表明数据的形式，以区分数据的运算机制。

一、五种数据类型分别是什么？

	1> 数字（Number）
	2> 字符串 （String）
	3> 布尔类型 （Boolean）
	4> 未定义（Undefined ）
	5> 对象 （Object）

二、如何查看某个数据的数据类型

	var res = typeof(你要查看的数据);
	var res = typeof 你要查看的数据;
	返回值：你查看的数据的数据类型

三、数据类型详解

1. 数字（Numder)

Number类型即数值类型，主要作用于存储数据，参与数学运算。
例1：Number 类型即数值、数字包括整数、小数、八进制、十六进制等；

//1.普通数值及小数
var num1 = 2;
console.log(typeof(num1));
var num2 = 20;
console.log(typeof(num2));
//2.八进制，以0开头没有超过8的数。
var num3 = 040;
console.log(typeof(num3));
//3.十六进制，以0x开头没有超16的数。
var num4 = 0x15;
console.log(typeof(num4));

例2：特殊的Number类型

//1.算数运算得不到正常数字时会返回NaN；
var num1= 10-'a';
console.log(num1);
console.log(typeof(num1));
//2.无穷
var num=1/0;
console.log(num);// Infinity
console.log(typeof(num));// number
//3.小数相加会有偏差
var num=0.1+0.2;
console.log(num); // 0.30000000000000004
console.log(typeof(num));// number

2. 字符串（String）

在js程序中，通过引号(’ ’ / " " / ``)定义字符串！
例1:

var str='abc';
console.log(str);// abc
console.log(typeof(str));// string

两个特殊的字符：
let str1 = ''; // 空字符串
let str2 = ' '; // 空格字符串
// 这两个符号在js中完全不一样
console.log(str1.length)
console.log(str2.length)
在js中，空格也是一个实实在在的字符！

例2：

var str="abc";
console.log(str);// abc
console.log(typeof(str));// string

例3：

var str=`abc`;
console.log(str);// abc
console.log(typeof(str));// string

字符串是用来数据存储使用频率非常高的一个类型，其中最基本的操作有：
字符串.length : 获取当前字符串的长度
字符串.charAt(下标)：在字符串中获取对应下标的字符，下标从0开始
字符串[下标]：在字符串中获取对应下标的字符，ie7及以下获取到undefined

3. 布尔类型（Boolean）

true（真） / false（假）
在将来咱们的程序中，很少让你直接去定义一个true/false的布尔值，一般情况下，都一个表达式的返回值是boolean;

var bol1=true;
var bol2=false;
console.log(typeof(bol1,bol2));// boolean

4. 未定义（Undefined ）

值：undefined
undefined很少需要你去定义，他一般情况下都一个被动得到的结果！

得到undefined的几种情况：
1、变量声明且没有赋值；
2、获取对象中不存在的属性时；
3、函数需要实参，但是调用时没有传值，形参是undefined；
4、函数调用没有返回值或者return后没有数据，接收函数返回的变量是undefined。

5. 对象（Object）

1. null 空对象

var obj = null;
console.log(typeof(obj));// object

2. 数组一组数据的集合

var obj = [1,2,3,4,5,'a','b',true,undefined];
console.log(typeof(obj));// object

2.1 数组：

- 如何创建数组
	A. 字面量
		var 变量 = [1,2,'a','b'...]
	B. 构造函数
		var 变量 = new Array(值1,值2...)
	
		注意：
			当通过构造函数定义数组时，如果参数的个数是1个，那么
			- 如果这一个参数是非数字，那么，这个参数就是数组的一个普通数据
			- 如果这一个参数是数字，那么，这个参数表示的是数组的长度
	- 如何使用数组中的数据
		数组中的数据，都有一个对应的下标，官方称呼叫做：索引！(索引是从0开始数的)
		1> 取值
			变量[索引]
		2> 赋值
			变量[索引] = 值;  // 这个索引位置不存在
		3> 改值
			变量[索引] = 值;  // 这个索引位置已经存在

2.2 对象:

	- 什么是对象 
			他也是一组数组的集合
	- 与数组的一些区别
				A. 数组存数据，讲究的是数据的顺序; 而对象存数据，讲究的是数据的含义;
	- 如何创建对象
				var 变量 = {
					属性1: 值1,
					属性2: 值2,
					属性3: 值3,
					...
				}

	- 如何操作对象
		A. 取值
			对象.属性
		B. 赋值
			对象.属性 = 值
	
		C. 改值
			对象.属性 = 值
		
		D. 删除某个属性
			delete(对象.属性)
			// delete 对象.属性

四、数据类型转换

1.普通的数据类型（有一些情况会转换不成功）

1> 其他类型转换成字符串

toString()
语法：

	var 转换完的结果 = 其他类型数据.toString();
	var 转换完的结果 = toString( 其他类型 );

A. 数字 -> 字符串

	var num1 = -10; // '-10'
	console.log(num1); // -10
	var resStr = num1.toString();
	console.log(resStr); // -10
	console.log(typeof resStr);//  string

B. 布尔 -> 字符串

	var num1 = true;  // 'true'
	console.log(num1); // true
	var resStr = num1.toString();
	console.log(resStr); // true
	console.log(typeof resStr); // string

C. undefined -> 字符串

	var num1 = undefined; 
	console.log(num1); // undefined
	var resStr = toString(num1);
	console.log(resStr); // [object Undefined]
	console.log(typeof resStr); // string

	结果：[object Undefined], undefined不能通过toString转换成"undefined"字符串

D. 对象(普通对象和数组有自己独有的转换方法，这里不做讨论) null

	var num1 = null; 
	console.log(num1); // null
	var resStr = toString(num1);
	console.log(resStr); // [object Undefined]
	console.log(typeof resStr); // string

	结果：[object Undefined], null不能通过toString转换成"null"字符串

2> 其他类型转换成数字

parseInt()转换成整数、 parseFloat()转换成小数
语法:

	var res = parseFloat(数据)
	var res = parseInt(数据)

A. 数字之间互相转换
小数 -> 整数
整数 -> 小数

	var num = 10.999;
	var res = parseInt(num);
	console.log(res); // 10

B. 字符串 -> 数字
“abc”: NaN 一个数字类型的非数字
例：

	var num1 = "abc";
	console.log(num1); // abc
	var resStr = parseInt(num1);
	console.log(resStr); // NaN
	console.log(typeof resStr); // number

“10.2022”: parseInt -> 10 parseFloat -> 10.2022
例：

	var num1 = "10.999922";
	console.log(num1); // 10.999922
	var resStr = parseFloat(num1);
	console.log(resStr); // 10.999922
	console.log(typeof resStr); // number

“10.22.22.33”：parseInt -> 10 parseFloat -> 10.22
例：

		var num1 = "10.99.99.22"; 
		console.log(num1); // 10.99.99.22
		var resStr = parseInt(num1);
		console.log(resStr); // 10
		console.log(typeof resStr); // number

“10.22abc”: parseFloat -> 10.22 parseInt -> 10
例：

		var num1 = "10.99abc";
		console.log(num1); // 10.99abc
		var resStr = parseFloat(num1);
		console.log(resStr); // 10.99
		console.log(typeof resStr); // number

	"agc10"：parseInt -> NaN    parseFloat -> NaN

C. 布尔转数字

	var num1 = true; // true  false
	console.log(num1); // true
	var resStr = parseFloat(num1);
	console.log(resStr);  // NaN
	console.log(typeof resStr); // number

D. undefined

	var num1 = undefined; 
	console.log(num1); // undefined
	var resStr = parseFloat(num1);
	console.log(resStr);  // NaN
	console.log(typeof resStr); // number

E. null

	var num1 = null; 
	console.log(num1); // null
	var resStr = parseFloat(num1);
	console.log(resStr);  // NaN	
	console.log(typeof resStr); // number

2. 强制类型转化

概念：隐式类型转换

var num = true;
var num1 = false;
var res = num + num1; // 虽然我没有进行类型转换，但是我也得到了一个转换完的运算结果，为什么呢？ 因为程序自动做了隐式类型转换！
console.log(res); // 1
// 遇到最多自动应用隐式类型转换的场景： 1. 做运算的时候  2. 做if判断的时候;

1> String() 强制转换成字符串
语法：
var res = String(你要转的数据);
A. 数字 -> 字符串

	var num1 = -10; // '-10'
	console.log(num1); // -10
	var resStr = String(num1);
	console.log(resStr); // -10
	console.log(typeof resStr);//  string

B. 布尔 -> 字符串

	var num1 = true;  // 'true'
	console.log(num1); // true
	var resStr = String(num1);
	console.log(resStr); // true
	console.log(typeof resStr); // string

C. undefined -> 字符串
例：

		var num = undefined;
		console.log(num); // 'undefined'
		var res = String( num );
		console.log(res); // 'undefined'
		console.log(typeof res); // string

D. null -> 字符串
例：

		var num = null;
		console.log(num); // 'null'
		var res = String( num );
		console.log(res); // 'null'
		console.log(typeof res); // string

2> Number() 强制转换成数字
语法： var res = Number(你要转的数据)
A. 字符串 -> 数字

	"abc" -> NaN
	"10.22" ->  10.22
	"10.22.2.2" ->  NaN
		例：	
			var num = "10.22.2.2.2";
			console.log(num); // 10.22.2.2.2
			var res = Number( num );
			console.log(res); // NaN
			console.log(typeof res); // number
	"10abc" -> NaN
	"abc10" -> NaN

B. 布尔 -> 数字

	var num = false; // false -> 0   true -> 1
	console.log(num); // // false
	var res = Number( num );
	console.log(res);// 0
	console.log(typeof res); // number

C. undefined -> NaN
例:

	var num = undefined;
	console.log(num); // undefined
	var res = Number( num );
	console.log(res); // NaN
	console.log(typeof res); // number

D. null -> 0
例：

		var num = null;
		console.log(num); // null
		var res = Number( num );
		console.log(res); // 0
		console.log(typeof res); // number

3> Boolean() 强制转换成布尔值

A. 字符串 -> 布尔
	- 非空字符串 -> true
	- 空字符串('') -> false

B. 数字 -> 布尔
	0 -> false
	非0 -> true
	NaN -> false

C. undefined -> 布尔
	-> false

D. 对象 -> 布尔
	- null -> 布尔 -> false
	- 数组 -> 布尔 -> true
	- 普通对象 -> 布尔 -> true
	
总结：0 NaN "" null undefined 会被转换成false