组团学
学习方向
登录/注册

ECMAScript基本数据类型

阅读 (489)

一、JS中的数据类型

  • 基本数据类型

    • 数字(Number)：包括浮点数与整数
    • 字符串(String)：包括由任意数量字符组成的序列
    • 布尔值(Boolean)：包括true和false
    • Undefined：当我们试图访问一个不存在的变量时，就会得到一个特殊的值undefined。除此之外，使用已定义却未赋值的变量也会如此，因为js会自动将变量在初始化之前的值设定为undefined。而Undefined类型的值只有一个，那就是undefined
    • Null：只包含一个值的特殊数据类型。所谓的null值，通常是没有值或空值，不代表任何东西。null与undefined最大的不同在于，被赋予null的变量通常被认为是已经定义了的，只不过它不代表任何东西

  • 非基本数据类型

    就是对象类型

二、标识符

  • 什么是标识符?

    是一个字符串(注意：字符串未必是标识符)

  • 标识符规则

    1. 只能由字母、数字、下划线和$组成

    2. 开头不能是数字

    3. 不能是JS的关键字和保留字

      关键字：
      js中的关键字1907547.png

      保留字：
      js中的保留字.png

    4. 区分大小写

    5. 遵循驼峰或者下划线连接原则

    6. 见名知意

  • 作用

    给变量、函数、等命名

三、变量与常量

  • 变量概述

    a、程序可操作的存储区的名称

    b、程序运行期间能改变的数据

    c、每个变量都有特定的类型

  • 变量作用

    将不同类型的数据存储到内存

  • 变量的定义

    var 变量名; 注意：此时变量的值为undefined

    var 变量名 = 值; 注意：此时给变量值进行初始化赋值

  • 变量的数据存储

    变量名 = 数据值;

    注意：变量在使用前必须先"定义"（即赋予变量一个值），否则会出现错误

  • 常量

    程序运行期间不能改变的数据

四、数字(Number)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>数字(Number)</title>
</head>
<body>
	<script type="text/javascript">
		//定义了一个名为num的变量
		var num;

		//打印变量num的值，当num定义后没有任何赋值的情况下num的类型是Undefined，值为undefined
		console.log(num);

		//打印变量的数据类型
		//查看类型操作符typeof
		console.log(typeof num);

		//定义了一个名为num1的变量
		var num1;

		//给变量赋值
		//此时num1变量类型为数字类型，变量可以根据值的不同而改变类型
		num1 = 1;
		//打印类型
		console.log(typeof num1);

		//打印num1变量的值
		console.log(num1);

		//改变变量的值，直接赋值即可
		num1 = 10;
		console.log(num1);

		//八进制数字，以0开头
		num1 = 0377;
		//打印出的是八进制0377的十进制形式
		console.log(num1);

		//十六进制数字，以0x开头
		num1 = 0xff;
		//打印出的是十六进制0xff的十进制形式
		console.log(num1);
	</script>
</body>
</html>

五、Infinity与NaN

Infinity：特殊值，代表的是超出js处理范围的数值，但它依然是一个数字。任何数除以0结果为Infinity，Infinity与其他任何操作数执行任何算术运算的结果也是Infinity

NaN：如果我们在算术运算中使用了不恰当的操作数，导致运算失败，就会得到NaN。表示不是数字，但事实上它依然属于数字类型，只不过是一种特殊的数字罢了。NaN具有传染性，只要算术运算中存在一个NaN，整个运算就会失败

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Infinity与NaN</title>
</head>
<body>
	<script type="text/javascript">
		//Infinity：特殊值，代表的是超出js处理范围的数值，但它依然是一个数字。
		num = 1e308;
		console.log(num);

		//超出表示范围
		num = 1e309;
		console.log(num);

		//任何数除以0结果为Infinity
		console.log(10 / 0);
		//Infinity与其他任何操作数执行任何算术运算的结果也是Infinity
		console.log(num + 2);

		//正负Infinity相加的结果？
		//结果为NaN
		console.log(Infinity + (-Infinity));
		//NaN：表示不是数字，但事实上它依然属于数字类型，只不过是一种特殊的数字罢了
		console.log(typeof NaN);
		//如果我们在算术运算中使用了不恰当的操作数，导致运算失败，就会得到NaN
		console.log(10 * 'f');
		//NaN具有传染性，只要算术运算中存在一个NaN，整个运算就会失败
		console.log(1 + 2 + NaN);
	</script>
</body>
</html>

六、命名空间

在同一个HTML中，不论script引入的是外部JS代码还是内部JS代码，所有的script均是在同一命名空间之下

sunck.js

var a = 10;

命名空间.js

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>命名空间</title>
	<script type="text/javascript" src="sunck.js"></script>
</head>
<body>
	<script type="text/javascript">
		console.log(a);
		a = 20;
	</script>
	<script type="text/javascript">
		console.log(a);
	</script>
</body>
</html>

七、字符串

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>字符串</title>
</head>
<body>
	<script type="text/javascript">
		//js中一对双引号或单引号之间的任何都会被视为一个字符串
		
		//定义了一个名为str的变量，类型为字符串类型
		var str1 = "sunck is a good man";

		//打印
		console.log(str1);
		console.log(typeof str1);

		var str2 = "!";
		//两个字符串相加，相当于拼接
		var ret = str1 + str2;
		console.log(ret);

		//数字+字符串:将数字转换成字符串后相加拼接
		var num = 10;
		ret = str1 + num;
		console.log(ret);
	</script>
</body>
</html>

八、布尔值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>布尔值</title>
</head>
<body>
	<script type="text/javascript">
		//布尔类型  Boolean
		//只有两种值：true和false
		var br = true;
		console.log(br);
		console.log(typeof br);
	</script>
</body>
</html>

九、falsy值和truthy值

作用：常用于判断

falsy:

  • 数字：0，NaN
  • 字符串：""
  • 布尔值：false
  • Undefined：undefined
  • Null：null

十、类型转换

  • 其它基本类型转换成Number类型

    函数 功能
    Number() 将其他类型数据转成Number类型数据
    parseInt() 会试图将其收到的任何输入值(通常是字符串）转成整数类型，如果转换失败就返回NaN
    parseFloat() 会试图将其收到的任何输入值(通常是字符串）转成浮点数类型，如果转换失败就返回NaN

    parseInt()转换规则：如果第一个非空白字符(空格、换行、tab)是数字或者正负号则开始转换，直到碰到第一个非数字字符停止转换。如果第一个非空白字符不是数字或者正负号，转换失败，结果是NaN

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>其它基本类型转换成Number类型</title>
</head>
<body>
	<script type="text/javascript">
		//Number()  
		//功能：将其他类型数据转成Number类型数据
		
		//1、Null-->Number
		console.log(Number(null));//0

		//2、Undefined-->Number
		console.log(Number(undefined));//NaN

		//3、Boolean-->Number
		console.log(Number(true));//1
		console.log(Number(false));//0

		//4、String-->Number
		//如果字符串中只有数字、小数点、(最前面空格 正负号)则转换成对应的十进制数
		console.log(Number("123"));//123
		console.log(Number("12.3"));//12.3
		console.log(Number("+123"));//-123
		console.log(Number("-123"));//-123
		console.log(Number("   123"));//123

		//如果是一个空字符串，结果是0
		console.log(Number(""));//0
		console.log(Number("   "));//0

		//如果字符串中含有非数字，非正负号，转换失败，结果NaN
		console.log(Number("123abc"));//NaN
		console.log(Number("123+456"));//NaN
		console.log(Number("abc"));//NaN

		//parseInt()
		//功能：会试图将其收到的任何输入值(通常是字符串）转成整数类型，如果转换失败就返回NaN。
		//转换规则：如果第一个非空白字符(空格、换行、tab)是数字或者正负号则开始转换，直到碰到第一个非数字字符停止转换。如果第一个非空白字符不是数字或者正负号，转换失败，结果是NaN.
		console.log(parseInt("123"));//123
		console.log(parseInt("+123"));//123
		console.log(parseInt("-123"));//-123
		console.log(parseInt("  123"));//123
		console.log(parseInt("12a3"));//12
		console.log(parseInt("12.3"));//12
		console.log(parseInt("12 3"));//12
		//NaN
		console.log(parseInt("true"));
		console.log(parseInt("  .123"));
		console.log(parseInt("+-123"));

		//parseFloat()
		//功能：会试图将其收到的任何输入值(通常是字符串）转成浮点数类型，如果转换失败就返回NaN。
		console.log( parseFloat("   2.5a") );//2.5
		console.log( parseFloat("  .56") ); //0.56
		console.log( parseFloat("  -.23")); //- 0.23
		console.log( parseFloat("   +.23 + .1") );//0.23
		console.log( parseFloat("  3.14.956") ); //3.14
		console.log( parseFloat("a3.14") ); //NaN
	</script>
</body>
</html>

  • 其它基本类型转换成String类型

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>其它基本类型转换成String类型</title>
</head>
<body>
	<script type="text/javascript">
		//Null-->String
		var str0 = "sunck" + null;
		console.log(typeof str0);
		console.log(str0);

		//Undefined-->String
		var str1 = "sunck" + undefined;
		console.log(typeof str1);
		console.log(str1);
		
		//Boolean-->String
		var str2 = true.toString();
		console.log(typeof str2);//string
		console.log(str2);//"true"
		console.log(false.toString());//"false"

		//Number-->String
		var num = 10;
		var str3 = num.toString();
		console.log(typeof str3);//string
		console.log(str3);//"10"
	</script>
</body>
</html>

  • 其它基本类型转换成Boolean类型

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>其它基本类型转换成Boolean类型</title>
</head>
<body>
	<script type="text/javascript">
		//绝大部分值在转换为布尔类型时都为true，但以下6中falsy值除外
		/**
		 * 1、""
		 * 2、null
		 * 3、undefined
		 * 4、0
		 * 5、NaN
		 * 6、false
		 */
		console.log(Boolean(""));
		console.log(Boolean(null));
		console.log(Boolean(undefined));
		console.log(Boolean(0));
		console.log(Boolean(NaN));
		console.log(Boolean(false));
	</script>
</body>
</html>

十一、isNaN()函数和isFinite()函数

isNaN()：判断值是否是NaN。无法使用普通运算符，因为NaN不等于自身

isFinite()：检测输入是否是一个既非Infinity也非NaN的数字

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>isNaN()函数和isFinite()函数</title>
</head>
<body>
	<script type="text/javascript">
		//isNaN()  判断值是否是NaN，如果info===NaN则返回true，否则返回false
		console.log(NaN == NaN)
		console.log(NaN === NaN)
		console.log(isNaN(NaN));//true
		console.log(isNaN(parseInt("abc")));//true
		console.log(isNaN(123));
	</script>

	<script type="text/javascript">
		//isFinite()  检测输入是否是一个既非Infinity也非NaN的数字
		console.log(isFinite(Infinity));//false
		console.log(isFinite(-Infinity));//false
		console.log(isFinite(NaN));//false
		console.log(isFinite(123));//true
	</script>
</body>
</html>

十二、prompt输入框

作用：可以接收外部数据的值

需求：定义两个变量a和b，通过框给变量a和b赋值，输出a+b的结果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>prompt输入框</title>
</head>
<body>
	<script type="text/javascript">
		//通过输入框接收外部输入的值，存储给变量
		var a = prompt("请输入变量a的值");
		var b = prompt("请输入变量b的值");

		//输入框接收到的默认为设置为string类型
		console.log(typeof a);
		console.log(typeof b);

		a = parseInt(a)
		b = parseInt(b)
		console.log(a + b);
	</script>
</body>
</html>

十三、常用打印占位符

符号 说明
%d 整数占位
%f 浮点数占位
%s 字符串占位 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用打印占位符</title>
</head>
<body>
	<script type="text/javascript">
		// var name = prompt("输入您的姓名");
		// var age = parseInt(prompt("输入您的年龄"));
		// var height = parseFloat(prompt("输入您的身高"));
		// var weight = parseFloat(prompt("输入您的体重"));
		var name = "sunck";
		var age = 8;
		var height = 173.5;
		var weight = 80;

		console.log(name,"is a good man!他",age,"岁，身高",height,"cm，体重",weight,"kg")
		console.log("%s is a good man!他%d岁，身高%fcm，体重%fkg", name, age, height, weight)
    console.log(`${name} is a good man!他${age}岁，身高${height}cm，体重${weight}kg`);
	</script>
</body>
</html>
需要 登录 才可以提问哦
头像
：
回复