JS-03-数据类型

1.JS中有哪些数据类型？

虽然JS中的变量在声明时不需要指定数据类型，但是在赋值时，每一个数据还是有类型的，所以这里也需要学习一下JS中的数据类型。

JS中数据类型分为原始类型和引用类型。

原始类型：

Undefined
Number
String
Boolean
Null

引用类型：

Object以及Object的子类

ES规范(ECMAScript规范)，在ES6之后，又添加了一种新的类型：Symbol

2.typeof运算符

2.1typeof运算符的作用

JS种有一个运算符叫做typeof，这个运算符可以在程序运行阶段动态地获取变量的数据类型。

2.2typeof运算符的语法格式

typeof 变量名

2.3typeof运算符的运算结果

typeof运算符的运算结果是以下6个运算符之一。(注意：字符串都是小写)

"Undefined"
"number"
"String"
"boolean"
"object"
"function"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JStypeof运算符</title>
	</head>
	<body>
		<script type="text/javascript">
			var a = 10;
			alert("a = " + typeof a);//number
			var b = "abc";
			alert("b = " + typeof b);//string
			var c = true;
			alert("c = " + typeof c);//boolean
			var d = null;
			alert("d = " + typeof d);//object
			var e;
			alert("e = " + typeof e);//undefined
			var f = new Object();
			alert("f = " + typeof f);//object
			function g() {
				var wc = "wc";
			}
			alert("g = " + typeof g);//function
		</script>
	</body>
</html>

2.4在JS种比较字符串是否相等使用"=="，没有equals

下面在脚本块中编写一个函数，要求传入的参数只能为Number类型：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS比较字符串</title>
	</head>
	<body>
		<script type="text/javascript">
			function fun1(a,b) {
				if(typeof a == "number" || typeof b == "number") {
					return a + b;
				}
				alert(a + "," + b + "必须为数字");
			}
			var value1 = fun1(true,"abc");
			alert(value1);//undefined
		</script>
	</body>
</html>

3.Undefined

Undefined类型只有一个值，这个值就是undefined。

当一个变量没有手动赋值，系统默认会赋值undefined。

也可以手动给一个变量赋值undefined。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a;
			var b = undefined;
			alert(a == b);//true
			
			var c = "undefined";
			alert(a == c);//false
		</script>
	</body>
</html>

4.Number

4.1Number类型包括哪些值？

-1、1、3.14、... NaN、Infinity

整数、小数、正数、负数、不是数字、无穷大都属于Number类型。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Number</title>
	</head>
	<body>
		<script type="text/javascript">
			var n1 = 1;
			alert("1属于" + typeof n1);
			var n2 = -1;
			alert("-1属于" + typeof n2);
			var n3 = 3.14;
			alert("3.14属于" + typeof n3);
			var n4 = NaN;
			alert("NaN属于" + typeof n4);
			var n5 = Infinity;
			alert("Infinity属于" + typeof n5);
		</script>
	</body>
</html>

4.2关于NaN

NaN表示Not a Number，不是一个数字，但属于Number类型。

什么情况下结果是NaN呢？

运算结果本该是一个数字，但最终结果不是一个数字，此时结果就是NaN。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Number</title>
	</head>
	<body>
		<script type="text/javascript">
			var a = 10;
			var b = "abc";
			alert(a / b);
		</script>
	</body>
</html>

4.3关于Infinity

当除数为0时，结果为无穷大。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Number</title>
	</head>
	<body>
		<script type="text/javascript">
			//Infinity
			var a = 10;
			var b = 0;
			alert(a / b);//当除数为0时，结果为无穷大：Infinity
		</script>
	</body>
</html>

4.4关于10除以3的结果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Number</title>
	</head>
	<body>
		<script type="text/javascript">
			// 10除以3
			alert(10/3);//3.3333333333333335
		</script>
	</body>
</html>

4.5关于isNaN函数

isNaN：is Not a Number

用法：isNaN(数据)

结果是true就表示不是一个数字，结果是false就表示是一个数字。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Number</title>
	</head>
	<body>
		<script type="text/javascript">
			//isNaN函数
			function sum(a,b) {
				if(isNaN(a) || isNaN(b)) {
					alert("两个参数必须都是数字")
					return;
				}
				return a + b;
			}
			var result = sum(10,"abc");
			alert(result);
		</script>
	</body>
</html>

4.6关于parseInt()函数

两个作用：

将字符串转换为数字
取整

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Number</title>
	</head>
	<body>
		<script type="text/javascript">
			//parseInt()函数
			var a = parseInt("3.8888");
			alert(typeof a);//number
			alert(a);//3
			alert(parseInt(3.8888));//3
		</script>
	</body>
</html>

4.7关于parseFloat()函数

两个作用：

将字符串转换为数字
保留小数格式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Number</title>
	</head>
	<body>
		<script type="text/javascript">
			//parseFloat()函数
			var a = parseFloat("3.8888");
			alert(typeof a);//number
			alert(a);//3.8888
			alert(parseFloat(3.8888));//3.8888
		</script>
	</body>
</html>

4.8关于Math.ceil()函数

Math是数学类，数学类中有一个函数叫做ceil()，作用有两个：

将字符串转换为数字
是向上取整

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Number</title>
	</head>
	<body>
		<script type="text/javascript">
			//Math.ceil()函数
			var a = Math.ceil("3.2");
			alert(typeof a);//number
			alert(a);//4
			alert(Math.ceil(4.1));//5
		</script>
	</body>
</html>

5.Boolean

5.1JS中的布尔类型

JS中的布尔类型永远都只有两个值：true 和 false

5.2Boolean()函数

在Boolean类型中有一个函数：Boolean()

作用：将非布尔类型的函数转换为布尔类型。

语法格式：Boolean(数据)

下面编写代码，实现判断传入的参数是否为空：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Boolean</title>
	</head>
	<body>
		<script type="text/javascript">
			
			//if括号里只能是true或者false
			//在JS中，如果if括号里填的不是布尔类型，那么会自动调用Boolean()函数
			//如果name"有"数据，那么就会转换为true
			//如果name里"没有"数据，那么就会转换为false
			function username(name) {
				if(name) {//if(Boolean(name))
					return "Welcome! " + name;
				} else {
					return "名字不可为空";
				}
			}
			alert(username("张三"));//name中有数据
			alert(username());//name中没有数据
		</script>
	</body>
</html>

在JS中，在if等必须用布尔类型作判断的语句中，如果在后面括号里填的不是布尔类型，那么会自动调用Boolean()函数，将括号里的数据转换为布尔类型。如果数据为“空”，则转换为false，如果数据不为“空”，转换为true。

5.3验证Boolean()函数会将哪些数据转为false，哪些数据转为true

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Boolean</title>
	</head>
	<body>
		<script type="text/javascript">
			alert("1--->" + Boolean(1));//1--->true
			alert("0--->" + Boolean(0));//0--->false
			alert("abc--->" + Boolean("abc"));//abc--->true
			alert("“”--->" + Boolean(""));//“”--->false
			alert("null--->" + Boolean(null));//null--->false
			alert("NaN--->" + Boolean(NaN));//NaN--->false
			alert("undefined--->" + Boolean(undefined));//undefined--->false
			alert("Infinity--->" + Boolean(Infinity));//Infinity--->true
		</script>
	</body>
</html>

规律：如果“有”，就转为true；如果“没有”，则转为false。

6.Null

Null类型只有一个值：null

但是在使用typeof判断时，会判断成object

alert(typeof null);//"Object"

7.String

7.1在JS中字符串可以使用双引号，也可以使用单引号

var s1 = "abc";
var s2 = 'abc';

7.2在JS中创建字符串对象

有两种方式：

var s1 = "abc";
var s2 = new String("abc"); (使用JS内置的支持类String)

需要注意的是：String是一个内置的类，可以直接用，String的父类是Object。

既然Object及其所有子类都属于Object类型，那么这里的new String("abc")是属于String类型还是Object类型？

代码验证：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>String</title>
	</head>
	<body>
		<script type="text/javascript">
			var s1 = "abc";//小string(属于原始类型String)
			alert("s1 : " + typeof s1);//s1 : string
            
			var s2 = new String("abc");//大String(属于Object类型)
			alert("s2 : " + typeof s2);//s2 : object
		</script>
	</body>
</html>

由结果来看：

通过var s1 = "abc"【小string】方式创建的字符串对象属于String类型，
通过var s2 = new String("abc")【大String】方式创建的字符串对象属于Object类型。

但无论是小string还是大String，它们的属性和函数都是通用的。

7.3关于String函数的常用属性和函数

7.3.1常用属性

length：获取当前字符串的长度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>String</title>
	</head>
	<body>
		<script type="text/javascript">
			//常用属性
			var s1 = "abc";
			var s2 = new String("abc");
			alert("s1的长度为：" + s1.length);//3
			alert("s2的长度为：" + s2.length);//3
		</script>
	</body>
</html>

7.3.2常用函数

indexOf()：获取指定字符串在当前字符串中第一次出现处的索引。
lastIndexOf()：获取指定字符串在当前字符串中最后一次出现处的索引。
replace()：替换指定字符。
substr()：截取子字符串。
substring()：截取子字符串。
toLowerCase()：转换小写。
toUpperCase()：转换大写。
split()：拆分字符串。

1)indexOf()&lastIndexOf()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>String</title>
	</head>
	<body>
		<script type="text/javascript">
			var s1 = "jdbc:mysql://127.0.0.1:3306/tsccg";
            //分别找出冒号在字符串中第一次出现的下标和最后一次出现的下标
			alert(s1.indexOf(":"));//4
			alert(s1.lastIndexOf(":"));//22
            alert(s1.indexOf("http"))//-1 如果查询不到指定字符串会返回-1
            //判断当前字符串中是否包含某一个字符串
			alert("http://www.baidu.com".indexOf("https") > 0 ? "包含" : "不包含")
		</script>
	</body>
</html>

2)replace()

将字符串里的"%"替换为"&"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>String</title>
	</head>
	<body>
		<script type="text/javascript">
			//replace()
			var s2 = "username=zhangsan%password=123%age=22";
			alert(s2.replace("%","&"));//username=zhangsan&password=123%age=22
		</script>
	</body>
</html>

由结果来看只替换了第一个"%"，若想全部替换需要使用正则表达式，目前略。

3)substr()&substring()

substr()和substring()都能够截取子字符串。

substr()和substring()的区别是：

substr(startIndex,length)：startIndex代表从下标为startIndex的位置开始截取字符串(下标从0开始)，length代表向后截取字符串的长度。前闭后闭。
substring(startIndex,endIndex)：startIndex代表从下标为startIndex的位置开始截取字符串，endIndex代表截取到下标为endIndex的位置结束，不包含endIndex。前闭后开。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>String</title>
	</head>
	<body>
		<script type="text/javascript">
			//substr&substring
            //substr(startIndex,length)
			alert("0123456".substr(2,4));//2345
            //substring(startIndex,endIndex)注意：不包含endIndex
			alert("0123456".substring(2,4));//23
		</script>
	</body>
</html>

4)toLowerCase()&toUpperCase()

toLowerCase()：将字符串转换为小写。

toUpperCase()：将字符串转换为大写。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>String</title>
	</head>
	<body>
		<script type="text/javascript">
			//toLowerCase()&toUpperCase()
			alert("ABCD".toLowerCase());
			alert("abcd".toUpperCase());
		</script>
	</body>
</html>

8.Object

8.1Object概述

Object类型是JS所有类型的超类，自定义的任何类型都默认继承Object。

8.2Object类中的属性和函数

属性：

prototype属性(常用的，非常重要)，作用是给类动态的扩展属性和函数。
constructor属性

函数：

toString()
valueof()
toLocaleString()

在JS中定义的类默认继承Object，会继承Object类中所有的属性和函数。

也就是说，自己定义的类中也有prototype属性。

8.3在JS中定义类

8.3.1定义类的语法

第一种：

function 类名(形参) {
    
}

第二种：

类名 = function(形参) {
    
}

8.3.3一个类的定义，同时也是一个函数的定义

在JS中定义类的方式和定义函数的方式一样，根据不同的调用方式，既可以当作类也可以当作方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object</title>
</head>
<body>
    <script type="text/javascript">
        //定义Student类
        function Student() {
            alert("Hello");
        }
        //当作方法来调用
        Student();
        //当作类来创建对象
        var stu = new Student();
    </script>
</body>
</html>

8.4在JS中创建对象

格式：

var 对象名 = new 构造方法名(实参); //构造方法名就是类名

在JS中类的定义和构造函数的定义是放到一起来完成的，在一个类被定义时，该类的构造函数也被定义了。

所以在创建对象时可以直接赋值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object</title>
</head>
<body>
    <script type="text/javascript">
        function User(username,password) {
            //声明属性，this代表当前对象
            this.username = username;
            this.password = password;
        }
        //创建对象
        var u1 = new User("张三",123);
        //创建第二个对象
        var u2 = new User("李四",456);
    </script>
</body>
</html>

8.5访问类中的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object</title>
</head>
<body>
    <script type="text/javascript">
        function User(username,password) {
            //声明属性，this代表当前对象
            this.username = username;
            this.password = password;
        }
        //创建对象
        var u1 = new User("张三",123);
        //创建第二个对象
        var u2 = new User("李四",456);
        //访问对象中的属性
        alert(u1.username + "," +  u1.password);
        alert(u2.username + "," +  u2.password);
    </script>
</body>
</html>

另一种方式访问对象的属性：

alert(u1["username"] + "," + u1["password"]);
alert(u2["username"] + "," + u2["password"]);

8.6在类中定义函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object02</title>
</head>
<body>
    <script type="text/javascript">
        function Animals(name,age,type) {
            this.name = name;
            this.age = age;
            this.type = type;
            //定义函数
            this.getType = function() {
                return this.type;
            }
        }
        //创建对象a1
        var a1 = new Animals("大黄",2,"中华田园犬");
        //调用对象中的函数
        alert(a1.getType());//中华田园犬
    </script>
</body>
</html>

8.7通过prototype属性来给类动态扩展属性或函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object02</title>
</head>
<body>
    <script type="text/javascript">
        function Animals(name,age,type) {
            this.name = name;
            this.age = age;
            this.type = type;
            //定义函数
            this.getType = function() {
                return this.type;
            }
        }
        //创建对象a1
        var a1 = new Animals("大黄",2,"中华田园犬");
        //调用对象中的函数
        alert(a1.getType());
        //扩展函数
        Animals.prototype.getName = function() {
            return this.name;
        }
        //调用后期扩展的函数
        alert(a1.getName());//大黄
    </script>
</body>
</html>

8.8可以给源码中的类扩展函数和属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object02</title>
</head>
<body>
    <script type="text/javascript">
       String.prototype.doSome = function() {
           alert("Do some thing");
       }
       "abc".doSome();
    </script>
</body>
</html>

8.9对比java定义类以及创建对象

java怎么定义类，怎么创建对象？（强类型）

public class User{
    private String username;
    private String password;
    User() {
        
    }
    User(String username,String password) {
        this.username = username;
        this.password = password;
    }
}
User user1 = new User();
User user2 = new User("张三",123);

JS怎么定义类，怎么创建对象？（弱类型）

User = function(username,password) {
    this.username = username;
    this.password = password;
}
var user1 = new User();
var user2 = new User("张三");
var user3 = new User("张三",123);

posted @ 2021-08-02 22:37 TSCCG 阅读(78) 评论(0) 收藏举报

刷新页面返回顶部

TSCCG

JS-03-数据类型

JS-03-数据类型

1.JS中有哪些数据类型？

2.typeof运算符

2.1typeof运算符的作用

2.2typeof运算符的语法格式

2.3typeof运算符的运算结果

2.4在JS种比较字符串是否相等使用"=="，没有equals

3.Undefined

4.Number

4.1Number类型包括哪些值？

4.2关于NaN

4.3关于Infinity

4.4关于10除以3的结果

4.5关于isNaN函数

4.6关于parseInt()函数

4.7关于parseFloat()函数

4.8关于Math.ceil()函数

5.Boolean

5.1JS中的布尔类型

5.2Boolean()函数

5.3验证Boolean()函数会将哪些数据转为false，哪些数据转为true

6.Null

7.String

7.1在JS中字符串可以使用双引号，也可以使用单引号

7.2在JS中创建字符串对象

7.3关于String函数的常用属性和函数

7.3.1常用属性

7.3.2常用函数

8.Object

8.1Object概述

8.2Object类中的属性和函数

8.3在JS中定义类

8.3.1定义类的语法

8.3.3一个类的定义，同时也是一个函数的定义

8.4在JS中创建对象

8.5访问类中的属性

8.6在类中定义函数

8.7通过prototype属性来给类动态扩展属性或函数

8.8可以给源码中的类扩展函数和属性

8.9对比java定义类以及创建对象

公告