JavaScript中的对象
一、JavaScript中的常用对象
JavaScript是基于对象的脚本语言 ，有类和对象的概念，但是没有封装、继承、多态,JavaScript中有一些浏览器直接识别并使用的对象,常见的对象有Array,String对象,Math对象,Number对象,Date对象等等.
1.String
⑴.常用方法
| 方法 | 描述 |
|---|---|
| charAt() | 返回在指定位置的字符。 |
| charCodeAt() | 返回在指定的位置的字符的 Unicode 编码。 |
| concat() | 连接两个或更多字符串，并返回新的字符串。 |
| endsWith() | 判断当前字符串是否是以指定的子字符串结尾的（区分大小写）。 |
| fromCharCode() | 将 Unicode 编码转为字符。 |
| indexOf() | 返回某个指定的字符串值在字符串中首次出现的位置。 |
| includes() | 查找字符串中是否包含指定的子字符串。 |
| lastIndexOf() | 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。 |
| match() | 查找找到一个或多个正则表达式的匹配。 |
| repeat() | 复制字符串指定次数，并将它们连接在一起返回。 |
| replace() | 在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。 |
| replaceAll() | 在字符串中查找匹配的子串，并替换与正则表达式匹配的所有子串。 |
| search() | 查找与正则表达式相匹配的值。 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分。 |
| split() | 把字符串分割为字符串数组。 |
| startsWith() | 查看字符串是否以指定的子字符串开头。 |
| substr() | 从起始索引号提取字符串中指定数目的字符。 |
| substring() | 提取字符串中两个指定的索引号之间的字符。 |
| toLowerCase() | 把字符串转换为小写。 |
| toUpperCase() | 把字符串转换为大写。 |
| trim() | 去除字符串两边的空白。 |
| toLocaleLowerCase() | 根据本地主机的语言环境把字符串转换为小写。 |
| toLocaleUpperCase() | 根据本地主机的语言环境把字符串转换为大写。 |
| valueOf() | 返回某个字符串对象的原始值。 |
| toString() | 返回一个字符串。 |
⑵.实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串</title>
<script type="text/javascript">
//根据索引获取字符串的值
/* var str1 = 'helloworld';
var c = str1.charAt(5);
console.log(c) */
//字符串拼接
/* var a = 'he';
var b = 'llo';
var c = 'world';
var d = a.concat(b,c); //将字符串拼接 赋值给变量d
console.log(d) */
//字符串赋值
/* var e = 'helloworld';
var f = e.repeat(3);//将变量e的值赋值3次
console.log(f) */
//截取字符串
var e = 'helloworld';
// var n = e.substr(1,4) //从下标为1的位置开始，连续开始截取4个字符
// console.log(n)
//指定区间截取
var e = 'helloworld';
var i = e.substring(1,4) //截取从下标1的位置开始到4的位置结束，左闭右开
console.log(i)
//获取字符串的长度
console.log(e.length)
// JS中非常特殊的一个函数,可以将一段字符串当做JS代码来执行
// 将字符串内容解析称JS代码并运行
var x = "var j = 1000";
eval(x);
console.log(j)
</script>
</head>
<body>
</body>
</html>
2.Number
⑴.Number 对象属性
| 属性 | 描述 |
|---|---|
| constructor | 返回对创建此对象的 Number 函数的引用。 |
| MAX_VALUE | 可表示的最大的数。 |
| MIN_VALUE | 可表示的最小的数。 |
| NEGATIVE_INFINITY | 负无穷大，溢出时返回该值。 |
| NaN | 非数字值。 |
| POSITIVE_INFINITY | 正无穷大，溢出时返回该值。 |
| prototype | 允许您可以向对象添加属性和方法。 |
⑵.Number 对象方法
| 方法 | 描述 |
|---|---|
| isFinite | 检测指定参数是否为无穷大。 |
| toExponential(x) | 把对象的值转换为指数计数法。 |
| toFixed(x) | 把数字转换为字符串，结果的小数点后有指定位数的数字。 |
| toPrecision(x) | 把数字格式化为指定的长度。 |
| toString() | 把数字转换为字符串，使用指定的基数。 |
| valueOf() | 返回一个 Number 对象的基本数字值。 |
⑶.实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数字</title>
<script type="text/javascript">
/* console.log(Number.MAX_VALUE)
console.log(Number.MIN_VALUE)
console.log(Number.MAX_SAFE_INTEGER)
console.log(Number.MIN_SAFE_INTEGER)
console.log(Number.parseFloat('3.14')+5) //将字符串转换为浮点数，然后相加
console.log(Number.parseInt('3.14')+6) //将字符串转换为整数，然后相加
*/
var i = 10%0 //NaN 取余
var j = 10/0 //Infinity 除法
console.log(i)
console.log(j)
console.log(Number.isNaN(i)) //true 判断i是不是NaN
console.log(Number.isFinite(j)) // false 判断传递的参数是否为有限数字。
console.log(Number.isFinite(j))
console.log(Number.isSafeInteger(345)) //判断传递的参数是否为安全整数。
</script>
</head>
<body>
</body>
</html>
3.Math 对象
⑴.Math 对象属性
| 属性 | 描述 |
|---|---|
| E | 返回算术常量 e，即自然对数的底数（约等于2.718）。 |
| LN2 | 返回 2 的自然对数（约等于0.693）。 |
| LN10 | 返回 10 的自然对数（约等于2.302）。 |
| LOG2E | 返回以 2 为底的 e 的对数（约等于 1.4426950408889634）。 |
| LOG10E | 返回以 10 为底的 e 的对数（约等于0.434）。 |
| PI | 返回圆周率（约等于3.14159）。 |
| SQRT1_2 | 返回 2 的平方根的倒数（约等于 0.707）。 |
| SQRT2 | 返回 2 的平方根（约等于 1.414）。 |
⑵.Math 对象方法
| 方法 | 描述 |
|---|---|
| abs(x) | 返回 x 的绝对值。 |
| acos(x) | 返回 x 的反余弦值。 |
| asin(x) | 返回 x 的反正弦值。 |
| atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 |
| atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。 |
| ceil(x) | 对数进行上舍入。 |
| cos(x) | 返回数的余弦。 |
| exp(x) | 返回 Ex 的指数。 |
| floor(x) | 对 x 进行下舍入。 |
| log(x) | 返回数的自然对数（底为e）。 |
| max(x,y,z,...,n) | 返回 x,y,z,...,n 中的最高值。 |
| min(x,y,z,...,n) | 返回 x,y,z,...,n中的最低值。 |
| pow(x,y) | 返回 x 的 y 次幂。 |
| random() | 返回 0 ~ 1 之间的随机数。 |
| round(x) | 四舍五入。 |
| sin(x) | 返回数的正弦。 |
| sqrt(x) | 返回数的平方根。 |
| tan(x) | 返回角的正切。 |
⑶.实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
console.log(Math.round(3.64))
console.log(Math.floor(3.14))// 地板数
console.log(Math.ceil(3.01))// 天花板数
console.log(Math.max(1,2,3,5.6))
console.log(Math.min(1,2,3,5.6))
console.log(Math.random())
console.log(Math.sqrt(16))
// 属性
console.log(Math.PI)
// 生成给定范围内的随机数
var start =10;
var end =16;
var result =Math.floor(Math.random()*(end-start+1)+start);
console.log(result)
</script>
</head>
<body>
</body>
</html>
4.Date 对象
Date 对象用于处理日期与时间。创建 Date 对象： new Date()以下四种方法同样可以创建 Date 对象：
var d = new Date(); var d = new Date(milliseconds); var d = new Date(dateString); var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);
⑴.Date 对象属性
| 属性 | 描述 |
|---|---|
| constructor | 返回对创建此对象的 Date 函数的引用。 |
| prototype | 使您有能力向对象添加属性和方法。 |
⑵.Date 对象方法
| 方法 | 描述 |
|---|---|
| getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
| getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
| getFullYear() | 从 Date 对象以四位数字返回年份。 |
| getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
| getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
| getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
| getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
| getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
| getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
| getTimezoneOffset() | 返回本地时间与格林威治标准时间 (GMT) 的分钟差。 |
| getUTCDate() | 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。 |
| getUTCDay() | 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。 |
| getUTCFullYear() | 根据世界时从 Date 对象返回四位数的年份。 |
| getUTCHours() | 根据世界时返回 Date 对象的小时 (0 ~ 23)。 |
| getUTCMilliseconds() | 根据世界时返回 Date 对象的毫秒(0 ~ 999)。 |
| getUTCMinutes() | 根据世界时返回 Date 对象的分钟 (0 ~ 59)。 |
| getUTCMonth() | 根据世界时从 Date 对象返回月份 (0 ~ 11)。 |
| getUTCSeconds() | 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。 |
| getYear() | 已废弃。 请使用 getFullYear() 方法代替。 |
| parse() | 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。 |
| setDate() | 设置 Date 对象中月的某一天 (1 ~ 31)。 |
| setFullYear() | 设置 Date 对象中的年份（四位数字）。 |
| setHours() | 设置 Date 对象中的小时 (0 ~ 23)。 |
| setMilliseconds() | 设置 Date 对象中的毫秒 (0 ~ 999)。 |
| setMinutes() | 设置 Date 对象中的分钟 (0 ~ 59)。 |
| setMonth() | 设置 Date 对象中月份 (0 ~ 11)。 |
| setSeconds() | 设置 Date 对象中的秒钟 (0 ~ 59)。 |
| setTime() | setTime() 方法以毫秒设置 Date 对象。 |
| setUTCDate() | 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。 |
| setUTCFullYear() | 根据世界时设置 Date 对象中的年份（四位数字）。 |
| setUTCHours() | 根据世界时设置 Date 对象中的小时 (0 ~ 23)。 |
| setUTCMilliseconds() | 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。 |
| setUTCMinutes() | 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。 |
| setUTCMonth() | 根据世界时设置 Date 对象中的月份 (0 ~ 11)。 |
| setUTCSeconds() | setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。 |
| setYear() | 已废弃。请使用 setFullYear() 方法代替。 |
| toDateString() | 把 Date 对象的日期部分转换为字符串。 |
| toGMTString() | 已废弃。请使用 toUTCString() 方法代替。 |
| toISOString() | 使用 ISO 标准返回字符串的日期格式。 |
| toJSON() | 以 JSON 数据格式返回日期字符串。 |
| toLocaleDateString() | 根据本地时间格式，把 Date 对象的日期部分转换为字符串。 |
| toLocaleTimeString() | 根据本地时间格式，把 Date 对象的时间部分转换为字符串。 |
| toLocaleString() | 根据本地时间格式，把 Date 对象转换为字符串。 |
| toString() | 把 Date 对象转换为字符串。 |
| toTimeString() | 把 Date 对象的时间部分转换为字符串。 |
| toUTCString() |
根据世界时，把 Date 对象转换为字符串。 实例： var today = new Date();
var UTCstring = today.toUTCString();
|
| UTC() | 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。 |
| valueOf() | 返回 Date 对象的原始值。 |
⑶.实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Date对象</title>
<script type="text/javascript">
/* var today = new Date() //Tue Nov 02 2021 09:41:09 GMT+0800 (中国标准时间) 不传入则使用今天的日期
var d1 = new Date("October 13, 1975 11:13:00") //Mon Oct 13 1975 11:13:00 GMT+0800 (中国标准时间)
var d2 = new Date(79,5,24) //Sun Jun 24 1979 00:00:00 GMT+0800 (中国标准时间)
var d3 = new Date(79,5,24,11,33,0) //Sun Jun 24 1979 11:33:00 GMT+0800 (中国标准时间
alert(today);
alert(d1);
alert(d2);
alert(d3); */
/* var d4 = new Date(2022,0,6,13,24,45,234);
console.log(d4.getYear()); //获取和1900的年份差
console.log(d4.getFullYear()); //完整的年份
console.log(d4.getMonth()); //获取月份 注意西方人的月份从0开始
console.log(d4.getDate()); //获取天数
console.log(d4.getHours()); //获取 小时
console.log(d4.getMinutes()); //获取分钟
console.log(d4.getSeconds()); //获取秒数
console.log(d4.getMilliseconds()); //根据当地时间返回时间的毫秒:
var d5 = new Date(2047,7,24,10,45,34,345)
console.log(d4>d5); // 时间日期的比较。返回true或者false */
Date.prototype.format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
// 获取年份
// ①
if (/(y+)/i.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
// ②
if (new RegExp("(" + k + ")", "i").test(fmt)) {
fmt = fmt.replace(
RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
}
var now = new Date();
var n = now.format("YYYY-MM-DD") //2021-11-02
console.log(n)
</script>
</head>
<body>
</body>
</html>
5.Boolean 对象
Boolean 对象用于转换一个不是 Boolean 类型的值转换为 Boolean 类型值 (true 或者false).
⑴.Boolean 对象属性
| 属性 | 描述 |
|---|---|
| constructor | 返回对创建此对象的 Boolean 函数的引用 |
| prototype | 使您有能力向对象添加属性和方法。 |
⑵.Boolean 对象方法
| 方法 | 描述 |
|---|---|
| toString() | 把布尔值转换为字符串，并返回结果。 |
| valueOf() | 返回 Boolean 对象的原始值。 |
二、JavaScript中自定义对象
JavaScript中除了一些常用方法和类以外，允许用户自定义对象,在JavaScript中自定义对象有三种可用的语法格式，分别为:
- 调用系统的构造函数创建对象
- 自定义构造函数创建对象
- 字面量的方式创建对象
方式一：调用系统构造函数创建对象(Object)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义对象</title>
<script type="text/javascript">
//方式一：调用系统的构造函数创建对象（object）
/* var obj1 = new Object();
//给对象添加属性
obj1.name = '李明';
obj1.age = 23;
obj1.sex = '男';
//给对象添加方法
obj1.eat = function(food){
console.log(this.name+"喜欢吃:"+food)
}
//查看对象属性
console.log(obj1.name);
console.log(obj1.age);
console.log(obj1.sex);
//调用对象方法
obj1.eat('炸鸡') */</script>
</head>
<body>
</body>
</html>
方式二：自定义构造函数创建对象(function)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义对象</title>
<script type="text/javascript">
//方式二：自定义构造函数创建对象
/* function Person(name,age,sex){
//属性
this.name = name;
this.age = age;
this.sex = sex;
//方法
this.eat=function(food){
console.log(this.name+'今年:'+this.age+',喜欢吃:' +food)
}
}
//实例化创建对象
var p1 = new Person('张无忌',34,'男');
//查看属性
console.log(p1.name);
console.log(p1.age);
console.log(p1.sex);
//调用方法
p1.eat('火锅') */</script>
</head>
<body>
</body>
</html>
方式三：字面量的方式创建对象(JSON)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义对象</title>
<script type="text/javascript">
//方式三：字面量的方式创建对象
//注意这里创建使用的json格式，
var Person = {
name:'谢逊',
age:50,
sex:'男',
eat:function(food){
console.log(this.name+'今年:'+this.age+',喜欢吃:' +food)
}
}
//访问属性
console.log(Person.name);
console.log(Person.age);
console.log(Person.sex);
//调用方法
Person.eat('串串')
</script>
</head>
<body>
</body>
</html>
三、JavaScript中的原型的介绍
1.JS中原型说明
当我们用构造方法创建一个类时,在内存会预先调用构造方法创建一个对象,这对象我们称之为原型对象,构造方法对象中有一个prototype属性指向该对象,原型对象中有一个constructor属性指向构造方法.获得一个类的原型对象可以通过类名.prototype的方式获得
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>查看原型</title>
<script type="text/javascript">
//方式二：自定义构造函数创建对象
function Person(name,age,sex){
//属性
this.name = name;
this.age = age;
this.sex = sex;
//方法
this.eat=function(food){
console.log(this.name+'今年:'+this.age+',喜欢吃:' +food)
}
}
/*
在使用构造方法创建类的时候，会先调用构造方法创建一个对象，被称为原型对象，构造方法中有一个属性prototype指向该原型对象
同时该原型对象中也有一个constructor属性指向构造方法
注意：在浏览器不同prototype有时候显示成 _proto_,这是因为不同的浏览器厂商对于js的支持不同
*/
console.log(Person); //原型对象中有一个constructor属性指向构造方法
console.log(Person.prototype) //prototype属性指向该原型对象
</script>
</head>
<body>
</body>
</html>
2.当前类对象和原型的关系
当前类的每一个对象内部有一个 _proto_的一个属性，指向他们的原型，当用对象获取属性和调用方法时,如果当前对象中没有 _proto_,那么会去他们所对应的原型对象中去找,也就是说,我们通过对原型的操作可以实现为一个类所有的对象添加属性和方法.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>当前类对象和原型的关系</title>
<script type="text/javascript">
//方式二：自定义构造函数创建对象
function Person(name,age,sex){
//属性
this.name = name;
this.age = age;
this.sex = sex;
//方法
this.eat=function(food){
console.log(this.name+'今年:'+this.age+',喜欢吃:' +food)
}
}
/*
当前类的每一个对象内部有一个_proto_的属性，指向他们的原型，当我们用对象获取属性和调用方法时，如果当前对象中没有，
就会去他们指向的原型对象中去找。可以通过对他们指向的原型对象添加属性和方法，然后让对象具有该属性和方法
注意：在浏览器不同prototype有时候显示成 _proto_,这是因为不同的浏览器厂商对于js的支持不同
*/
var p1 = new Person('夏明',34,'男');
//给p1设置属性
p1.address = '北京市丰台区';
p1.wow = function(){
console.log("这是一个吼叫的方法")
}
//访问设置的属性
console.log(p1.address);
p1.wow();
var p2 = new Person('晓明',44,'男');
//P2访问p1新增的方法
//p2.wow(); //Uncaught TypeError: p2.wow is not a function
//上述直接将属性、方法添加给对象p1,p2是没有该属性和方法的，那么只需要添加给其原型对象
Person.prototype.department = '工商学院'; //设置属性
Person.prototype.sleep = function(){
console.log(this.name+"喜欢睡觉")
}
//p1调用属性和方法
console.log(p1.department)
p1.sleep()
//p2调用属性和方法
console.log(p2.department)
p2.sleep()
</script>
</head>
<body>
</body>
</html>
四、JavaScript中的原型链
一个类的原型其实是一个Object类的对象,换言之，原型也有一个_proto_属性，指向Object的原型对象,那么也就是说 Person prototype中没有的属性和方法会继续向Object prototype去找，这个特性说明了在Object原型中添加的属性和方法,我们在person1和person2中也可以使用.那么这种连续的 _proto_属性指向就形成了原型链
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原型链</title>
<script type="text/javascript">
//方式二：自定义构造函数创建对象
function Person(name,age,sex){
//属性
this.name = name;
this.age = age;
this.sex = sex;
//方法
this.eat=function(food){
console.log(this.name+'今年:'+this.age+',喜欢吃:' +food)
}
}
/*
一个类的原型是一个object类对象，也就是原型也有_proto_属性，指向object类的原型对象，也就是是说在person prototype
指向的原型中找不到方法和属性时，会继续向object prototype原型中找，那么我们添加给object原型中的方法和属性，在p1和p2
中也可以使用
*/
var p1 = new Person('夏明',34,'男');
var p2 = new Person('晓明',44,'男');
//上述直接将属性、方法添加object原型对象，后面所有的对象都可以使用该属性和方法
Object.prototype.department = '工商学院'; //设置属性
Object.prototype.sleep = function(){
console.log(this.name+"喜欢睡觉")
}
//p1调用属性和方法
console.log(p1.department)
p1.sleep()
//p2调用属性和方法
console.log(p2.department)
p2.sleep()
</script>
</head>
<body>
</body>
</html>
浙公网安备 33010602011771号