初识JavaScript ———(2)!!!
一、关于JavaScript中的数据类型
虽然在JS中的变量在声明的时候不需要指定数据类型,但是在赋值的时候,每一个数据还是有类型的,所以还是需要学习JS中的数据类型。
JS的数据类型遵循ES规范(ECMAScipt规范),在ES6之后,又基于以下的六种类型之外添加了一种新的类型:Symbol
1.数据类型的分类
(1)原始类型
在JS中的原始的数据类型有:Undefined、Number、String、Boolean、Null
(2)引用类型
在JS中的引用的数据类型有:Object以及Object的子类
JS中有一个运算符叫做typeof,这个运算符可以在程序的运行阶段动态的获取变量的数据类型。以下是typeof运算符的语法格式:
typeof 变量名
typeof运算符的运算结果是以下6个字符串之一,注意字符串都是全部小写。
“undefined” “number” “string”
“boolean” “object” “function”
在JS中比较字符串是否相等使用“==”完成,不是使用equals。
Demo:要求a变量和b变量的数据类型必须是数字,不能是其他变量,也就是限制了变量的数据类型
<html>
<head>
<meta charset="UTF-8">
<title>My_javascript</title>
</head>
<body>
<script type = "text/javascript">
function sum(a,b) {
if(typeof a == "number" && typeof b == "number") {
return a + b;
}
alert(a+","+b+"必须都为数字!");
}
//正确的方式:
var ret = sum(2,3);
alert("ret = "+ret);
//错误的方式:
var ret2 = sum(false,"abc");
alert("ret = "+ret2);
</script>
</body>
</html>
正确的执行结果:
错误的执行结果:
由于代码执行到了alert(a+","+b+"必须都为数字!");
这句,说明sum函数并没有返回值,即ret2也没有接受到返回值,默认为undefined。
Demo:关于typedef的六种类型
<html>
<head>
<meta charset="UTF-8">
<title>My_javascript</title>
</head>
<body>
<script type = "text/javascript">
var i;
alert(i+"的数据类型为"+typeof i);
var num = 3;
alert(num+"的数据类型为"+typeof num);
var str = "abc";
alert(str+"的数据类型为"+typeof str);
var flag = false;
alert(false+"的数据类型为"+typeof false);
var d = null;
alert(d+"的数据类型为"+typeof d);
</script>
</body>
</html>
注:null属于Null类型,但是typeof运算符的结果类型是“object”.
2.Undefined类型
Undefined类型只有一个值,这个值救赎undefined,当一个变量没有手动赋值,系统默认赋值undefined,或者也可以给一个变量手动赋值undefined。
var i; //类型为undefined
var k = undefined; //类型为undefined
alert(i==k); //true
var j = "undefined"; //类型为string
alert(j==k); //false
3.Number类型
(1)NUmber类型有哪些值?
整数、小数、负数、正数、不是数字、无穷大都属于Number类型(0、1、1.2、-1、NaN、Infinity)
关于NaN:表示Not a Number,不是一个数字,但属于Number类型。比如当运算结果应该是一个数字,最后算完不是一个数字的时候,结果就是NaN。
如,Demo:
var a = 100;
var b = "abc";
alert("结果="+a/b);
但是如果做的是加法运算,加号的一边为字符串时,先做字符串的拼接。Demo:
var a = 100;
var b = "abc";
alert("结果="+(a+b));
4.Infinity类型
关于Infinity类型是当除数为0时,结果为无穷大。
alert(10/0);
思考:alert(10/3)=?
5.isNaN函数
用法:isNaN(数据),这个结果为true表示不是一个数字,结果为false表示是一个数字。因为isNaN的意思为:is Not a Number。
再对于之前,效果可和ypeof关键字替换,Demo:
<html>
<head>
<meta charset="UTF-8">
<title>My_javascript</title>
</head>
<body>
<script type = "text/javascript">
function sum(a,b){
if(isNaN(a) || isNaN(b)){
alert("参与运算的必须是数字!!!");
return;
}
return a+b;
}
var ret = sum(3,2);
alert("ret="+ret);
</script>
</body>
</html>
6.parseInt( )函数和parseFloat函数
parseInt( )函数作用:可以将字符串自动转换成数字,并且取整数位。
parseFloat( )函数作用:可以将字符串自动转换成数字
Demo:
alert(parseInt("3.9999"));//3
alert(parseInt(3.9999));//3
alert(parseFloat("3.2")+1);//4.2
7.Math.ceil函数
Math.ceil函数作用:将数字进行向上取整,Math是数学类,数学类中有一个ceil( ),作用是向上取整。
alert(Math.ceil(2.1));
结果就是3
8.Boolean类型
JS中的Boolean类型永远就只有两个值,true and false(和Java一样)。
在Boolean类型中有一个函数叫做:Boolean( ).
语法格式:
Boolean(数据)
其作用是将非布尔类型转换成布尔类型。
Demo1:
var username = "";
if(username) {
alert("欢迎你"+username);
}else {
alert("用户名不能为空!");
}
Demo2:
var username = "";
if(Boolean(username)) {
alert("欢迎你"+username);
}else {
alert("用户名不能为空!");
}
Demo1和Demo2的代码含义是一样的,如果username中包含字符串,经过if语句判断,如果为真,即结果就是true,就会执行第一条语句alert("欢迎你"+username);
但是我们一般采用第一种写法,代码底层会自己变化。
alert(Boolean(1));//true
alert(Boolean(0));//false
alert(Boolean(""));//false
alert(Boolean("abc"));//true
alert(Boolean(null));//false
alert(Boolean(NaN));//false
alert(Boolean(undefined));//false
alert(Boolean(Infinity));//true
总结:Boolean函数中有内容就转换成true,没有内容就是false。
9.Null类型
Null数据类型就一个值,null
注:alert(typeof null);
这个代码的结果是object
10.String数据类型
(1)在JS当中字符串可以使用单引号,也可以使用双引号。
var str1 = "abc";
var str2 = 'abc';
(2)在JS中使用两种方式创建字符串:
var str = "abc";
- 使用JS中内置的支持类(String),
var str2 = new String("abc");
注意,String是一个内置类,可以直接使用,String的父类是Object。
//小string(属于原始类型String)
var x = "abc";
alert(typeof x); //结果为string
//大String(属于Object类型)
var y = new String("abc");
alert(typeof y); //结果为object
- 但是不管小string 还是大String,他们的属性和函数都是通用的。
(3)关于String类型常用的属性和函数?
- 常用属性:
- length 获取字符串长度
- 常用函数:
- indexof 获取指定字符串在当前字符串第一次出现处的下标
- lastIndexof 获取指定字符串在当前字符串最后一次出现处的下标
- replace 替换
- substring 截取子字符串
- toLowerCase 转换成小写
- toUpperCase 转换成大写
- split 拆分字符串
11.Object数据类型
Object是所有类型的超类,自定义的任何类型,默认继承Object。
(1)JS常见的属性
常见的属性:prototype属性(这个属性主要是给类动态的扩展属性和函数)、constructor属性
(2)JS中常见的函数
在JS中有toString、valueOf、tolocaleString函数等等
注:Object当中定义的类默认继承Object,会继承Object类中的所有属性以及函数,也就是说,自己定义的类中也有prototype属性
(3)在JS中如何定义类?又如何new对象?
- 定义类的第一种方式:
function 类名(形参){};
- 定义类的第二种方式:
类名 = function(形参){};
- 创建对象的方式:
new 类名(构造方法名)(形参);
Demo:
function test() {
}
test();//这样用就是一个函数
var obj = new test();//这样用,object就是一个引用,保存内存地址指向堆中的对象。
(4)在JS中类的定义和构造函数的定义是一起完成的。
Demo:
function User(a,b,c) {
//this表示当前对象,User类中有三个属性:name、age、number
this.name = a;
this.age = b;
this.number = c;
}
//创建对象:
var user1 = new User("zhangsan",18,123);
//访问对象的属性:
alert(user1.name); //zhangsan
alert(user1.age); //18
alert(user1.number); //123
二、null、NaN、undefined这三值的区别
1.数据类型不一样
null数据类型为object、NaN数据类型为number、undefined的数据类型为undefined
alert(null==NaN); //false
alert(null==undefined); //true
alert(undefined==NaN); //false
//所以:null和undefined可以等同
注:在JS中有两个比较运算符
- (1)“==”为等同运算符,只判断值是否相等
- 例:
alert(1==true);
这个的结果就是true
- 例:
- (2)“===”为全等运算符,既判断值是否全等,也判断数据类型是否相等
- 例:
alert(1===true);
这个的结果就是false,因为这两个的数据类型不一样
- 例:
好了,本期的博客就到此结束,下一期还会继续讲解JavaScript语言的续集,请大家持续关注,谢谢!!!
既然选择远方,当不负青春,砥砺前行。