JavaScript之对象（四）

目录

对象

内置对象

Math对象

日期对象Date

数组对象

字符串对象

---

对象

现实生活中︰万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
心

对象是由属性和方法组成的。

• 属性∶事物的特征，在对象中用属性来表示(常用名词)
• 方法∶事物的行为，在对象中用方法来表示(常用动词)

创建对象

创建对象（object）有三种方式

• 利用字面量创建对象
• 利用new Object创建对象
• 利用构造函数创建对象

1. 利用字面量创建对象

对象字面量：就是花括号{}里面包含了表达这个具体事物（对象）的属性和方法。

var obj = {};   //创建一个空的对象

案例1：

如下，创建一个狗对象，并且调用其中的属性和方法。

• 调用属性：对象名.属性名
• 调用方法：对象名.方法名()

里面的属性或者方法我们采取键值对的形式。多个属性或者方法中间用逗号隔开的。方法冒号后面跟的是一个匿名函数

<script>
	var dog = {
		name: '豆腐',       //对象的属性
		age: 3,
		sex: 'woman',
		action: function(){        //对象的方法
			console.log('吃饭睡觉')
		}
	}
	console.log(dog.name);   //调用对象的属性，输出豆腐
    console.log(dog['sex']); //调用属性的另外一种方式，输出 wowam
	dog.action();            //调用对象的方法，输出吃饭睡觉
</script>

2. 利用 new Object创建对象

var obj = new Object{};   //创建一个空的对象

<script>
	var dog = new Object();  //创建一个dog对象
	dog.name = "豆腐";       //赋值属性
	dog.age = 3;
	dog.sex = "woman";
	dog.action = function(){      //赋值方法
		console.log("吃饭睡觉");
	}
	console.log(dog.name);   //调用对象属性，输出豆腐
	console.log(dog['sex']); //调用属性的另外一种方式，输出 wowam
	dog.action();          //调用对象方法，输出“吃饭睡觉”
</script>

3. 利用构造函数创建对象

我们为什么需要使用构造函数？就是因我们前面两种创建对象的方式一次只能创建一个对象

因为我们一次创建一个对象，里面很多的属性和方法是大量相同的。因此我们可以利用函数的方法重复这些相同的代码。我们就把这个函数成为构造函数。又因为这个函数不一样，里面封装的不是普通代码，而是对象。

构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面

创建对象方法如下

<script>
	function 构造函数名(){
		this.属性 = 值;
		this.方法 = function(){
			//函数体
		}
	}
	new 构造函数名();
</script>

 例子

<script>
	function Star(uname, age, sex){  //构造函数名的首字母要大写
		this.name = uname;          //属性
		this.age = age;
		this.sex = sex;
		this.action = function(sang){  //方法
			console.log(sang)
		}
	}
//创建刘德华对象
	var ldh = new Star('刘德华', 18, '男'); 
	//输出刘德华对象
	console.log(ldh);  //输出 {name: "刘德华", age: 18, sex: "男"}
					//构造函数不需要return就可以返回结果
	//输出刘德华属性
	console.log(ldh.name);
	//输出刘德华方法 
	ldh.action('吻别'); //输出吻别
</script>

 for in 遍历对象

如果我们想输出对象中的属性值，则可以通过for in 的方式进行遍历

<script>
	var obj = {
		name: "pink老师",
		age: 18,
		sex: '男'
	}
	console.log(obj)  //输出{name: "pink老师", age: 18, sex: "男"}
	for(var k in obj){
		//console.log(k); //获取属性名称，输出 name age sex
		console.log(obj[k]); //获取属性值，输出 pink老师 18 男
	}
</script>

---

内置对象

JavaScript中的对象分为3种：自定义对象（前面说的都属于自定义对象）、内置对象、浏览器对象
前面两种对象是JS基础内容，属于ECMAScript；第三个浏览器对象属于我们JS独有的，我们JS API讲解

内置对象：就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能(属性和方法)。内置对象最大的优点就是帮助我们快速开发。JavaScript提供了多个内置对象：Math、 Date . Array、string等

关于查阅文档

学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。

Mozilla开发者网络(MDN)提供了有关开放网络技术(Open Web )的信息，包括HTML、CSS和万维网及HTML5应用的API。

MDN: https://developer.mozilla.org/zh-CN/

Math对象

更多可参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math

Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法。Math 不是一个构造函数。所以我们不需要new来调用而是直接使用里面的属性和方法即可

如下是对内置对象Math的基本应用

<script>
	//Math.PI,输出圆周率
	console.log(Math.PI);              //输出 3.141592653589793
	//Math.max(),返回一组数中的最大值
	console.log(Math.max(23,42,12));   //输出42
	//Math.min(),返回一组数中的最小值
	console.log(Math.min(23,42,12));   //输出12
</script>

 Math.random()

 返回一个随机的小数，在 [0,1) 之间。这个方法里面不跟参数

<script>
	console.log(Math.random());  //输出随机小数，如0.2297533308803914
</script>

上面都是获取的是小数，现在想得到两个数之间的随机整数，并且包含这两个整数

console.log(Math.floor(Math.random() * (max - min + 1)) + min)  //记住这个公式就行

如，获取 [1, 10]之前的随机整数

<script>
	function getRandom(min, max){
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}
	console.log(getRandom(1,10));  
</script>>

实现学生随机点名

<script>
	function getRandom(min, max){
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}
	//学生名单
	var arr = ['小明', '小李', '小张', '王强', '孙思雨', '谢辰', '吴玉梅', '李冰'];
	//引用随机函数
	console.log(arr[getRandom(0, arr.length - 1)]);
</script>>

日期对象Date

日期对象是一个构造函数，必须使用new来创建我们的日期对象

<script>
	var arr = new Array();    //如创建一个数组对象
	var obj = new Object();   //如创建一个对象实例
	//1. 使用Date，如果没有参数 则返回当前系统的时间
	var date = new Date();
	console.log(date);   //输出 Tue Aug 10 2021 22:55:00 GMT+0800 (中国标准时间)
	// 2. 如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’，可以写成new Date(2019-5-12)或者new Date(2019/5/1")
</script>>

日期格式化

<script>
	var date = new Date();
	//1.返回当前日期的年
	console.log(date.getFullYear()); //输出2021
    //2.返回当前日期的月
	console.log(date.getMonth() + 1); //返回的月份会比当前月份小一个月，所以要加1
</script>>

数组对象

传送门 ——> JavaScript之数组

字符串对象

字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串。字符串索引值从0开始

var str = '改革春风吹满春地吹';

增

改

• str.replace('改','你')        将字符串中的'改'替换成'你'，只会替换第一个出现的字符

查

• str.length                    获取字符串长度
• str.indexOf('春')         查找匹配到的第一个字符的索引值，查找不到则返回-1
• str.indexOf('春',3)      从第三个位置开始查找
• str.charAt(3)               查找索引值为3的字符
• str[0]                            查找索引值为0的字符（H5新增的）

循环打印出字符串中的字符

<script>
	var str = '改革春风吹满春地吹';
	for (var i = 0; i < str.length; i++){
		console.log(str.charAt(i));
	}
</script>

• str.charCodeAt(0)       返回相应索引号的字符ASCII值，目的是判断用户按下了哪个键
• str.concat('red')           在字符串末尾拼接red字符，其实用+号比较好
• str.substr(2,3)              从第二个位置开始截取3个字符的长度