目录
3.2.1 案例练习 - 得到两个数之间的随机数 并且 包含这两个整数
JavaScript中对象分为3种：自定义对象、内置对象、浏览器对象
一、什么是内置对象
内置对象：指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或者是最基本而必要的功能（属性和方法）
- 内置对象最大的有点就是帮助我们快速开发
- JavaScript提供了多个内置对象：Math、Date、Array、String等
二、查询文档
2.1 MDN
学习一个内置对象的使用，只要学会其常用的使用即可，可以通过查文档学习，可通过MDN / W3C 来查询
Mozilla开发者网络（MDN）提供了有关开放网络技术的信息，包括HTML、CSS和万维网以及HTML5应用的API
2.2 如何学习对象中的方法
- 查阅该方法的功能
- 查看里面参数的意义和类型
- 查看返回值的意义和类型
- 通过demo进行测试
三、Math对象
3.1 Math概述
Math对象不是一个构造函数，所以不需要new来调用，它具有数字常数和函数属性和方法。跟数学相关的运算（求绝对值、取整、最大值、最小值等）可以使用Math中成员
3.1.1 案例练习 - 封装自己的Math对象
利用对象封装自己的Math对象，里面有PI最大值和最小值
var myMath = {
PI: 3.1415926,
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);
console.log(myMath.max(1,5,9));
console.log(myMath.min(1,5,9));
3.1.2 Math绝对值和三个取整方法
（1）绝对值
// 1.绝对值方法
console.log(Math.abs(1)); // 1
console.log(Math.abs(-1)); // 1
console.log(Math.abs('-1')); //隐式转化 会把字符串型 -1 转换为数字型
console.log(Math.abs('abc')); // NaN
（2）取整
// 2. 三个取整方法
// (1) Math.floor() 向下取整 往最小取整
console.log(Math.floor(1.1)); // 1
console.log(Math.floor(1.9)); // 1
// (2) Math.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)); // 1
console.log(Math.round(-1.1)); // -1
console.log(Math.round(-1.5)); // -1
3.2 随机数方法 random()
Math对象随机方法 random() 返回一个随机小数，在[0,1)区间即 0 <= x < 1
- 该方法里面不跟参数
console.log(Math.random());3.2.1 案例练习 - 得到两个数之间的随机数 并且 包含这两个整数
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,5));
3.2.2 案例练习 - 随机点名
var arr = ['小米','张三','小王','里昂','李雷']
function getRandom(min,max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(arr[getRandom(0,arr.length-1)]);
3.2.3 案例练习 - 猜数字游戏
程序随机生成一个1~10之间的数字，并让用户输入一个数字
- 如果数字大于该数字，则提示：数字大了，继续猜
- 如果数字小于该数字，则提示：数字小了，继续猜
- 如果等于该数字，就提示才对了，结束程序
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;
}
}
四、日期对象 Date()
Date对象是一个构造函数，需要实例化后才能使用
Date实例用来处理日期和时间
4.1 Date()方法使用
4.1.1 必须实例化 - 案例 - 获取当前时间
var now = new Date();
console.log(now)
4.1.2 Date() 构造函数的参数
如果括号里面有时间，就返回参数里面的时间。
- 例如日期格式字符穿为 '2022-2-14'
- 可以写成new Date('2022-2-14') 或者 new Date('2022/2/14')
//例如日期格式字符串为 '2022-2-14'
var date1 = new Date('2022-2-14');
console.log(date1);
4.2 日期格式化
如何获取 年-月-日 时:分:秒 （0000-00-00 00:00:00）格式
需要获取日期指定部分，需要手动得到这种格式
| 方法名 | 说明 | 代码 |
| getFullYear() | 获取当年 | dateObj.getFullYear() |
| getMonth() | 获取当月（0-11） | dateObj.getMonth() |
| getDate() | 获取当天日期 | dateObj.getDate() |
| getDay() | 获取星期几（周日0 到 周六6） | dateObj.getDay() |
| getHours() | 获取当前小时 | dateObj.getHours() |
| getMinutes() | 获取当前分钟 | dateObj.getMinutes() |
| getSeconds() | 获取当前秒钟 | dateObj.getSeconds() |
// 格式化日期 年月日
var date = new Date();
console.log(date.getFullYear());
console.log(date.getMonth() + 1);
console.log(date.getDate());
console.log(date.getDay());
// 案例 写一个 2022年 2月 13日 星期日（实际日期）
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]);
//格式化日期 时分秒
var date = new Date();
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
//要求封装一个函数返回当前的时分秒 格式00:00:00
function getTime(){
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
return h + ':' + m + ':' + s;
}
console.log(getTime());
4.3 获取日期对象的总的毫秒形式
Date 对象是基于1970年1月1日（世界标准时间）起的毫秒数
通过 valueOf()，getTime() 获取Date总的毫秒数
var date = new Date();
console.log(date.valueOf()); //现在时间距离 1970.1.1 总的毫秒数
console.log(date.getTime());
// 简单的写法
var date1 = +new Date();
console.log(date1);
// H5 新增 获取总的毫秒数
console.log(Date.now());
4.4 案例练习 - 倒计时效果
- 核心算法：输入时间减去现在的时间就是剩余的时间，即倒计时，但不能拿着时分秒相减
- 用时间戳来做。用户输入时间的总毫秒数减去现在时间的总毫秒数，得到的就是剩余时间的毫秒数
- 把剩余时间总的毫秒数转换为天、时、分、秒（时间戳转换为时分秒）
转换公式
| 公式 | 说明 |
| d = parseInt(总秒数/60/60/24); | 计算天数 |
| h = parseInt(总秒数/60/60%24); | 计算小时 |
| m = parseInt(总秒数/60%60); | 计算分数 |
| s = parseInt(总秒数%60); | 计算当前的秒数 |
function countDown(time){
var nowTime = +new Date(); // 返回当前时间的总毫秒数
var inputTime = +new Date(time); // 返回用户输入时间的总毫秒数
var times = (inputTime - nowTime) / 1000; //times是剩余时间总的秒数
var d = parseInt(times / 60 / 60 / 24);
d = d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 60);
m = m < 10 ? '0' + m : m;
var s = parseInt(times % 60);
s = s < 10 ? '0' + s : s;
return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2022-2-14 23:59:59'));
var date = new Date();
console.log(date);
五、数组对象
5.1 数组对象的创建方式
创建数组对象的两种方式
- 字面量方式
- new Array()
// 1.利用数组字面量
var arr = [1,2,3];
console.log(arr[0]);;
// 2.利用new Array()
// var arr1 = new Array(); //创建一个空数组
// var arr1 = new Array(3); // 这个 3 表示数组长度为3，里面有3个空数组元素
var arr1 = new Arry(1,2,3); //等价于[1,2,3]5.2 检测是否为数组
- instanceof 运算符
- Array.isArray(参数)
// 检测是否为数组
// 1. instanceof 运算符
var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
// 2. Array.isArray(参数)；H5新增的方法 ie9以上版本支持
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));
5.3 添加删除数组元素的方法
| 方法名 | 说明 | 返回值 |
| push(参数1...) | 末尾添加一个或多个元素，注意修改原数组 | 并返回新的长度 |
| pop() | 删除数组最后一个元素，把数组长度减1 无参数、修改原数组 | 返回它删除的元素的值 |
| unshift(参数1...) | 向数组的开头添加一个或多个元素，注意修改原数组 | 并返回新的长度 |
| shift() | 删除数组的第一个元素，数组长度减1 无参数、修改原数组 | 并返回第一个元素的值 |
// 1.push()
var arr1 = [1,2,3];
// arr1.push(4,5,'red');
console.log(arr1.push(4,5,'red')); // push结束后，返回的结果是 新数组的长度
console.log(arr1);
// 2.unshift
var arr2 = [1,2,3];
// arr2.unshift('red','blue');
console.log(arr2.unshift('red','blue'));
console.log(arr2);
// 3.pop()
var arr3 = [1,2,3];
console.log(arr3.pop()); // pop 结束后，返回的结果是 删除的那个元素
console.log(arr3);
// 4.shift()
var arr4 = [1,2,3];
console.log(arr4.shift()); // shift 结束后，返回的结果是 删除的那个元素
console.log(arr4);
5.3.1 案例练习 - 筛选数组
有一个数组[200,500,400,700,900,1100,600]，要求把数组中超过700的删除，剩余的放到新数组里面
var arr = [200, 500, 400, 700, 900, 1100, 600];
var newArr = [];
for (var i = 0; i < arr.length; i++){
if (arr[i] < 700) {
newArr.push(arr[i]);
}
}
console.log(newArr);
5.4 数组排序
| 方法名 | 说明 | 是否修改原数组 |
| reverse() | 调到数组中元素的顺序，无参数 | 该方法会改变原来的数组 返回新数组 |
| sort() | 对数组元素进行排序 | 该方法会改变原来的数组 返回新数组 |
// 数组排序
// 1.翻转数组
var arr1 = ['red', 'black', 'blue'];
arr1.reverse();
console.log(arr1);
// 2.数组排序（冒泡排序）
var arr2 = [4,7,1,6,15,5,3,13,74];
arr2.sort(function(a, b){
// return a - b; //按照升序的顺序排列
return b - a; //按照降序的顺序排列
});
console.log(arr2);
5.5 数组索引方法
| 方法名 | 说明 | 返回值 |
| indexOf() | 数组中查找给定元素的第一个索引 | 如果存在返回索引号；如果不存在，则返回-1 |
| lastIndexOf() | 在数组中的最后一个索引 | 如果存在返回索引号；如果不存在，则返回-1 |
// 返回数组元素索引号方法 indexOf(数组元素)
var arr1 = ['red', 'black', 'blue', 'orage'];
console.log(arr1.indexOf('blue'));
console.log(arr1.indexOf('green')); //-1
// 返回数组元素索引号方法 lastIndexOf(数组元素)
var arr2 = ['red', 'black', 'blue', 'orage', 'green'];
console.log(arr2.lastIndexOf('green'));
5.5.1 案例练习 - 数组去重
数组['a', 'b', 'z', 'd', 'x', 'a', 'z', 'x', 'c']，齐奥求去重数组中重复的元素
- 核心算法：遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，我们就添加，否则不添加
- 如何知道该元素是否存在？利用新数组.indexOf(数组元素)，如果返回-1就说明 新数组里面没有该元素
// 封装 去重函数 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(['a', 'b', 'z', 'd', 'x', 'a', 'z', 'x', 'c']);
console.log(demo);
5.6 数组转换为字符串
| 方法名 | 说明 | 返回值 |
| toString() | 把数组转换成字符串，都好分隔每一项 | 返回一个字符串 |
| join('分隔符') | 方法用于把数组中所有元素转换为一个字符串 | 返回一个字符串 |
// 数组转换为字符串
// 1. toString()
var arr1 = [1,2,3];
console.log(arr1.toString());
// 2. join('分隔符')
var arr2 = ['red', 'blue', 'black'];
console.log(arr2.join()); // red,blue,black
console.log(arr2.join('-')); // red-blue-black
console.log(arr2.join('&')); // red&blue&black
5.7 其他方法
| 方法名 | 说明 | 返回值 |
| concat() | 连接两个或多个数组，不影响原数组 | 返回一个新数组 |
| slice() | 数组截取slice(begin,end) | 返回被截取项目的新数组 |
| splice() | 数组删除splice(第几个开始，要删除个数) | 返回被删除项目的新数组，注意 这个会影响原数组 |
六、字符串对象
6.1 基本包装类型
为了方便操作基本包装数据类型，JavaScript还提供了三个特数的引用类型：String、Number和Boolean
基本包装类型就是吧简单数据类型包装成复杂数据类型，这样基本数据类型就有了属性和方法
//下面代码有什么问题？
var str = 'tom';
console.log(str.length);- 按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为js会把基本数据类型包装为复杂数据类型，其执行过程如下：
// 1.生成临时变量，把简单数据类型包装成为复杂数据类型
var temp = new String('tom');
// 2.赋值给我们声明的字符变量
str = temp;
// 3.销毁临时变量
temp = null;6.2 字符串的不可变
指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间
6.3 根据字符返回位置
字符串所有方法，都不会修改字符串本身（字符串是不可变的），操作玩会完全返回一个新的字符串
| 方法名 | 说明 |
| indexOf('要查找的字符',开始的位置) | 返回指定内容在原字符串的位置，如果找不到就返回-1，开始的位置是index索引号 |
| lastIndexOf() | 从后往前找，只找第一个匹配的 |
// 字符串对象 根据字符串返回位置
var str = '吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮';
console.log(str.indexOf('吃'));
console.log(str.indexOf('吃',1)); //从索引号是 1的位置开始往后查找
6.3.1 案例练习
查找字符串"abcoasdowoejopp"中所有o出现的位置以及次数
- 核心算法：先查找第一个o出现的位置，只要indexOf返回的结果不是-1就继续往后查找，因为indexOf只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找
var str = 'abcoasdowoejopp';
var index = str.indexOf('o');
var num = 0;
while(index !== -1){
console.log(index);
num++;
index = str.indexOf('o',index + 1);
}
console.log('o出现的次数是：' + num);
6.4 根据位置返回字符（重点）
| 方法 | 说明 | 使用 |
| charAt(index) | 返回指定位置的字符（index字符串的索引号） | str.charAt(0) |
| charCodeAt(index) | 获取指定位置处字符ASCII码（index索引号） | str.charCodeAt(0) |
| str[index] | 获取指定位置处字符 | HTML5，IE8+支持和charAt()等效 |
// 1. charAt(index) 根据位置返回字符
var str = 'tom';
console.log(str.charAt(2));
// 遍历所有的字符
for (var i = 0; i < str.length; i++){
console.log(str.charAt(i));
}
// 2. charCodeAt(index) 返回相应索引号的字符ASCII值 目的：判断用户按下了哪个键
console.log(str.charCodeAt(0));
// 3. str[index] H5新增
console.log(str[0]);
6.4.1 案例练习
判断一个字符串'abcbacbcabacccbacaaa'中出现次数最多的字符，并统计其次数
- 核心算法：利用charAt() 遍历这个字符串
var str = 'abcbacbcabacccbacaaa';
var count = {};
for(var i = 0; i < str.length; i++){
var chars = str.charAt(i); //chars 这里指代字符串的每一个字符
if(count[chars]){
count[chars]++;
} else{
count[chars] = 1;
}
}
console.log(count);
// 遍历对象
var max = 0;
var ch = '';
for(var key in count){
if(count[key] > max){
max = count[key];
ch = key;
}
}
console.log(max);
console.log('最多的字符是：' + ch);
6.5 字符串操作方法（重点）
| 方法明 | 说明 |
| concat(str1,str2,str3...) | concat()方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用 |
| substr(start,length) | 从start位置开始(索引号)，length 取的个数 （重点记住） |
| slice(start,end) | 从start位置开始，截取到end位置，end取不到（他们俩都是索引号）。 注意：slice()方法对于负值参数有特殊处理，负数索引表示从字符串末尾开始计算的位置。例如：slice(-1)表示字符串中的最后一个字符，slice(-2)表示倒数第二个字符。 |
| substring(start,end) | 从start位置开始，截取到end位置，end取不到，基本和slice相同。 注意：substring()方法对于负值参数会将它们视为0。如果参数是负数，则会被当作0处理。 |
// 1. concat('字符串1','字符串2'...)
var str1 = 'tom';
console.log(str1.concat('jerry'));
// 2. substr('截取的起始位置','截取几个字符')
var str2 = '明月几时有';
console.log(str2.substr(2,2));
6.6 替换字符串以及转换为数组
| 方法 | 说明 |
| replace('被替换的字符','替换为的字符') | 替换字符，它只会替换第一个字符 |
| split('分隔符') | 字符串转换为数组 |
// 1. 替换字符 replace()
var str1 = 'aabaabaac';
console.log(str1.replace('a','b'));
// 有一个字符串 'aaacbcbcbaaa' 要求把俩面所有 a 替换为 *
var str2 = 'aaacbcbcbaaa';
while(str2.indexOf('a') !== -1) {
str2 = str2.replace('a', '*');
}
console.log(str2);
// 2. 字符转换为数组 split()
var str3 = 'red,green,blue';
console.log(str3.split(','));
var str4 = 'red&green&blue';
console.log(str4.split('&'));
9321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
