干货分享|建议收藏2w字爆肝详解 JavaScript对象
Posted 请叫我阿ken
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了干货分享|建议收藏2w字爆肝详解 JavaScript对象相关的知识,希望对你有一定的参考价值。
感激相遇 你好 我是阿ken
作者:请叫我阿ken
链接:请叫我阿ken主页链接
来源:CSDN
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
🌊🌈关于前言:
文章部分内容及图片出自网络,如有问题请与我本人联系(主页介绍中有公众号)
本博客暂适用于刚刚接触JS以及好久不看想要复习的小伙伴。
🌊🌈关于内容:
5.1_初始对象
5.1.1_什么是对象
例如:在JavaScript中描述一个手机对象,则手机拥有的属性和方法如下:
- 手机的属性:颜色、重量、屏幕尺寸。
- 手机的方法:打电话、发短信、看视频、听音乐。
在代码中,属性可以看成是对象中保存的一个变量,使用“对象.属性名”表示;方法可以看成是对象中保存的一个函数,使用“对象.方法名()”进行访问。
// 假设现在有一个手机对象p1,通过代码创建出来
var p1 = {
color: '黑色',
weight: '188g',
screenSize: '6.5',
call: function (num) {
console.log('打电话给'+num);
},
sendMessage: function (num, message) {
console.log ('给'+ num + '发短信,内容为:' + message);
},
playVideo: function() {
console.log ('播放视频');
},
playMusic: functlon() {
console.log ('播放音乐');
}
};
//访向p1的属性
console.log (pl.color); // 输出结果:"黑色",表示手机的颜色为黑色
console.log (p1.weight); // 输出结果: "188g",表示手机的重量为188克
console.log (p1.screenSize);// 输出结果:"6.5",表示手机的屏幕尺寸为6.5英寸
//调用p1的方法
p1.call('123'); // 调用手机的拨打电话方法,拨打号码为123
p1.sendMessage('123', 'hello'); // 给电话号码123发短信,内容为hello
p1.playVideo(); // 调用手机的播放视频方法
p1.playMusic(); // 调用手机的播放音乐方法
从上述代码可以看出,对象的属性和变量的使用方法类似,对象的方法和函数的使用方法类似。
通过对象可以把一系列的属性和方法集合起来,用一个简单的变量名p1来表示。
5.1.2_利用字面量创建对象
在 JavaScript 中,对象的字面量就是用花括号“{"来包裹对象中的成员,每个成员使用"key:value"的形式来保存,key 表示属性名或方法名,value 表示对应的值。多个对象成员之间用“,"隔开。
案例:
// 创建一个空对象
var obj = {};
// 创建一个学生对象
var stul = {
name: '小明', // name 属性
age: 18, // age属性
sex: '男', // sex属性
sayHello: function () { // sayHello方法
console.log ('Hello');
}
};
在上述代码中,obj是一个空对象,该对象没有成员。stu1对象中包含4个成员,分别是name、age、sex和sayHello,其中name,age和sex是属性成员,sayHello是方法成员。
5.1.3_访问对象的属性和方法
在将对象创建好以后,就可以访问对象的属性和方法了。
示例代码如下:
//访同对象的属性(语法1)
console.log (stul.name); // 输出结果:小明
//访同对象的属性(语法2)
console.log (stul['age']); // 输出结果:18
//调用对象的方法(语法1)
stul.sayHello(); // 输出结果: Hello
//调用对象的方法(语法2)
stul['sayHello'](); // 输出结果: Hello
如果对象的成员名中包含特殊字符,则可以用字符串来表示,
示例代码如下:
var obj = {
'name-age': '小明-18'
};
console.log (obj['name-age']);
// 输出结果:"小明-18"
JavaScript的对象具有动态特征。如果一个对象没有成员,用户可以手动赋值属性或方法来添加成员,
具体示例如下:
var stu2 = {}; // 创建一个空对象
stu2.name = 'Jack'; // 为对象增加name属性
stu2.introduce = function() { // 为对象增加introduce方法
alert ('My name is ' + this.name);// 在方法中使用this代表当前对象
};
alert (stu2.name);//访问name属性,输出结果: Jack
stu2.introduce();//调用introduce()方法,输出结果:My name is Jack
在上述代码中,在对象的方法中可以用 this 来表示对象自身,因此,使用 this.name 就可以访问对象的 name 属性。
如果访问对象中不存在的属性时,会返回undefined。
示例代码如下:
var stu3 = {}; //创建一个空对象
console.log(stu3.name); //输出结果: undefined
5.1.4_利用 new Object 创建对象
前面在学习数组时,我们知道可以使用 new Array 创建数组对象。而数组是一种特殊的对象,如果要创建一个普通的对象,则使用 new Object 进行创建。
示例代码如下:
var obj = new Object(); //创建了一个空对象
obj.name = '小明'; //创建对象后,为对象添加成员
obj.age = 18;
obj.sex = '男';
obj.sayHello = function(){
console.log('Hello');
};
5.1.5_利用构造函数创建对象
前面学习的字面量的方式只适合创建一个对象,而当需创建多个对象时,还要将对象的每个成员都写一遍,显的比较麻烦,因此,可以用构造函数来创建对象。使用构造函数来创建对象的语法为“new 构造函数名()”,在小括号中可以传递参数给构造函数,如果没有参数,小括号可以省略。
实际上,“new Object()”就是一种使用构造函数创建对象的方式,Object 就是构造函数的名称,但这种方式创建出来的是一个空对象。
其基本语法如下:
//编写构造函数
function 构造函数名() {
this.属性 = 属性;
this.方法 = function() {
//方法体
};
}
//使用构造函数创建对象
var obj = new 构造函数名();
在上述语法中,构造函数中的 this 表示新创建出来的对象,在构造函数中可以通过 this 来为新创建出来的对象添加成员。需要注意的是,构造函数的名称推荐首字母大写。
案例:
// 编写一个Student构造函数
function Student (name, age) {
this.name = name;
this.age = age;
this.sayHello = function() {
console.log ('你好,我叫' + this.name);
};
}
//使用Student构造函数创建对象
var stul = new Student('小明', 18);
console.log(stul.name); // 输出结果:小明
console.log(stu1.sayHello()); // 输出结果:你好,我叫小明
var stu2 = new Student('小红', 17);
console.log(stu2.name); // 输出结果:小红
console.log(stu2.sayHello()); // 输出结果:你好,我叫小红
JavaScript 中的构造函数类似于传统面向对象语言(如Java)中的类(class),所以 JavaScript 中也可以使用面向对象编程中的一些术语。
-
抽象: 将一类对象的共同特征提取出来,编写成一个构造函教(类)的过程,称为抽象。
-
实例化: 利用构造函数(类)创建对象的过程,称为实例化。
-
实例: 如果 stu1对象是由Student构造函数创建出来的,则stu1对象称为Student构造函数的实例(或称为实例对象)。
小提示:
在一些文档中,经常把对象中的方法也称为函数,或者把构造函教称为构造器或构造方法,我们只需明白这些称呼所指的是同一个事物即可。
多学一 招: 静态成员
在面向对象编程中有静态( static )的概念,JavaScript也不例外。JavaScript 中的静态成员,是指构造函数本身就有的属性和方法,不需要创建实例对象就能使用。
下面我们通过代码演示静态成员的创建与使用:
function Student(){
}
Student.school = 'x大学'; // 添加静态属性school
Student.sayHello = function() { // 添加静态方法sayHello
console.log('Hello');
};
console.log(Student.school); //输出结果:x大学
Student.sayHello(); //输出结果:Hello
5.1.6_遍历对象的属性和方法
使用 for.in 语法可以遍历对象中的所有属性和方法,
示例代码如下:
// 准备一个待遍历的对象
var obj = {name:'小明', age:18, sex:'男'};
// 遍历obj对象
for(var k in obj){
// 通过k可以获取遍历过程中的属性名或方法名
console.log(k); // 依次输出:name、age、sex
console.log (obj[k]); // 依次输出:小明、18、男
}
在上述代码中,k 是一个变量名,可以自定义,习惯上命名为 k 或者 key,表示键名。当遍历到每个成员时,使用 k 来获取当前成员的名称,使用 obj[k] 获取对应的值。另外,如果对象中包含方法,则可以通过“ obj[k]() " 进行调用。
多学一招: 判断对象成员是否存在
当需要判断一个对象中的某个成员是否存在时,可以使用 in 运算符,
案例:
var obj = (name:'Tom', age: 16);
console.log('age' in obj); // 输出结果: true
console.log('gender' in obj);// 输出结果: false
从上述代码可以看出,当对象的成员存在时返回 true ,不存在时返回 false。
5.2_内置对象
为了方便程序开发,JavaScript 提供了很多常用的内置对象, 包括数学对象Math、日期对象Date、数组对象Array以及字符串对象String等。掌握常用内置对象的使用方法会给程序开发带来极大的便利。
5.2.1_通过查阅文档熟悉内置对象
前面讲解的对象都是开发人员自己编写的对象。为了方便程序开发,JavaScript 还提供了很多内置对象,使用内置对象可以完成很多常见的开发需求,例如,数学计算、日期处理,数组操作等。对于大部分开发者来说,不必花费时间研究这些内置对象的实现原理是什么,重要的是快速掌握内置对象的使用,从而快速地投入到开发工作中。
由于JavaScript提供的内置对象非常多,还存在着版本更新、浏览器兼容性等各方面的原因,因此学习内置对象最好的方法是查阅网络上的最新文档。
接下来我们以Mozilla开发者网络(MDN )为例,演示如何查阅JavaScript 中内置对象的使用:
-
打开MDN网站,在网站的导航栏中找到“技术” —— "JavaScript,
-
将页面向下滚动,可以在左侧边栏中找到“内置对象”项,将该项展开后,可以看到所有内置对象的目录链接,
-
另外,如果不知道对象的名称,也可以在页面的搜索框中输入关键字进行搜索,找到某个关键字相关的对象或者方法。
在通过文档学习某个方法的使用时,基本上可以分为4个步骤,
例如查阅Math.max(),具体如下:
-
查阅方法的功能。页面上方有一 段文字:“Math max0函数返回一组数中的最大值。”。这段文字就是介绍方法的功能。
-
查看参数 的意义和类型。通过文档可知,max() 方法的参数是一组数值, 数量不限。在文档的语法中,使用“[ ]” 包裹的参数表示可选参数,可以省略。
-
查看返回值 的意义和类型。在文档中可以看到具体的说明。
-
通过示例代码进行测试。在文档中的大部分常用方法的页面中都提供了示例代码,通过示例代码可以学习如何使用这个方法。
5.2.2_[案例] 封装自己的数学对象
当内置对象不能满足需求的时候,我们还可以自己封装一个对象,来完成具体操作。接下来我们封装一个数学对象myMath,实现求出数组中的最大值,
具体代码如下:
var myMath = {
pI: 3.141592653589793,
max: function() (
var max = arguments[0];uments. length; 1++){
for (var 1- 1; i < arguments
if (arguments[i] > max)
max = arguments[i];
return max;
}
console.log (myMath.PI);
/输出结果:3.141592653589793
console. log (myMath.max(10,20,30));
//输出结果: 30
上述代码中,第1行代码定义了一个myMah对象。第2行代码设置了PI的值。第3~ 11行代码定义了一个max方法,并利用arguments来接收输人的参数,返回数组的最大值。第13行代码调用myMahPI得出定义好的值。第14行代码调用myMath.max()方法得出数组中的最大值。
5.3_Math 对象
5.3.1_Math 对象的使用
Math 对象用来对数字进行与数学相关的运算,该对象不是构造函数,不需要实例化对象,可以直接使用其静态属性和静态方法。
Math 对象的常用属性和方法
成员 | 作用 |
---|---|
PI | 获取圆周率,结果为3.141592653589793 |
abs(x) | 获取x的绝对值,可传入普通数值或是用字符串表示的数值 |
max([value1[,value2,…]]) | 获取所有参数中的最大值 |
min([value1[,value2,…]]) | 获取所有参数中的最小值 |
pow(base, exponent) | 获取基数(base)的指数(exponent)次幂,即base^exponent |
sqrt(x) | 获取x的平方根 |
ceil(x) | 获取大于或等于x的最小整数,即向上取整 |
floor(x) | 获取小于或等于x的最大感数,即向下取整 |
round(x) | 获取x的四舍五入后的整数值 |
random() | 获取大于或等于0.0且小于1.0的随机值 |
案例:
Math.PI;// 获取圆周率
Math.abs(-25);// 获取绝对值,返回结果:25
Math.abs('-25');// 获取绝对值,自动转换为数字,返回结果:25
Math.max(5, 7, 9, 8);// 获取最大值,返回结果:9
Math.min(6, 2, 5, 3);// 获取最小值,返回结果:2
Math.pow(2, 4);// 获取2的4次幂,返回结果:16
Math.sqrt(9);//获取9的平方根,返回结果为:3
Math.ceil(1.1);// 向上取整,返回结果: 2
Math.ceil(1.9);// 向上取整,返回结果:2
Math.floor(1.1);// 向下取整,返回结果:1
Math.floor(1.9);// 向下取整,返回结果:1
Math.round(1.1);// 四舍五入,返回结果: 1
Math.round(1.5);// 四舍五入,返回结果:2
Math.round(1.9);// 四舍五入,返回结果:2
Math.round(-1.5);// 四舍五入,返回结果:-1(取较大值)
Math.round(-1.6);// 四舍五入,返回结果:-2
5.3.2_生成指定范围的随机数
Math.random() 用来获取随机数,每次调用该方法返回的结果都不同。该方法返回的结果是一个很长的浮点数,如“0.925045617789475其范围是0~1(不包括1)。
由于 Math.random() 返回的这个随机数不太常用,我们可以借助一些数学公式来转换成任意范围内的随机数,公式为“Math.random() * (max - min) + min",表示生成大于或等于 min 且小于 max 的随机值。
示例代码如下:
Math.random() * (3 - 1) + 1; // 1 ≤ 返回结果 < 3
Math.random() * (20 - 10) + 10; // 10 ≤ 返回结果 < 20
Math.random() * (99 - 88) + 88; // 88 ≤ 返回结果 < 99
上述代码的返回结果是浮点数,当需要获取整数结果时,可以搭配Math.floor()来实现。
案例:演示如何获取1 ~ 3范围内的随机整数,返回结果可能是1、2或3:
function getRandom (min, max) {
return Math.floor(Math.random()*(max - min + 1) + min);
}
console.log(getRandom(1, 3)); // 最小值1,最大值3
上述代码中,第2行用来生成min到max之间的随机整数,包含min和max。另外,还可以使用Math.floor (Math.random() * (max + 1)) 表示生成0到max之间的随机整数,使用Math.floor (Math.random() * (max + 1)+ 1)表示生成1到max之间的随机整数。
利用随机数,可以实现在数组中随机获取个元素, 示例代码如下:
var arr = ['apple', 'banana', 'orange', 'pear'];
//调用前面编写的getRandom()函数获取随机数
console.log( arr[getRandom(0, arr.length-1)] );
5.3.3_[案例] 猜数字游戏
案例: 演示 Math 对象的使用。使程序随机生成个 1 ~ 10 之间的数字、并让用户输人一个数字户输人的数字,判断这两个数的大小,如果用户输入的数字大于随机数,那么提示“你猜大了”,如果用户输入的数字小于随机数,则提示“你猜小了”,如果两个数字相等,就提示“恭喜你,猜对了”,结束程序。
案例:
function getRandom(min, max){
return Math.floor(Math.random() * (max - min + 1) + min);
} //定义了getRandom()函数,利用Math.random()方法求随机数。
var random = getRandom(1, 10); //设置了随机数大小为1~10之间的数
while(true){ //死循环,利用第13行的break来跳出循环
var num = prompt('猜数字,范围在1~10之间。');
if(num > random){
alert('你猜大了');
}else if(num < random){
alert('你猜小了');
}else{
alert('恭喜你,猜对了');
break;//利用while循环语句中利用if...else if多分支语句来判断大于、小于、等于
}
}
5.4_日期对象
JavaScript 中的日期对象用来处理日期和时间。例如,秒杀活动中日期的实时显示、时钟效果、在线日历等。
5.4.1_日期对象的使用
JavaScript 中的日期对象需要使用 new Date() 实例化对象才能使用,Date() 是日期对象的构造函数。在创建日期对象时,可以为 Date() 构造函数传人一些参数,来表示具体的日期,其创建方式如下。
// 方式1: 没有参数,使用当前系统的当前时间作为对象保存的时间
var datel = new Date();
// 输出结果: Wed 0ct 16 2019 10:57:56 GMT+0800 (中国标准时间)
console.log (datel);
// 方式2: 传人年,月,日、时、分、秒(月的范围是0 ~ 11,即真实月份-1)
var date2 = new Date(2019, 10, 16, 10, 57, 56);
// 输出结果: Sat Nov 16 2019 10:57:56 GMT+0800 (中国标准时间)
console.log(date2);
// 方式3: 用字符串表示日期和时间
var date3 = new Date('2019-10-16-10:57:56');
// 输出结果: Wed Oct 16 2019 10:57:56 GMT+0800(中国标准时间)
console.log(date3);
在使用方式1时,其返回的 date1 对象保存的是对象创建时的时间;
在使用方式2时,最少需要指定年、月两个参数,后面的参数在省略时会自动使用默认值;
在使用方式3时,最少需要指定年份。另外,当传入的数值大于合理范围时,会自动转换成相邻数值(如方式2将月份设为-1表示去年12月,设为12表示明年1月)。
在获取到日期对象后,直接输出对象得到的是一个字符串表示的日期和时间。如果想要用其他格式来表示这个日期和时间,可以通过调用日期对象的相关方法来实现。日期对象的常用方法分为 get 和 set 两大类。
Date 对象的常用 get 方法:
方法 | 作用 |
---|---|
getFullYear() | 获取表示年份的4位数字,如2020 |
getMonth() | 获取月份,范围为0 ~ 11(0表示一月,1表示二月,依次类推) |
getDate() | 获取月份中的某一天,范围1 ~ 31 |
getDay() | 获取星期,范围为0 ~ 6(0表示星期日,1表示星期一,依次类推) |
getHours() | 获取小时数,范围为0 ~ 23 |
getMinutes() | 获取分钟数,范围为0 ~ 59 |
getSeconds() | 获取秒数,范围为0 ~ 59 |
getMilliseconds() | 获取毫秒数,范围为0 ~ 999 |
getTime() | 获取从1970-01-01 00:00:00距离 Date 对象所代表时间的毫秒数 |
Date 对象的常用 set 方法:
方法 | 作用 |
---|---|
setFullYear(value) | 设置年份 |
setMonth(value) | 设置月份 |
setDate(value) | 设置月份中的某一天 |
setHours(value) | 设置小时数 |
setMinutes(value) | 设置分钟数 |
setSeconds(value) | 设置秒数 |
setMillseconds(value) | 设置亳秒数 |
setTime(value) | 通过从1970-01-01 00:00:00 计时的毫秒数来设置时间 |
案例:在控制台中输出当前日期。
var date = new Date();//基于当前日期时间创建Date对象
var year = date.getFullYear();//获取年
var month = date.getMonth();// 获取月
var day = date.getDate();//获取日
//通过数组将星期值转换为字符串
var week =['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
//输出date对象保存的时间, 示例:今天是2019年9月16日星期三,
console.log('今天是'+ year + '年' + month + '月' + day + '日' + week[date.getDay()]);
在上述代码中,week[ date.getDay() ] 用来从 date 对象中获取星期值,然后作为数值的索引到 week 数组中取出对应的星期字符串。
案例:将日期对象中的时间转换成指定的格式,
WebSocket通信原理和在Tomcat中实现源码详解(万字爆肝)
爆肝手写整理数据结构笔记,包含案例代码,适合用于及时复习,良心干货,建议收藏!
爆肝手写整理数据结构笔记,包含案例代码,适合用于及时复习,良心干货,建议收藏!
爆肝手写整理数据结构笔记,包含案例代码,适合用于及时复习,良心干货,建议收藏!