JavaScript对象与内置对象详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qwq_666/article/details/118335160

本文介绍了JavaScript中的预解析机制，包括变量和函数的提升。接着详细讲解了对象的创建，如字面量、new Object以及构造函数的方式，并探讨了对象的遍历。此外，文章还深入讨论了JavaScript内置对象如Math和Date的使用，包括Math对象中的各种方法和Date对象的日期时间操作。最后，文章提到了数组对象的各种操作，如创建、检测、添加删除、筛选、排序以及去重等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

预解析

JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1
			console.log(num); // undefined 坑1
			var num = 10;
			
			// 2
			fn(); // 11
			
			function fn() {
				console.log(11);
			}
			
			// 3
			fun(); // 报错 坑2
			var fun = function() {
				console.log(22);
			}
		</script>
	</head>
	<body>
	</body>
</html>

我们js引擎运行js分为两步：预解析代码执行

(1). 预解析 js引擎会把 js 里面所有的 var 还有 function 提升到当前作用域的最前面

(2). 代码执行按照代码书写的顺序从上往下执行
预解析分为变量预解析（变量提升）和函数预解析（函数提升）

(1). 变量提升就是把所有的变量声明提升到当前的作用域最前面不提升赋值操作

(2). 函数提升就是把所有的函数声明提升到当前作用域的最前面不调用函数

案例

1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 案例1
			var num = 10;
			fun();
			
			function fun() {
				console.log(num);
				var num = 20;
				console.log(num);
			}
			// 相当于执行了以下操作
			// var num;
			
			// function fun() {
			//	var num;
			// 	console.log(num);
			//	var num = 20;
			//	console.log(num);
			// }
			// num = 10;
			// fun();
			// 结果：
			// undefined
			// 20
		</script>
	</head>
	<body>
	</body>
</html>

2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var a = 18;
			f1();
			function f1() {
				var b = 9;
				console.log(a);
				console.log(b);
				var a = '123';
			}
			/*
				结果：
				undefined
				9
			*/
		</script>
	</head>
	<body>
	</body>
</html>

对象

现实生活中，万物皆对象，对象是一个具体的事物，看得见摸得着。如：一本书、一辆汽车、一个人……

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

属性：事物的特征，在对象中用属性来表示（常用名词）

方法：事物的行为，在对象中用方法来表示（常用动词）

创建对象的三种方式

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

利用字面量创建对象

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

{ } 里面采取键值对的形式表示

键：相当于属性名

值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型、函数类型等）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// var obj = {}; // 创建了一个空的对象
			var obj = {
				uname: '阿波',
				age: 18,
				sex: '男',
				sayHi: function() {
					console.log('hi~');
				}
			}
			// (1) 里面的属性或者方法我们采取键值对的形式	键 属性名 ： 值 属性值
			// (2) 多个属性或者方法中间用逗号隔开
			// (3) 方法冒号后面跟的是一个匿名函数
			// 使用对象
			// (1) 调用对象的属性		我们采取 对象名.属性名	.我们理解为	的
			console.log(obj.uname);
			// (2) 调用属性还有一种方法 对象名['属性名']
			console.log(obj['age']);
			// (3) 调用对象的方法 sayHi 对象名.方法名() 千万别忘记添加小括号
			obj.sayHi();
		</script>
	</head>
	<body>
	</body>
</html>

变量、属性、函数、方法的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1.变量和属性的相同点 他们都是用来存储数据的
			var num = 10;
			var obj = {
				age: 18,
				fn: function() {
					
				}
			}
			console.log(obj.age);
			// 变量	单独声明并赋值	使用的时候直接写变量名   单独存在
			// 属性 在对象里面的不需要声明的	使用的时候必须是	对象.属性
			// 2.函数和方法的相同点	都是实现某种功能 做某件事
			// 函数是单独声明 并且调用的 函数名() 单独存在
			// 方法 在对象里面 调用的时候 对象.方法()
		</script>
	</head>
	<body>
	</body>
</html>

利用new Object创建对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var obj = new Object();// 创建了一个空的对象
			obj.uname = '阿波';
			obj.age = 18;
			obj.sex = '男';
			obj.sayHi = function() {
				console.log('hi~');
			}
			// (1) 我们是利用 等号= 赋值的方法 添加对象的属性和方法
			// (2) 每个属性和方法之间用 分号结束
			 console.log(obj.uname);
			 console.log(obj['sex']);
			 obj.sayHi();
		</script>
	</head>
	<body>
	</body>
</html>

构造函数

为何需要构造函数

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 创建四大天王的对象 相同的属性：名字、年龄、性别 相同的方法：唱歌
			// 构造函数的语法格式
			// function 构造函数名() {
			// 	this.属性 = 值;
			// 	this.方法 = function() {}
			// }
			// new 构造函数名();
			function Star(uname,age,sex) {
				this.name = uname;
				this.age = age;
				this.sex = sex;
				this.sing = function(sang) {
					console.log(sang);
				}
			}
			// new Star('刘德华',18,'男');
			var ldh = new Star('刘德华',18,'男');// 调用函数返回的是一个对象
			// console.log(typeof ldh);
			console.log(ldh.name);
			console.log(ldh.age);
			console.log(ldh['sex']);
			ldh.sing('冰雨');
			
			
			var zxy = new Star('张学友',19,'男');
			console.log(zxy.name);
			console.log(zxy.age);
			console.log(zxy['sex']);
			zxy.sing('吻别');
			// 1.构造函数名字首字母要大写
			// 2.构造函数不需要return就可以返回结果
			// 3.调用构造函数 必须使用new
			// 4.只要new Star() 调用函数就创建一个对象 ldh {}
			// 5.我们的属性和方法前面必须添加this
		</script>
	</head>
	<body>
	</body>
</html>

构造函数和对象的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1.构造函数 明星 泛指某一大类 它类似于Java里面的 类（class）
			function Star(uname,age,sex) {
				this.name = uname;
				this.age = age;
				this.sex = sex;
				this.sing = function(sang) {
					console.log(sang);
				}
			}
			// 2.对象特指一个具体的事物 刘德华 == {name:'刘德华',age: 18,sex:'男',sing:f}
			var ldh = new Star('刘德华',18,'男');// 调用函数返回的是一个对象
			console.log(ldh);
			// 3.利用函数构造创建对象的过程我们也称为对象的实例化
		</script>
	</head>
	<body>
	</body>
</html>

new关键字执行过程

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1.new 构造函数可以在内存中创建一个空的对象
			// 2.this 就会指向刚才创建的空对象
			// 3.执行构造函数里面的代码 给这个空对象添加属性和方法
			// 4.返回这个对象
			function Star(name,age,sex) {
				this.name = name;
				this.age = age;
				this.sex = sex;
				this.sing = function(sang) {
					console.log(sang);
				}
			}
			var ldh = new Star('刘德华',18,'男');
		</script>
	</head>
	<body>
	</body>
</html>

遍历对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var obj = {
				uname: '阿波',
				age: 18,
				sex: '男',
				fn: function() {}
			}
			// console.log(obj.name);
			// console.log(obj.age);
			// console.log(obj.sex);
			
			// for in 遍历对象
			// for(变量 in 对象) {}
			for (var k in obj) {
				console.log(k);// k变量 输出 得到的是属性名
				console.log(obj[k]);// obj[k] 得到的是 属性值
			}
			// 我们使用 for in 里面的变量 喜欢写 k 或者 key
		</script>
	</head>
	<body>
	</body>
</html>

内置对象

就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）

查文档

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

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

如何学习对象中的方法

查阅该方法的功能
查看里面参数的意义和类型
查看返回值的意义和类型
通过demo进行测试

Math对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// Math数学对象 不是一个构造函数，所以我们不需要new来调用，而是直接使用里面的属性和方法即可
			console.log(Math.PI); // 一个属性 圆周率
			console.log(Math.max(1,99,3)); // 99
			console.log(Math.max(-1,-10)); // -1
			console.log(Math.max(1,99,'阿波')); // NaN
			console.log(Math.max()); // -Infinity
		</script>
	</head>
	<body>
	</body>
</html>

案例：封装自己的数学对象

利用对象封装自己的数学对象里面有PI最大值和最小值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var myMath = {
				PI: 3.141592653,
				max: function() {
					var max = arguments[0];
					for (var i = 1; i < arguments.length; i++) {
						if (arguments[i] > max) {
							max = arguments[i];
						}
					}
					return max;
				},
				min: function() {
					var min = arguments[0];
					for (var i = 1; i < arguments.length; i++) {
						if (arguments[i] < min) {
							min = arguments[i];
						}
					}
					return min;
				}
			}
			console.log(myMath.PI); // 3.141592653
			console.log(myMath.max(1,5,9)); // 9
			console.log(myMath.min(1,5,9)); // 1
		</script>
	</head>
	<body>
	</body>
</html>

Math绝对值和三个取整方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1.绝对值方法
			console.log(Math.abs(1)); // 1
			console.log(Math.abs(-1));// 1
			console.log(Math.abs('-1')); // 隐式转换 会把字符串型 -1 转换为 数字型
			console.log(Math.abs('pink')); // NaN
			
			// 2.三个取整方法
			// （1）Math.floor() 地板 向下取整 往小了取值
			console.log(Math.floor(1.1)); // 1
			console.log(Math.floor(1.9)); // 1
			// （2）Math.ceil() ceil 天花板 向上取整 往大了取值
			console.log(Math.ceil(1.1)); // 2
			console.log(Math.ceil(1.9)); // 2
			// （3）Math.round() 四舍五入 其他数字都是四舍五入，但是 .5 特殊 它往大了取
			console.log(Math.round(1.1)); // 1
			console.log(Math.round(1.5)); //2
			console.log(Math.round(1.9)); //2
			console.log(Math.round(-1.1)); //-1
			console.log(Math.round(-1.5)); // 这个结果是 -1
 		</script>
	</head>
	<body>
	</body>
</html>

Math随机数方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1.Math对象随机数方法 random() 返回一个随机的小数 0 =< x < 1
			// 2.这个方法里面不跟参数
			// 3.代码验证
			console.log(Math.random());
			// 4.我们想要得到两个数之间的随机整数 并且 包含这个2个整数
			// Math.floor(Math.random() * (max - min + 1)) + min;
			function getRandom(min,max) {
				return Math.floor(Math.random() * (max - min + 1)) + min;
			}
			console.log(getRandom(1,10));
			
			// 随机点名
			var arr = ['娑娜','璐璐','凯尔','戴安娜','莫甘娜','卡尔玛'];
			// console.log(arr[0]);
			console.log(arr[getRandom(0,arr.length - 1)]);
		</script>
	</head>
	<body>
	</body>
</html>

猜数字游戏

程序随机生成一个1~10之间的数字，并让用户输入一个数字

如果大于该数字，就提示数字大了，继续猜
如果小于该数字，就提示数字小了，继续猜
如果等于该数字，就提示猜对了，结束程序

分析：

随机生成一个1~10的整数，需要用到Math.random()方法
需要一直猜到正确为止，所以一直循环
用while循环更合适更简单
核心算法：使用if else if 多分支语句来判断大于、小于、等于

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function GetRandom(min,max) {
				return Math.floor(Math.random() * (max - min + 1)) + min;
			}
			var random = GetRandom(1,10);
			while (true) { // 死循环
				var num = prompt('你来猜？输入1~10之间的一个数字');
				if (num > random) {
					alert('你猜大了');
				} else if (num < random) {
					alert('你猜小了');
				} else {
					alert('猜对了');
					break; // 退出整个循环结束程序
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

Date日期对象

获取当前时间必须实例化

var now = new Date();
console.log(now);

Date()构造函数的参数

如果括号里面有时间，就返回参数里面的时间，例如日期格式字符串为’2021-5-1’,可以写成new Date(‘2021-5-1’) 或者 new Date(‘2021/5/1’)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// Date() 日期对象 是一个构造函数 必须使用new来调用创建我们的日期对象
			var arr = new Array(); // 创建了一个数组对象
			var obj = new Object(); // 创建了一个对象实例
			// 1.使用Date 如果没有参数 返回当前系统的当前时间
			var date = new Date(); // Fri Jun 25 2021 15:15:50 GMT+0800 (中国标准时间)
			console.log(date);
			// 2.参数常用的写法 数字型 2021,10,01 或者是 字符串型 '2021-10-1 8:8:8'
			var date1 = new Date(2021,10,1);
			console.log(date1); // 返回的是 11月 不是 10月 Mon Nov 01 2021 00:00:00 GMT+0800 (中国标准时间)
			var date2 = new Date('2021-10-1 8:8:8');
			console.log(date2); // Fri Oct 01 2021 08:08:08 GMT+0800 (中国标准时间)
		</script>
	</head>
	<body>
	</body>
</html>

日期格式化

想要2099-8-8 8:8:8 格式的日期，要怎么办？需要获取日期指定的部分，所以我们要手动的得到这个格式

方法名	说明	代码
getFullYear()	获取当年	dObj.getFullYear()
getMonth()	获取当月（0-11）	dObj.getMonth()
getDate()	获取当天日期	dObj.getDate()
getDay()	获取星期几（周日0到周六6）	dObj.getDay()
getHours()	获取当前小时	dObj.getHours()
getMinutes()	获取当前分钟	dObj.getMinutes()
getSeconds()	获取当前秒钟	dObj.getSeconds()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 格式化日期 年月日
			var date = new Date();
			console.log(date.getFullYear()); // 返回当前日期的年 2021
			console.log(date.getMonth() + 1); // 月份 返回的月份小1个月 记得月份+1哟
			console.log(date.getDate()); // 返回的是 几号
			console.log(date.getDay()); // 周一返回的是1 周六返回的是6 但是 周日返回的是0
			// 写一个2021年 6月 25日 星期五
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var dates = date.getDate();
			var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
			var day = date.getDay();
			console.log('今天是' + year + '年' + month + '月' + dates + '日' + arr[day]);
		</script>
	</head>
	<body>
	</body>
</html>

格式化时分秒

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var time = new Date();
			console.log(time.getHours()); // 时
			console.log(time.getMinutes()); // 分
			console.log(time.getSeconds()); // 秒
            
			// 要求封装一个函数返回当前的时分秒 格式 08:08:08
			function getTime() {
				var t = new Date();
				var h = t.getHours();
				h = h < 10 ? '0' + h : h;
				var m = t.getMinutes();
				m = m < 10 ? '0' + m : m;
				var s = t.getSeconds();
				s = s < 10 ? '0' + s : s;
				return h + ':' + m + ':' + s;
			}
			console.log(getTime());
		</script>
	</head>
	<body>
	</body>
</html>

获取日期的总的毫秒形式

Date对象是基于1970年1月1日（世界标准时间）起的毫秒数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 获得Date总的毫秒数 不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数
			// 1.通过 valueOf() getTime()
			var date = new Date();
			console.log(date.valueOf()); // 就是 我们现在时间 距离1970.1.1 总的毫秒数 1624606984660
			console.log(date.getTime()); // 1624606984660
			// 2.简单的写法（最常用的写法）
			var date1 = +new Date(); // +new Date() 返回的就是总的毫秒数
			console.log(date1); // 1624606984660
			// 3.H5新增的 获得总的毫秒数
			console.log(Date.now());
		</script>
	</head>
	<body>
	</body>
</html>

倒计时案例

分析：

核心算法：输入的时间减去现在的时间就是剩余时间，即倒计时，但是不能拿着时分秒相减，比如05分减去25分，结果会是负数
用时间戳来做。用户输入的时间的总毫秒数减去现在的总毫秒数，得到的就是剩余时间的毫秒数

把剩余时间总的毫秒数转换为天、时、分、秒（时间转换为时分秒）

转换公式如下：

d = parseInt(总秒数/60/60/24); // 计算天数
h = parseInt(总秒数/60/60%24); // 计算小时
m = parseInt(总秒数/60%60);    // 计算分数
s = parseInt(总秒数%60);       // 计算当前秒数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function countDown(time) {
				var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
				var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数
				var times = (inputTime - nowTime) / 1000; // time是剩余时间总的秒数
				var d = parseInt(times / 60 / 60 / 24); // 天
				var h = parseInt(times / 60 / 60 % 24); // 时
				var m = parseInt(times / 60 % 60); // 分
				var s = parseInt(times % 60); // 当前的秒
				return d + '天' + h + '时' + m + '分' + s + '秒';
			}
			console.log(countDown('2021-6-29 14:30:00'));
			var date = new Date();
			console.log(date);
		</script>
	</head>
	<body>
	</body>
</html>

数组对象

数组创建的两种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 创建数组的两种方式
			// 1.利用数组字面量
			var arr = [1,2,3];
			console.log(arr[0]); // 1
			
			// 2.利用new Array()
			// var arr1 = new Array(); // 创建了一个空的数组
			// var arr1 = new Array(2); // 这个2表示数组的长度为2，里面有2个空的数组元素
			var arr1 = new Array(2,3); // 等价于[2,3] 这样写表示，里面有2个数组的元素，是2和3
			console.log(arr1);
		</script>
	</head>
	<body>
	</body>
</html>

检测是否为数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 检测是否为数组
			// (1) instanceof 运算符 它可以用来检测是否为数组
			var arr = [];
			var obj = {};
			console.log(arr instanceof Array); // true
			console.log(obj instanceof Array); // false
			
			//(2) Array.isArray(参数); H5新增的方法 ie9以上版本支持
			console.log(Array.isArray(arr)); // true
			console.log(Array.isArray(obj)); // false
		</script>
	</head>
	<body>
	</body>
</html>

添加删除数组元素

方法名	说明	返回值
push(参数1…)	末尾添加一个或多个元素，注意修改原数组	并返回新的长度
pop()	删除数组最后一个元素，把数组长度减1 无参数、修改原数组	返回它删除的元素的值
unshift(参数1…)	向数组的开头添加一个或更多元素，注意修改原数组	并返回新的长度
shift()	删除数组的第一个元素，数组长度减1 无参数、修改原数组	并返回第一个元素的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1.push() 在我们数组的末尾添加一个或者多个数组元素 push 推
			var arr = [1,2,3];
			console.log(arr.push(4,'阿波')); // [1,2,3,4,'阿波']
			console.log(arr);// 5
			// (1) push 可以给数组追加新的元素
			// (2) push() 参数直接写 数组元素就可以了
			// (3) push 完毕之后，返回的结果是 新数组的长度
			// (4) 原数组也会发生变化
			
			// 2.unshift 在我们数组的开头 添加一个或者多个数组元素
			console.log(arr.unshift('波波','宏波')); // ['波波','宏波',1,2,3,4,'阿波']
			console.log(arr);// 7
			// (1) unshift 可以给数组追加新的元素
			// (2) unshift() 参数直接写 数组元素就可以了
			// (3) unshift 完毕之后，返回的结果是 新数组的长度
			// (4) 原数组也会发生变化
			
			// 3.pop() 它可以是删除数组的最后一个元素
			console.log(arr.pop()); // 阿波
			console.log(arr); // 6
			// ['波波','宏波',1,2,3,4]
			// (1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
			// (2) pop() 没有参数
			// (3) pop完毕之后，返回的结果是 删除的那个元素
			// (4) 原数组也会发生变化
			
			// 4.shift() 它可以删除数组的第一个元素 记住一次只能删除一个元素
			console.log(arr.shift()); // 波波
			console.log(arr); // 5
			 // ['宏波',1,2,3,4]
			// (1) shift是可以删除数组的第一个元素 记住一次只能删除一个元素
			// (2) shift() 没有参数
			// (3) shift完毕之后，返回的结果是 删除的那个元素
			// (4) 原数组也会发生变化
		</script>
	</head>
	<body>
	</body>
</html>

筛选数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// [1500,1200,2000,2100,1800]，要求把数组中超过2000的删除，剩余的放到新数组里面
			var arr = [1500,1200,2000,2100,1800];
			var newArr = [];
			for (var i = 0; i < arr.length; i++) {
				if (arr[i] <= 2000) {
					// newArr[newArr.length] = arr[i];
					newArr.push(arr[i]);
				}
			}
			console.log(newArr);
			// 4 [1500,1200,2000,1800]
		</script>
	</head>
	<body>
	</body>
</html>

数组排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 数组排序
			// 1.翻转数组
			var arr = ['娑娜','戴安娜','莫甘娜'];
			arr.reverse();
			console.log(arr); // ['莫甘娜','戴安娜','娑娜']
			
			// 2.数组排序（冒泡排序）
			var arr1 = [13,4,77,1,7];
			arr1.sort(function(a,b) {
				// return a - b; 升序的顺序排列 // [1,4,7,13,77]
				return b - a; // 降序的顺序排列 // [77,13,7,4,1]
			});
			console.log(arr1);
		</script>
	</head>
	<body>
	</body>
</html>

数组索引方法

方法名	说明	返回值
indexOf()	数组中查找给定元素的第一个索引	如果存在返回索引号如果不存在，则返回-1
lastIndexOf()	在数组中的最后一个的索引	如果存在返回索引号如果不存在，则返回-1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 返回数组元素索引号方法 indexOf(数组元素) 作用就是返回该数组元素的索引号
			// 它只返回第一个满足条件的索引号
			// 它如果在该数组里面找不到元素，则返回的是-1
			// var arr = ['red','green','blue','pink','blue'];
			var arr = ['red','green','pink'];
			console.log(arr.indexOf('blue')); // -1
			// 返回数组元素索引号方法 lastIndexOf(数组元素) 作用就是返回该数组元素的索引号 从后面开始查找
			var arr = ['red','green','blue','pink','blue'];
			console.log(arr.lastIndexOf('blue')); // 4
		</script>
	</head>
	<body>
	</body>
</html>

数组去重案例

分析：

目标：把就数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个，放到新数组中去重
核心算法：我们遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，我们就添加，否则不添加
我们怎么知道该元素没有存在？利用新数组.indexOf(数组元素) 如果返回-1就说明新数组里面没有该元素
```
旧数组 ['c','a','z','a','x','a','x','c','b']
新数组 []
```

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 封装一个去重的函数 unique 独一无二的
			function unique(arr) {
				var newArr = [];
				for (var i = 0; i < arr.length; i++) {
					if(newArr.indexOf(arr[i]) === -1) {
						newArr.push(arr[i]);
					}
				}
				return newArr;
			}
			// var demo = unique(['c','a','z','a','x','a','x','c','b'])
			var demo = unique(['blue','green','blue'])
			console.log(demo); // ['blue','green']
		</script>
	</head>
	<body>
	</body>
</html>

数组转换为字符串与分隔符

方法名	说明	返回值
toString()	把数组转换成字符串，逗号分隔每一项	返回一个字符串
join(‘分隔符’)	方法用于把数组中的所有元素转换为一个字符串	返回一个字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 数组转换为字符串
			// 1.toString() 将我们的数组转换为字符串
			var arr = [1,2,3];
			console.log(arr.toString()); // 1,2,3
			
			// 2.join(分隔符)
			var arr1 = ['green','blue','pink'];
			console.log(arr1.join()); // green,blue,pink
			console.log(arr1.join('-')); // green-blue-pink
			console.log(arr1.join('&')); // green&blue&pink
		</script>
	</head>
	<body>
	</body>
</html>

部分其他方法

方法名	说明	返回值
concat()	连接两个或多个数组不影响原数组	返回一个新的数组
slice()	数组截取slice(begin,end)	返回被截取项目的新数组
splice()	数组删除splice(第几个开始，要删除个数)	返回被删除项目的新数组注意，这个会影响原数组

slice() 和 splice() 目的基本相同，建议重点看下 splice()

字符串对象

基本包装类型

基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法

var str = 'andy';
console.log(str.length);

基本数据类型是没有属性和方法的，对象才有属性和方法，但上面代码却可以执行，这是因为js会把基本数据类型包装为复杂数据类型，其执行过程如下：

// 1.生成临时变量，把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2.赋值给我们声明的字符变量
str = temp;
// 3.销毁临时变量
temp = null;

字符串的不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间

var src = 'abc';
str = 'hello';
// 当重新给str赋值的时候，常量'abc'不会被修改，依然在内存中
// 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
// 由于字符串的不可变，在大量拼接字符串的时候会有效率问题
var str = ''
for (var i = o; i < 100000; i ++) {
	str += i;                           
}
console.log(str); // 这个结果需要花费大量时间来显示，因为需要不断的开辟新空间

根据字符返回位置

字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串

方法名	说明
indexOf(‘要查找的字符’,开始的位置)	返回指定内容在原字符串中的位置，如果找不到就返回-1，开始的位置是index索引号
lastindexOf()	从后往前找，只找第一个匹配的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 字符串对象 根据字符返回位置 str.indexOf('要查找的字符',[起始的位置])
			var str = '改革春风吹满地,春天来了';
			console.log(str.indexOf('春')); // 2
			// 8
			console.log(str.indexOf('春',3)); // 从索引号是3的位置开始往后查找
		</script>
	</head>
	<body>
	</body>
</html>

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 查找字符串“abcoefoxyozzopp”中所有o出现的位置以及次数
			// 核心算法：先查找第一个o出现的位置
			// 然后 只要indexOf 返回的结果不是-1就继续往后查找
			// 因为indexOf只能查找到第一个，所以后面的查找，一定是当前索引加1，从而继续查找
			var str = "abcoefoxyozzopp";
			var index = str.indexOf('o');
			var num = 0;
			while (index !== -1) {
				console.log(index);
				num++;
				index = str.indexOf('o',index + 1); // 3,6,9,12
			}
			console.log('o出现的次数是：' + num); // 4
		</script>
	</head>
	<body>
	</body>
</html>

根据位置返回字符（重点）

方法名	说明	使用
charAt(index)	返回指定位置的字符(index 字符串的索引号)	str.charAt()
charCodeAt(index)	获取指定位置处字符的ASCII码(index索引号)	str.charCodeAt(0)
str[index]	获取指定位置处字符	HTML5，IE8+支持和charAt()等效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 根据位置返回字符
			// 1.charAt(index) 根据位置返回字符
			var str = 'andy';
			console.log(str.charAt(3)); // y
			// 遍历所有的字符 a,n,d,y
			for (var i = 0; i < str.length; i++) {
				console.log(str.charAt(i));
			}
			// 2.charCodeAt(index) 返回相应索引字符ASCII值 目的：判断用户按下了哪个键
			console.log(str.charCodeAt(0)); // 97
			// 3.str[index] H5新增的
			console.log(str[0]); // a
		</script>
	</head>
	<body>
	</body>
</html>

案例

判断一个字符串’abcoefoxyozzopp’中出现次数最多的字符，并统计其次数

核心算法：利用charAt() 遍历这个字符串
把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在了就+1
遍历对象，得到最大值和该字符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var str = 'abcoefoxyozzopp';
			var o = {};
			for (var i = 0; i < str.length; i++) {
				var chars = str.charAt(i); // chars是字符串的每一个字符
				if (o[chars]) { // o[chars] 得到的是属性值
					o[chars]++;
				} else {
					o[chars] = 1;
				}
			}
			console.log(o);
			// 2.遍历对象
			var max = 0;
			var ch = '';
			for (var k in o) {
				// k 得到的是 属性名
				// o[k] 得到的是属性值
				if (o[k] > max) {
					max = o[k];
					ch = k;
				}
			}
			console.log(max); // 4
			console.log('最多的字符是' + ch); // o
		</script>
	</head>
	<body>
	</body>
</html>

字符串操作方法（重点）

方法名	说明
concat(str1,str2,str3…)	concat()方法用于连接两个或多个字符串，拼接字符串，等效于+，+更常用
substr(start,length)	从start位置开始(索引号)，length取的个数重点记住这个
slice(start,end)	从start位置开始，截取到end位置，end取不到(它们两都是索引号)
substring(start,end)	从start位置开始，截取到end位置，end取不到基本和slice相同但是不接受负值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1.concat('字符串1','字符串2'…)
			var str = 'andy';
			console.log(str.concat('red')); // andyred
			
			// 2.substr('截取的起始位置','截取几个字符');
			var str1 = '最爱琴女E';
			console.log(str1.substr(2,2)); // 第一个2是索引号的2，从第几个开始，第二个2是取几个字符
			// 结果：琴女
		</script>
	</head>
	<body>
	</body>
</html>

替换字符串以及转换为数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1.替换字符 replace('被替换的字符','替换为的字符') 它只会替换第一个字符
			var str = '阿波';
			console.log(str.replace('阿','波')); // '波波'
			// 有一个字符串 'abcoefoxyozzopp' 要求把里面所有的 o 替换为 *
			var str1 = 'abcoefoxyozzopp';
			while (str1.indexOf('o') !== -1) {
				str1 = str1.replace('o','*');
			}
			console.log(str1); // abc*ef*xy*zz*pp
			
			// 2.字符转换为数组 split('分隔符')
			var str2 = 'red,pink,blue';
			console.log(str2.split(',')); // ["red", "pink", "blue"]
			var str3 = 'red&pink&blue';
			console.log(str3.split('&')); // ["red", "pink", "blue"]
		</script>
	</head>
	<body>
	</body>
</html>