内置对象
- JavaScript中的对象分为3种：自定义对像、内置对象、浏览器对象。
- 前面两种对象是JS基础内容，属于ECMAScript，浏览器对象属于我们JS独有的，我们JS API再讲解。
- 内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或最基本而必要的功能（属性和方法）。
- 内置对象最大的优点就是帮助我们快速开发。
- JavaScript提供了多个内置对象：Math、Date、Array、string等。
查文档
MDN
学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。
Mozilla开发者网络(MDN)提供了有关开放网络技术(Open Web)的信息，包括HTML、CSS和万维网及HTML5应用的API。
MDN:https://developer.mozilla.org/zh-CN/
Math对象
Math数学对象不是一个构造函数，所以我们不需要new来调用，直接使用里面的属性和方法即可。
举例：
console.log(Math.PI);//圆周率
console.log(Math.max(1,99,22));//99
console.1og(Math.max(1,99,'pink老师'))；//NaN
console.log(Math.max());//-Infinity//封装自己的数学对象
<script>
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);//3.1415926
console.log(myMath.max(1,5,8,3));//8
</script>Math概述
Math对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等)可以使用Math中的成员。
Math.PI //圆周率
Math.floor() //向下取整，往最小取值
Math.ceil() //向上取整，往最大取值
Math.round() //就近取整 四舍五入版 注意Math.round(-3.5)结果是-3
Math.abs() //绝对值
Math.max()/Math.min() //求最大和最小值
随机数方法 random()
Math.random()函数返回一个随机的浮点数，伪随机数在范围[0，1) 。 方法里面不跟参数。
console.log(Math.random());
如果想知道得到两数之间的一个随机整数，也可以查阅MDN手册。
function getRandom(min, max) {
return Math.floor(Math.random()*(max - min + 1)) + min;
}
console.log(getRandom(1, 10));案例：随机点名
<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>案例：猜数字游戏
<script>
function getRandom(min, max) {
return Math.floor(Math.random()*(max - min + 1)) + min;
}
var random = getRandom(1,50);
for(var num=1; num<=10; num++) {
num = prompt('请输入你猜的数字(1-50)');
if(num>random) {
alert('数字大了哦~继续猜吧');
}else if(num<random) {
alert('数字小了哦~继续猜吧');
}else {
alert('你猜对啦~~~~');
break;
}
}
if(num>10) {
alert('10次机会用完啦~');
}
</script>日期对象
Date概述
- 创建一个新Date对象的唯一方法是通过new操作符。
- Date对象和Math对象不一样，他是一个构造函数，所以我们需要实例化后才能使用。
- Date实例用来处理日期和时间
var date = new Date();//如果没有参数，那么返回当前系统的日期和时间
var date1 = new Date(2019, 10, 02);//数字型参数
var date2 = new Date('2019-10-2 8:8:8');//字符串型参数
console.log(date);
console.log(date1);//返回的是11月而不是10月
console.log(date2);日期格式化
获取日期指定的部分，我们要手动的得到这种格式。
//格式化日期：年、月、日、星期
var date = new Date();
console.log(date.getFullYear());//返回当前日期的年2022
console.log(date.getMonth()+1);//月份 返回的月份小1个月 记得月份+1
console.log(date.getDate());//返回几号
console.log(date.getDay());//周一返回1 周六返回6 但是周日返回0
//我们写一个2022年10月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]);//格式化日期：时、分、秒
var date = new Date();
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
//要求封装一个函数返回当前的时分秒格式 08：08：08
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());获取日期的总的毫秒数（时间戳）
//获得Date总的毫秒数（时间戳），不是当前时间的毫秒数, 而是距离1970年1月1号过了多少毫秒数
//1.通过valueof() getTime()
var date = new Date();
console.log(date.valueOf());//就是我们现在时间距离1970.1.1总的毫秒数
console.log(date.getTime());
//2.简单的写法（最常用的写法）
var date1 = +new Date();//+new Date() 返回的就是总的毫秒数
console.log(date1);
//3.H5新增的 获得总的毫秒数
console.log(Date.now());倒计时案例
案例分析：
①核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，比如05分减去25分，结果会是负数的。
②用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
③把剩余时间总的毫秒数转换为天、时、分、秒（时间戳转换为时分秒）。
转换公式：
d=parselnt(总秒数/60/60/24)；计算天数
h=parselnt(总秒数/60/60%24)；计算小时
m=parselnt(总秒数/60%60)；计算分数
s=parselnt(总秒数%60)；计算当前秒数
<script>
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-10-25 17:00:00'));//00天00时45分02秒
var date = new Date();
console.log(date);//Tue Oct 25 2022 16:14:57 GMT+0800 (中国标准时间)
</script>数组对象
数组对象的创建
创建数组对象的两种方式：①字面量方式 ②new Array()
//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);检测是否为数组
1.instanceof 运算符可以检测是否为数组。
var arr=[];
var obj = {};
console.log(arr instanceof Array);//true
console.log(obj instanceof Array);//false2.Array.isArray(参数)；
当检测Array实例时，Array.isArray优于instanceof，因为Array.isArray能检测iframes。
var arr=[];
console.log(Array.isArray(arr));添加删除数组元素的方法
| 方法名 | 说明 | 返回值 |
|---|---|---|
| push(参数1...) | 末尾添加一个或多个元素，注意修改原数组 | 返回新的长度 |
| pop() | 删除数组最后一个元素，数组长度减1无参数、修改原数组 | 返回删除的元素的值 |
| unshift(参数1...) | 向数组的开头添加一个或更多元素，注意修改原数组 | 返回新的长度 |
| shift() | 删除数组的第一个元素，数组长度减1无参数、修改原数组 | 返回第一个元素的值 |
//1.push是可以给数组追加新的元素
var arr = [1,2,3];
// arr.push(4,'ccc');
console.log(arr);//(5) [1, 2, 3, 4, 'ccc']
console.log(arr.push(4,'ccc'));
//2.unshift在我们数组的开头 添加一个或者多个数组元素
arr.unshift('yyy');
console.log(arr);
//3.pop()可以删除数组的最后一个元素 pop()没有参数
console.log(arr.pop());//ccc
console.log(arr);
//4.shift()可以删除数组的第一个元素 shift()没有参数
console.log(arr.shift());//yyy
console.log(arr);筛选数组案例
<script>
//有一个包含工资的数组[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);//(3) [1500, 1200, 1800]
</script>数组排序
| 方法名 | 说明 | 是否修改原数组 |
|---|---|---|
| reverse() | 颠倒数组中元素的顺序，无参数 | 会改变原来的数组，返回新数组 |
| sort() | 对数组的元素进行排序 | 会改变原来的数组，返回新数组 |
//1.翻转数组
var arr = ['pink','red','blue'];
arr.reverse();
console.log(arr);//(3) ['blue', 'red', 'pink']
//2.数组排序（冒泡排序）
var arr1=[3,14,11,77,7,1];
arr1.sort(function(a, b) {
return a-b;//升序的顺序排列
// return b-a;//降序的顺序排列
});
console.log(arr1);//(6) [1, 3, 7, 11, 14, 77]数组索引方法
| 方法名 | 说明 | 返回值 |
|---|---|---|
| indexOf() | 数组中查找给定元素的第一个索引 | 如果存在返回索引号。如果不存在，则返回-1。 |
| lastIndexOf() | 在数组中的最后一个素引 | 如果存在返回索引号。如果不存在，则返回-1。 |
//indexOf()只返回第一个满足条件的索引号.如果在该数组里面找不到元素，则返回-1
var arr = ['red','green','blue','pink','blue'];//2
var arr = ['red','green','pink'];//-1
console.log(arr.indexOf('blue'));
//lastIndexOf()从后往前开始查找
var arr = ['red','green','blue','pink','blue'];
console.log(arr.lastIndexOf('blue'));//4数组去重（重点案例）
有一个数组['c','a','z','a','x','a','x','c','b']，要求去除数组中重复的元素。
①目标：把旧数组里不重复的元素选出来放到新数组中，重复的元素保留一个，放到新数组中。
②核心算法：我们遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里没有出现过，我们就添加，否则不添加。
③我们怎么知道该元素有没有存在？利用 新数组.indexOf((数组元素)。如果返回-1就说明新数组里没有该元素。
<script>
// 有一个数组['c','a','z','a','x','a','x','c','b'],要求去除数组中重复的元素.
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']);
console.log(demo);//(5) ['c', 'a', 'z', 'x', 'b']
</script>数组转换为字符串
| 方法名 | 说明 | 返回值 |
|---|---|---|
| toString() | 把数组转换成字符串，逗号分隔每一项 | 返回一个字符串 |
| join('分隔符') | 方法用于把数组中的所有元素转换为一个字符串 | 返回一个字符串 |
//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字符串对象
字符的不可变
指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。因为我们字符串的不可变，所以不要大量的拼接字符串。
根据字符返回位置
字符串所有的方法都不会修改字符串本身（字符串是不可变的）操作完成会返回一个新的字符串。
| 方法名 | 说明 |
|---|---|
| indexOf('要查找的字符'，开始的位置) | 返回指定内容在原字符串中的位置，如果找不到就返回-1，开始的位置是index索引号 |
| lastIndexOf() | 从后往前找，只找第一个匹配的 |
//字符串对象根据字符返回位置 str.indexof('要查找的字符'，[起始的位置])
var str='改革春风吹满地，春天来了';
console.log(str.indexOf('春'));//2
console.log(str.indexOf('春',3));//8 从索引号是3的位置开始往后查找返回字符位置案例
查找字符串'abcoefoxyozzopp'中所有o出现的位置以及次数
- 核心算法：先查找第一个o出现的位置。
- 然后只要indexOf返回的结果不是-1，就继续往后查找。
- 因为indexOf只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找。
<script>
var str = 'abcoefoxyozzopp';
var index = str.indexOf('o');
var num = 0;
// console.log(index);//3
while(index !== -1) {
console.log(index);
num++;
index = str.indexOf('o',index+1);
}
console.log('一共'+num+'个o');//一共4个o
</script>根据位置返回字符（重点)
| 方法名 | 说明 | 使用 |
|---|---|---|
| charAt(index) | 返回指定位置的字符(index字符串的索引号) | str.charAt(0) |
| charCodeAt(index) | 获取指定位置处字符的ASCII码(index索引号) | str.charCodeAt(0) |
| str[index] | 获取指定位置处字符 | HTML5，IE8+支持 和charAt()等效 |
//1.charAt(index)根据位置返回字符
var str = 'andy';
console.log(str.charAt(3));
//遍历所有的字符
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返回字符位置案例
判断一个字符串'abcoefoxyozzopp'中出现次数最多的字符，并统计其次数。
- 核心算法：利用charAt()遍历这个字符串。
- 把每个字符都存储给对像，如果对象没有该属性，就为1，如果存在了就+1。
- 遍历对象，得到最大值和该字符
有一个对象来判断是否有该属性 对象['属性名']
var o = { age:18 } if(o['sex']) { console.log('里面有该属性'); }else { console.log('没有该属性'); }
<script>
var str = 'abcoefoxyozzopp';
var o = {};
for(var i=0; i<str.length; i++) {
var chars = str.charAt(i);
if(o[chars]) {
o[chars]++;
}else {
o[chars]=1;
}
}
console.log(o);//{a: 1, b: 1, c: 1, o: 4, e: 1, …}
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>字符串操作方法（重点）
| 方法名 | 说明 |
|---|---|
| concat(str1,str2,str3...) | concat()方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用 |
| substr(start,length) | 从start位置开始（索引号），length取的个数 重点记住这个 |
| slice(start,end) | 从start位置开始，截取到end位置，end取不到（他们俩都是索引号） |
| substring(start,end) | 从start位置开始，截取到end位置，end取不到 基本和slice相同 但是不接受负值 |
//1.concat('字符串1'，字符串2'..)
var str ='andy';
console.log(str.concat('red'));//andyred
//2.substr('截取的起始位置'，'截取几个字符');
var str1='改革春风吹满地';
console.log(str1.substr(2,2));// 春风 第一个2是素引号 第二个2是取几个字符其他方法
- 替换字符 replace('被替换的字符'，'替换为的字符') 它只会替换第一个字符。
- 字符转换为数组 split('分隔符') 前面学过join把数组转换为字符串。
//1.替换字符 replace('被替换的字符'，'替换为的字符') 它只会替换第一个字符
var str ='andyandy';
console.log(str.replace('a','b'));//bndyandy
//有一个字符串'abcoefoxyozzopp'要求把里面所有的o替换为*
var str1 = 'abcoefoxyozzopp';
while (str1.indexOf('o') !== -1) {
str1 = str1.replace('o','*');
}
console.log(str1);//abc*ef*xy*zz*pp
//2.字符转换为数组 sp1it('分隔符') 前面学过join把数组转换为字符串
var str2 = 'red,pink,blue';
console.log(str2.split(','));//(3) ['red', 'pink', 'blue']
var str3 = 'red&pink&blue';
console.log(str3.split('&'));//(3) ['red', 'pink', 'blue']
281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
