JavaScript--对象学习笔记

最新推荐文章于 2024-07-24 11:09:48 发布

沉迷于搬砖

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量252

点赞数

文章标签： javascript 学习

本文链接：https://blog.csdn.net/weixin_45960356/article/details/125943195

版权

对象

1、概念

a、为什么要有对象？

解释：如果有一组相关的数据，松散的存储不利于使用，存入数组中受下标显示又必须有固定的顺序，而对象可自定义名称存储一系列无序的相关数据

b、什么是对象？

解释：万物皆为对象，对象是一个具体的事物，一个具体的事物就会有行为和特征
例如：一辆汽车，车是一类事物，具体指那辆车才是对象，特征：红色，四个轮子；行为：驾驶加速、刹车

c、JavaScript对象

1、JavaScript中的对象：

JavaScript中的对象其实就是生活中的对象的一个抽象
JavaScript的对象是无序属性的集合，其属性值可以包含基本值、对象或函数；独享就是一组没有顺序的值，可以把JavaScript中的对象想象成键值对，其中值可以是数据和函数
对象的行为和特征：
特征–在对象中用属性表示
行为–在对象汇总用方法表示

2、对象字面量

1、对象字面量说明

创建一个对象最简单的方式是使用对象字面量赋值给变量，类似数组
对象字面量语法：{}
内部可存放多条数据，数据与数据之间用逗号分隔，最后一个后面不加逗号
每条数据都是由属性名和属性值组成，键值对写法：k:v（k:属性名，v:属性值，可以是任意类型的数据，比如简单性数据、函数、对象）

2、区分属性和方法

属性：对象的描述性特征，一般是名词，相当于定义在对象内部的变量
方法：对象的行为和功能，一般是动词，定义在对象中的函数

3、调用对象内部属性和方法语法

用对象的变量名大点调用某个属性名，得到属性值
在对象内部用this大点调用属性名，this替代对象
用对象的变量名后面加[]调用，[]内部是字符串格式的属性名
调用方法时，需要在方法名后加()执行

4、更改对象内部属性和方法语法

更改属性的属性值方法：先调用属性，再等号赋值（o.age = 19;）
增加新的属性和属性值：使用点语法或者[]方法直接定义新属性，等号赋值（o.height-180;）
删除一条属性：使用一个delete关键字，空格后面加属性调用（delete o.sex;）

3、其他创建对象的方式

1、new Object()创建对象

Object()构造函数，是一种特殊的函数，主要用来创建对象时初始化对象，即为对象成员变量赋初始值，总与new运算符仪器使用在创建对象的语句中
构造函数用于创建一类对象，首字母要大写
构造函数要和new仪器使用才有意义
2、new在执行时会做四件事情
new会在内存中创建一个新的空对象
new会让this指向这个新的对象
执行构造函数目的：给这个心对象家属性和方法
new会返回这个新对象

3、工厂函数创建对象

如果要创建多个类似的对象，可将new Object()过程封装到一个函数中，将来调用函数就能创建一个对象，相当于一个生产对象的函数工厂，用来简化代码

	function createPerson(name,age,job) {
		var person = new Object();
		person.name = name;
		person.age = age;
		person.job = job;
		persion.sayHi = function() {
	    	console.log('hello world');
		}
		return person;
	}
	var p1 = createPerson('战三',22,'actor');
	var p2 = createPerson('三战',22,'doctor');

4、自定义构造函数

优点：比工厂方法更简单
自定义一个创建具体对象的构造函数，函数内部不需要new一个构造函数的过程，直接使用this代替对象进行属性和方法的书写，也不需要return一个返回值
使用时，利用new关键字调用自定义的构造函数即可
注意：构造函数的函数名首字母不要大写，用来区分其他普通函数名

	function Person(name,age,job) {
		this.name = name;
		this.age = age;
		this.job = job;
		this.sayHi = function () {
			console.log('hello world');	
		}
	}
	var p1 = new Person('张三',22,'actor');

4、对象遍历

for in 循环也是循环的一种，专门用来遍历对象，内部会定义一个k变量，k变量在每次循环时会从第一个开始接受属性名，一直接受到最后一条属性名，执行完后跳出循环
简单的遍历循环：输出每一项的属性名和属性值

	for(var k in obj) {
		console.log(k + '项的属性值是' + obk[k]);
	}

5、简单类型与复杂类型

1、简单类型与复杂类型的区别

基本类型又叫值类型，复杂类型又叫引用类型
值类型：简单数据类型，基本数据类型，在存储时，变量中存储的是值本身，因此叫做值类型
引用类型：复杂数据类型，在存储时，变量中存储的仅仅是地址（引用），因此叫做引用数据类型

2、基本类型在内存中的存储
变量中如果存储的是简单类型的数据，那么变量中存储的是值本身，如果将变量赋值给另一个变量，是将内部的值复制一份给了另一个变量，两个变量之间灭有联系，一个变化，另一个不会同时变化

3、复杂类型在内存中的存储
如果将复杂类型的数据赋值给一个变量，复杂类型的数据会在内存中创建一个原型，而变量中存储的是指向对象的一个地址，如果将变量赋值给另一个变量，相当于将地址复制一份给新的变量，两个变量的地址相同，指向的是同一个原型，不论通过哪个地址更改原型，原型都会发生更改，两个变量下次访问时，都会发生变化

4、基本类型作为函数参数
基本类型的数据作为函数的参数，符合基本类型的数据特点

6、内置对象

1）知识回顾

JavaScript包含：ECMAScript、DOM、BOM
ECMAScript包含：变量、数据、运算符、条件分支语句、循环语句、函数、数组、对象…
JavaScript对象包含三种：自定义对象、内置对象、浏览器对象
ECMAScript对象：自定义对象、内置对象
使用一个内置对象，只需要知道对象中有哪些成员，有什么功能，直接使用
需要参考一些说明手册 W3C/MDN

2）MDN

1、说明：Mozilla开发者网络（MDN）提供有关开放网络技术的信息，包括HTML、CSS和万维网及HTML5应用的API

MDN：https://developer.mozilla.org/zh-CN/
例如：通过查询MDN学习Math对象的random()方法的使用

2、学习一个方法步骤：
1）了解方法的功能
2）理解参数的意义和类型
3）明白返回值意义和类型
4）demo进行测试

3）Math 对象

Math对象具有数学常数和函数的属性和方法，可直接进行使用
根据数学相关的运算找Math中的成员（求绝对值，取整）

4）Array 对象

1、创建数组对象的两种方式：字面量方式和 new Array() 构造函数方法
2、检测数组类型：instanceof 检测某个实例是否是某个对象类型
3、toString()：把数组转换成字符串，逗号分隔每一项

4、数组常用方法
1）首尾数据操作：
在这里插入图片描述

2）合并和拆分：

3）删除、插入、替换：
在这里插入图片描述
4）位置方法

5）倒序
reverse()：将数组完全颠倒，第一项成为最后一项，最后一项变成第一项
6）排序

7）转字符串方法

8）清空数组
a、方式一：arr = [];
b、方式二：arr.length = 0;
c、方式三：arr.splice(0,arr.length);

5）String 对象

1、基本包装类型

说明：为了方便操作简单数据类型，JavaScript提供了特殊的简单类型对象：String（基本类型没有方法）
当调用str.substring()等方法的时候，先把str包装成String类型的临时对象，再调用substring方法，最后销毁临时对象
可以使用new String()构造函数方法创建字符串对象