一.JavaScript 对象
javascript中的对象分类:
- 自定义对象
- 内置对象
- DOM对象
- BOM对象
1.自定义对象
javascript自身提供的对象,不能满足我们所有需求。通过 JavaScript,您能够定义并创建自己的对象。
当我们需要一种对象,可是javascript没有提供的时候,我们就需要自己动手定义我们需要的对象
创建新对象有两种不同的方法:
- 使用 Object 定义并创建对象。
- 使用函数来定义对象,然后创建新的对象。
1.1使用{}创建对象
访问对象的方法:对象名称.方法名称()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义对象</title>
<script type="text/javascript">
//变量
var shao={
name:"xiaoshao",//属性:属性值
age:20,//属性:属性值
address:"西安",//属性:属性值
getStuinfo:function(){//{}创建对象
return this.name+"今年"+this.age+"岁,来自"+this.address;
}
}
alert(shao.getStuinfo());//访问对象方法
</script>
</head>
<body>
</body>
</html>
访问对象的属性:对象名称.属性名称
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义对象</title>
<script type="text/javascript">
//变量
var shao={
name:"xiaoshao",//属性:属性值
age:20,//属性:属性值
address:"西安",//属性:属性值
getStuinfo:function(){//{}创建对象
return this.name+"今年"+this.age+"岁,来自"+this.address;
}
}
alert(shao.name+","+shao.age+","+shao.address);//访问属性方法1
alert(shao["name"]+","+shao["age"]+","+shao["address"]);//访问属性方法2
</script>
</head>
<body>
</body>
</html>
方法1和方法2都可以访问属性,他们的结果是一样的
1.2.通过构造函数创建对象
访问对象的方法:对象名称.方法名称()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义对象</title>
<script type="text/javascript">
//变量
function shao() {
this.name = "xiaoshao";
this.age = 20;
this.address = "西安";
this.getStuinfo = function() {
return this.name + "今年" + this.age + "岁,来自" + this.address;
}
}
var zhi=new shao();
alert(zhi.getStuinfo()); //访问对象方法
</script>
</head>
<body>
</body>
</html>
访问对象的属性:对象名称.属性名称
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义对象</title>
<script type="text/javascript">
//变量
function shao() {
this.name = "xiaoshao";
this.age = 20;
this.address = "西安";
this.getStuinfo = function() {
return this.name + "今年" + this.age + "岁,来自" + this.address;
}
}
var zhi=new shao();
alert(zhi.name+","+zhi.age+","+zhi.address);//访问属性方法
</script>
</head>
<body>
</body>
</html>
2.内置对象
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。
- 布尔型可以是一个对象。
- 数字型可以是一个对象。
- 字符串也可以是一个对象。
- 日期是一个对象。
- 数学和正则表达式也是对象。
- 数组是一个对象。
- 甚至函数也可以是对象。
二.JavaScript Number (数字)对象
JavaScript 数字
JavaScript 数字可以使用也可以不使用小数点来书写:
var pi=3.14; // 使用小数点
var x=34; // 不使用小数点
极大或极小的数字可通过科学(指数)计数法来写:
var y=123e5; // 12300000
var z=123e-5; // 0.00123
二,八,十六进制
默认情况下,JavaScript 数字为十进制显示。
但是你可以使用 toString() 方法 输出16进制、8进制、2进制。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Number 对象</title>
<script type="text/javascript">
//使用toString([2,8,16])进行10进制数的转换
var a=50;
alert(a.toString(2));//二进制110010
alert(a.toString(8));//八进制62
alert(a.toString(16));//十六进制32
</script>
</head>
<body>
</body>
</html>
二进制
八进制
十六进制
NaN - 非数字值
NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值,来指示其不是数字值。
你可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Number 对象</title>
<script type="text/javascript">
//判断值是否为数字
var x = 100 / "hello";
alert(isNaN(x)); // 返回 true
var y = 100 / "1000";
alert(isNaN(y)); // 返回 false
</script>
</head>
<body>
</body>
</html>
x的值是数字除字母字符串,他就不是数字。
y的值是数字除数字字符串,他就是数字。
无穷大(Infinity)和 无穷小(-Infinity)
当数字运算结果超过了JavaScript所能表示的数字上限(溢出),结果为一个特殊的无穷大(infinity)值,在JavaScript中以Infinity表示。
同样地,当负数的值超过了JavaScript所能表示的负数范围,结果为负无穷大,在JavaScript中以-Infinity表示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Number 对象</title>
<script type="text/javascript">
//无穷大(Infinity)无穷小(-Infinity)
var a=15/0;
var b=-15/0;
alert(a);//Infinity
alert(b);//-Infinity
</script>
</head>
<body>
</body>
</html>
a的值无穷大
b的值无穷小
JavaScript中最大值和最小值
Number.MAX_VALUE----最大值
Number.MIN_VALUE----最小值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Number 对象</title>
<script type="text/javascript">
//最大值Number.MAX_VALUE,最小值Number.MIN_VALUE
alert(Number.MAX_VALUE); //1.7976931348623157e+308
alert(Number.MIN_VALUE); //5e-324
</script>
</head>
<body>
</body>
</html>
最大值
最小值
判断数字类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Number 对象</title>
<script type="text/javascript">
//判断数字类型
var a=100;
var shao=new Number(100);
alert(typeof a);//Number
alert(typeof shao);//object
</script>
</head>
<body>
</body>
</html>
a为数字型
shao为对象型
字符串的转换
使用Number.parseFloat()将字符串转换成浮点型
使用Number.parseInt()将字符串转换成整数型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Number 对象</title>
<script type="text/javascript">
//字符串的转换
//Number.parseFloat() 将字符串转换成浮点数,和全局方法 parseFloat() 作用一致。
var str1 = "12.5";
var number1 = Number.parseFloat(str1);
var number1 = parseFloat(str1);
alert(typeof number1); //number
//Number.parseInt() 将字符串转换成整型数字,和全局方法 parseInt() 作用一致。
var str2="1200";
var number2=Number.parseInt(str2);
var number2=parseInt(str2);
alert(typeof number2); //number
</script>
</head>
<body>
</body>
</html>
转化为浮点数型或转化为整数型
toFixed()保留小数后位数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Number 对象</title>
<script type="text/javascript">
//保留指定的小数位数
var a=1.123456789;
var b=10;
alert(a.toFixed(2));
alert(b.toFixed(2));
</script>
</head>
<body>
</body>
</html>
上述为常用的,下面还有还有其他
属性:
属性 | 描述 |
Number.MAX_VALUE | 最大值 |
Number.MIN_VALUE | 最小值 |
Number.NaN | 非数字 |
Number.NEGATIVE_INFINITY | 负无穷,在溢出时返回 |
Number.POSITIVE_INFINITY | 正无穷,在溢出时返回 |
Number.EPSILON | 表示 1 和比最接近 1 且大于 1 的最小 Number 之间的差别 |
Number.MIN_SAFE_INTEGER | 最小安全整数。 |
Number.MAX_SAFE_INTEGER | 最大安全整数。 |
方法:
方法 | 描述 |
Number.parseFloat() | 将字符串转换成浮点数,和全局方法 parseFloat() 作用一致。 |
Number.parseInt() | 将字符串转换成整型数字,和全局方法 parseInt() 作用一致。 |
Number.isFinite() | 判断传递的参数是否为有限数字。 |
Number.isInteger() | 判断传递的参数是否为整数。 |
Number.isNaN() | 判断传递的参数是否为 isNaN()。 |
Number.isSafeInteger() | 判断传递的参数是否为安全整数。 |
toExponential() | 返回一个数字的指数形式的字符串,如:1.23e+2 |
toFixed() | 返回指定小数位数的表示形式。 var a=123; b=a.toFixed(2); // b="123.00" |
toPrecision() | 返回一个指定精度的数字。如下例子中,a=123 中,3会由于精度限制消失: var a=123; b=a.toPrecision(2); // b="1.2e+2" |
三.JavaScript String(字符串)对象
一个字符串用于存储一系列字符就像 "Hello".
一个字符串可以使用单引号或双引号:
单引号:var car='Hello';
双引号:var car="Hello";
字符串的长度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串对象</title>
<script type="text/javascript">
//创建对象
var str=new String("my name is xiaoshao");
alert(str.length);//字符串长度19
</script>
</head>
<body>
</body>
</html>
在字符串中查找字符串
字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置。
lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串对象</title>
<script type="text/javascript">
//创建对象
var str=new String("my name is xiaoshao");
//字符首次出现在那个位置
alert(str.indexOf("a"));//4
//字符最后一次出现在那个位置
alert(str.lastIndexOf("h"));//16
</script>
</head>
<body>
</body>
</html>
a首次出现的位置
h最后一次出现的位置
内容匹配
查找字符串中特定的字符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串对象</title>
<script type="text/javascript">
//创建对象
var str=new String("my name is xiaoshao");
//查找字符串中特定的字符
alert(str.match("is"));//有则放回字符is
alert(str.match("apple"));//没有null
</script>
</head>
<body>
</body>
</html>
有则返回字符
没有则返回空(null)
替换【旧换新】
使用replace() 方法在字符串中用某些字符替换另一些字符。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串对象</title>
<script type="text/javascript">
//创建对象
var str=new String("my name is xiaoshao");
//替换字符【旧变新】
alert(str.replace("xiaoshao","xiaozhi"));//my name is xiaozhi[xiaozhi替换xiaoshao]
</script>
</head>
<body>
</body>
</html>
大小写转换
toUpperCase()小转大
toLowerCase()大转小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串对象</title>
<script type="text/javascript">
//创建对象
var str1=new String("l love you");
var str2=new String("HTML");
//字符大小写转换
alert(str1.toUpperCase());//L LOVE YOU小转大
alert(str2.toLowerCase());//html大转小
</script>
</head>
<body>
</body>
</html>
字符串转为数组
字符串使用split()函数转为数组:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串对象</title>
<script type="text/javascript">
//创建对象
var str=new String("my name is xiaoshao");
//使字符串变成数组,使用" "来决定数组多少
var xin=str.split(" ");
//循环语句
for(var i=0;i<xin.length;i++){
//alert(xin[0]);//my
alert(xin[1]);//name
//alert(xin[2]);//is
//alert(xin[3]);//xiaoshao
alert(xin[4]);//undefined
}
</script>
</head>
<body>
</body>
</html>
数组从0开始计数
超出数组的范围则未定义(undefined)
返回指定位置的字符
charAt()指定的字符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串对象</title>
<script type="text/javascript">
//创建对象
var str=new String("my name is xiaoshao");
//返回在指定位置的字符
alert(str.charAt("9"));//s
</script>
</head>
<body>
</body>
</html>
查看是否为指定的字符开头和结尾
startsWith()查看开头
endsWith()查看结尾
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串对象</title>
<script type="text/javascript">
//创建对象
var str=new String("my name is xiaoshao");
//查看是否为指定的字符开头
alert(str.startsWith("m"));//true
//查看是否为指定的字符结尾
alert(str.endsWith("m"));//false
</script>
</head>
<body>
</body>
</html>
是指定的为true,不是为false
substr提取从起始位指定的数目字符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串对象</title>
<script type="text/javascript">
//创建对象
var str1=new String("l love you");
//substr(起始索引号,指定数目)
alert(str1.substr(2,4));//love
//substring(起始索引号,结束索引号)
alert(str1.substring(2,str1.length));//love you
</script>
</head>
<body>
</body>
</html>
起始索引号到指定数目
起始索引号到结束索引号
删除空白处
删除字符串两边的空白,字符中间的不删除。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串对象</title>
<script type="text/javascript">
//创建对象
var str=new String(" my name is xiaoshao ");
alert(str.length);//字符串长度23
var str1=str.trim();//删除字符串两边的空白
alert(str1.length);//字符串长度19
</script>
</head>
<body>
</body>
</html>
刚开始前后两边有空隙
使用trim()清楚两边的空白后
includes()
includes()查看字符串中是否包含指定的子字符串
有则true,无则false
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串对象</title>
<script type="text/javascript">
//创建对象
var str=new String("my name is xiaoshao");
alert(str.includes("name"));//true
alert(str.includes("xiaozhi"));//false
</script>
</head>
<body>
</body>
</html>
字符串中的特殊符号:
代码 | 输出 |
\' | 单引号 |
\" | 双引号 |
\\ | 斜杆 |
\n | 换行 |
\r | 回车 |
\t | tab |
\b | 空格 |
\f | 换页 |
其他属性:
属性 | 描述 |
对创建该对象的函数的引用 | |
字符串的长度 | |
允许您向对象添加属性和方法 |
其他方法:
方法 | 描述 |
返回在指定位置的字符。 | |
返回在指定的位置的字符的 Unicode 编码。 | |
连接两个或更多字符串,并返回新的字符串。 | |
将 Unicode 编码转为字符。 | |
返回某个指定的字符串值在字符串中首次出现的位置。 | |
查找字符串中是否包含指定的子字符串。 | |
从后向前搜索字符串,并从起始位置(0)开始计算返回字符串最后出现的位置。 | |
查找找到一个或多个正则表达式的匹配。 | |
复制字符串指定次数,并将它们连接在一起返回。 | |
在字符串中查找匹配的子串, 并替换与正则表达式匹配的子串。 | |
查找与正则表达式相匹配的值。 | |
提取字符串的片断,并在新的字符串中返回被提取的部分。 | |
把字符串分割为字符串数组。 | |
查看字符串是否以指定的子字符串开头。 | |
从起始索引号提取字符串中指定数目的字符。 | |
提取字符串中两个指定的索引号之间的字符。 | |
把字符串转换为小写。 | |
把字符串转换为大写。 | |
去除字符串两边的空白 | |
根据本地主机的语言环境把字符串转换为小写。 | |
根据本地主机的语言环境把字符串转换为大写。 | |
返回某个字符串对象的原始值。 | |
返回一个字符串。 |
四.JavaScript Date(日期) 对象
日期对象用于处理日期和时间。
创建日期
创建日期有四种方式:
1.new Date();
得到的是当前时间。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Data 对象</title>
<script type="text/javascript">
//得到当前时间
var date=new Date();
alert(date);//Fri Sep 03 2021 19:03:23 GMT+0800 (中国标准时间)
</script>
</head>
<body>
</body>
</html>
2.new Date(value);
通过毫米数得到的时间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Data 对象</title>
<script type="text/javascript">
//通过赋值毫米数得到时间
var date=new Date(1235749846897);
alert(date);//Fri Feb 27 2009 23:50:46 GMT+0800 (中国标准时间)
</script>
</head>
<body>
</body>
</html>
3.new Date(dateString);
指定一个时间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Data 对象</title>
<script type="text/javascript">
//输出一个时间,让他显示出来
var date=new Date("2001/3/27 03:18");
alert(date);//Tue Mar 27 2001 03:18:00 GMT+0800 (中国标准时间)
</script>
</head>
<body>
</body>
</html>
4.new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
通过指定年月日时分秒的数字值得到时间【月份要减一】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Data 对象</title>
<script type="text/javascript">
//通过指定年月日时分秒的数字值创建日期对象,月份减1
var date=new Date("2021","07","10","08","30");
alert(date);//Tue Aug 10 2021 08:30:00 GMT+0800 (中国标准时间)
</script>
</head>
<body>
</body>
</html>
设置日期
得到当前日期:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Data 对象</title>
<script type="text/javascript">
//常用的创建时间日期的方法
var date1 = new Date();
var fullYear = date1.getFullYear();
var month = date1.getMonth();
var date = date1.getDate();
var hours = date1.getHours();
var minutes = date1.getMinutes();
var seconds = date1.getSeconds();
var day = date1.getDay();
alert("现在是"+fullYear + "年" + (month + 1) + "月" + date + "日 " + hours + "时" + minutes + "分" + seconds + "秒 星期" + day);
</script>
</head>
<body>
</body>
</html>
修改当前日期:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Data 对象</title>
<script type="text/javascript">
//修改时间日期
var date1 = new Date();
date1.setFullYear("2000");
var fullYear = date1.getFullYear();
date1.setMonth("4");
var month = date1.getMonth();
date1.setDate("1");
var date = date1.getDate();
date1.setHours("03");
var hours = date1.getHours();
date1.setMinutes("18");
var minutes = date1.getMinutes();
date1.setSeconds("55");
var seconds = date1.getSeconds();
date1.getDay("1");
var day = date1.getDay();
alert("我出生于"+fullYear + "年" + (month + 1) + "月" + date + "日 " + hours + "时" + minutes + "分" + seconds + "秒 星期" + day);
</script>
</head>
<body>
</body>
</html>
毫秒数
测试一下从1970年到现在的毫秒数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Data 对象</title>
<script type="text/javascript">
//从1970年到现在的毫秒数
alert(new Date().getTime()); //毫秒数
</script>
</head>
<body>
</body>
</html>
其他属性:
属性 | 描述 |
返回对创建此对象的 Date 函数的引用。 | |
使您有能力向对象添加属性和方法。 |
其他方法:
方法 | 描述 |
从 Date 对象返回一个月中的某一天 (1 ~ 31)。 | |
从 Date 对象返回一周中的某一天 (0 ~ 6)。 | |
从 Date 对象以四位数字返回年份。 | |
返回 Date 对象的小时 (0 ~ 23)。 | |
返回 Date 对象的毫秒(0 ~ 999)。 | |
返回 Date 对象的分钟 (0 ~ 59)。 | |
从 Date 对象返回月份 (0 ~ 11)。 | |
返回 Date 对象的秒数 (0 ~ 59)。 | |
返回 1970 年 1 月 1 日至今的毫秒数。 | |
返回本地时间与格林威治标准时间 (GMT) 的分钟差。 | |
根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。 | |
根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。 | |
根据世界时从 Date 对象返回四位数的年份。 | |
根据世界时返回 Date 对象的小时 (0 ~ 23)。 | |
根据世界时返回 Date 对象的毫秒(0 ~ 999)。 | |
根据世界时返回 Date 对象的分钟 (0 ~ 59)。 | |
根据世界时从 Date 对象返回月份 (0 ~ 11)。 | |
根据世界时返回 Date 对象的秒钟 (0 ~ 59)。 | |
getYear() | 已废弃。 请使用 getFullYear() 方法代替。 |
返回1970年1月1日午夜到指定日期(字符串)的毫秒数。 | |
设置 Date 对象中月的某一天 (1 ~ 31)。 | |
设置 Date 对象中的年份(四位数字)。 | |
设置 Date 对象中的小时 (0 ~ 23)。 | |
设置 Date 对象中的毫秒 (0 ~ 999)。 | |
设置 Date 对象中的分钟 (0 ~ 59)。 | |
设置 Date 对象中月份 (0 ~ 11)。 | |
设置 Date 对象中的秒钟 (0 ~ 59)。 | |
setTime() 方法以毫秒设置 Date 对象。 | |
根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。 | |
根据世界时设置 Date 对象中的年份(四位数字)。 | |
根据世界时设置 Date 对象中的小时 (0 ~ 23)。 | |
根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。 | |
根据世界时设置 Date 对象中的分钟 (0 ~ 59)。 | |
根据世界时设置 Date 对象中的月份 (0 ~ 11)。 | |
setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。 | |
setYear() | 已废弃。请使用 setFullYear() 方法代替。 |
把 Date 对象的日期部分转换为字符串。 | |
toGMTString() | 已废弃。请使用 toUTCString() 方法代替。 |
使用 ISO 标准返回字符串的日期格式。 | |
以 JSON 数据格式返回日期字符串。 | |
根据本地时间格式,把 Date 对象的日期部分转换为字符串。 | |
根据本地时间格式,把 Date 对象的时间部分转换为字符串。 | |
根据本地时间格式,把 Date 对象转换为字符串。 | |
把 Date 对象转换为字符串。 | |
把 Date 对象的时间部分转换为字符串。 | |
根据世界时,把 Date 对象转换为字符串。 实例: var today = new Date();var UTCstring = today.toUTCString(); | |
根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。 | |
返回 Date 对象的原始值。 |