目标
- 能够说出什么是内置对象
- 能够根据文档查询指定API的使用方法
- 能够使用Math 对象的常用方法
- 能够使用Date对象的常用方法
- 能够使用Array对象的常用方法
- 能够使用String对象的常用方法
1. 内置对象
JavaScript中的对象分为3种︰自定义对象、内置对象、浏览器对象,前面两种对象是JS基础内容,属于ECMAScript;第三个浏览器对象属于我们JS独有的,我们JS API讲解。
- 内置对象就是指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)
- 内置对象最大的优点就是帮助我们快速开发
- JavaScript提供了多个内置对象∶Math、Date . Array、string等
2.查文档
2.1 MDN
学习一个内置对象的使用,只要学会其常用成员的使用即可,我们可以通过查文档学习,可以通过MDN/W3C来查询。
Mozilla开发者网络(MDN)提供了有关开放网络技术( Open Web ) 的信息,包括HTML、CSS和万维网及HTML5应用的API。
MDN:https://developer.mozilla.org/zh-CN/
2.2如何学习对象中的方法
- 查阅该方法的功能
- 查看里面参数的意义和类型
- 查看返回值的意义和类型
- 通过demo进行测试
3. Math对象
Math数学对象不是一个构造函数﹐所以我们不需要new来调用而是直接使用里面的属性和方法即可
3.1 案例:封装自己的数学对象
利用对象封装自己的数学对象里面有PI最大值和最小值
<script>
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);
console.log(myMath.max(1,56,9));
console.log(myMath.min(5,9,3));
</script>
3.2 Math概述
Math对象不是构造函数,它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整、最大值等)可以使用Math中的成员。
3.2.1 绝对值方法(Math.abs() )
3.2.2 三个取整方法
Math.floor() //floor 地板的意思 向下取整 往最小了取值
Math.ceil() //ceil 天花板的意思 向上取整 往最大了取值
Math.round() //四舍五入 其他数字都是四舍五入,但是 .5 特殊 它往大了取
3.3 随机数方法 :random()
- Math对象随机数方法 random()返回一个浮点型伪随机数字,在0(包括0)和1(不包括)之间。
- 这个方法里面不跟参数
- 代码验证
console.log(Math.random());
- 我们想要得到两个数之间的随机整数,并且包含这2个整数
Math.floor(Math.random()*(max-min+1))+min;
<script>
function getRandom(min,max){
return Math.floor(Math.random()*(max-min+1))+min;
}
console.log(getRandom(1,10));
</script>
3.3.1 随机点名
<script>
function getRandom(min,max){
return Math.floor(Math.random()*(max-min+1))+min;
}
var arr=['小明','小亮','小华','小超'];
console.log(arr[getRandom(0,3)]);
</script>
3.3.2 猜数字游戏
程序随机生成一个1~10之间的数字,并让用户输入一个数字,
1.如果大于该数字,就提示,数字大了,继续猜;
2.如果小于该数字,就提示数字小了,继续猜;
3.如果等于该数字,就提示猜对了,结束程序。
<script>
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>
4.日期对象 Date()
Date() 日期对象 是一个构造函数,必须使用new来调用创建我们的日期对象
var arr=new Array();//创建一个数组对象
var obj=new Object();//创建了一个对象实例
使用Date ,如果没有参数,返回当前系统的当前时间
var date =new Date();
console.log(date);
4.1 日期格式化
4.2 格式化日期 年月日
<script>
//格式化日期,年月日
var date=new Date();
console.log(date.getFullYear());//返回当前日期的年 2019
console.log(date.getMonth());//月份,返回的月份小1个月
console.log(date.getDate());//返回的是几号
console.log(date.getDay());//周一返回的是1,周六返回的是6 但是 周日返回的是0
//我们写了一个2019年5月1日 星期三
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>
4.3 格式化日期 时分秒
<script>
//格式化日期 时分秒
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());
</script>
4.4 获取日期的总的毫秒形式
- 获得Date总的毫秒数,不是当前时间的毫秒数而是距离1970年1月1号过了多少毫秒数。
- 通过 valueOf() getTime()
<script>
var date=new Date();
console.log(date.valueOf());//就是 我们现在的时间 距离1970.1.1 总的毫秒数
console.log(date.getTime());
</script>
- 简单的写法(最常用的写法)
<script>
var date1= +new Date();//+new Date() 返回的就是总的毫秒数
console.log(date1);
</script>
- H5 新增的 获得总的毫秒数
console.log(Date.now());
4.5 倒计时的效果
核心算法∶
- 输入的时间减去现在的时间就是剩余的时间,即倒计时,但是不能拿着时分秒
相减,比如05分减去25分,结果会是负数的。 - 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数。
- 把剩余时间总的毫秒数转换为天、时、分、秒(时间戳转换为时分秒)
- 转换公式如下:
<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-4-10 19:00:00'));
var date=new Date();
console.log(date);
</script>
5.数组对象
5.1 数组对象的创建
5.2 检测是否为数组
- instanceof 运算符 它可以用来检测是否为数组
var arr=[];
console.log(arr instanceof Array);
- Array.isArray(参数) ;用于确定传递的值是否是一个 Array
Array.isArray([1, 2, 3]);
// true
Array.isArray({foo: 123});
// false
Array.isArray("foobar");
// false
Array.isArray(undefined);
// false
5.3 添加删除数组元素的方法
5.3.1 push() 末尾添加一个或者多个数组元素
在我们数组的末尾添加一个或者多个数组元素,push推
<script>
var arr=[1,2,3];
console.log(arr.push(4,'pink'));//返回的结果是 新数组的长度
</script>
<script>
var arr=[1,2,3];
arr.push(4,'pink');
console.log(arr);//返回的结果是 新数组
</script>
5.3.2 unshift()开头添加元素
在我们数组的开头添加一个或者多个数组元素
<script>
var arr=[1,2,3];
arr.push(4,'pink');
arr.unshift('red');
console.log(arr);//返回的结果是 新数组的长度
</script>
- unshift是可以给数组前面追加新的元素
- unshift()参数直接写数组元素就可以了
- unshift完毕之后,返回的结果是 新数组的长度
- 原数组也会发生变化
5.3.3 pop( ) 删除数组的最后一个元素
它可以删除数组的最后一个元素
代码:
<script>
var arr=[1,2,3];
arr.pop();
console.log(arr);//删除数组最后一个元素,所得的数组
</script>
运行结果:
代码:
<script>
var arr=[1,2,3];
console.log(arr.pop());
console.log(arr);//删除数组最后一个元素,所得的数组
</script>
运行结果:
注意:
5.3.4 shift();删去数组第一个元素
代码:
<script>
var arr=[1,2,3];
arr.shift();
console.log(arr);//删除数组第一个元素,所得的数组
</script>
- shift是可以删除数组的第一个元素记住一次只能删除一个元素
- shift()没有参数
- shift完毕之后,返回的结果是删除的那个元素
- 原数组也会发生变化
5.4 筛选数组
有一个包含工资的数组[1500,1200,2000,2100,1800],要求把数组中工资超过2000的删除,剩余的放到新数组里面
<script>
var arr=[1500,1200,2000,1800];
var newArr=[];
for(var i=0;i<arr.length;i++){
if(arr[i]<2000){
newArr[newArr.length]=arr[i];
}
}
console.log(newArr);
</script>
<script>
var arr=[1500,1200,2000,1800];
var newArr=[];
for(var i=0;i<arr.length;i++){
if(arr[i]<2000){
newArr.push(arr[i]);
}
}
console.log(newArr);//直接追加到新数组里面
</script>
5.5 数组排序
代码:
<script>
//数组排序
// 1.翻转数组
var arr=['pink','dog','cat'];
arr.reverse();
console.log(arr);
</script>
运行结果:
5.6 数组排序(冒泡排序)
代码:
<script>
//数组排序
// 1.冒泡排序
var arr=[3,9,8,6];
arr.sort(function(a,b){
return a-b;//升序的顺序排列
return b-a;//降序的顺序排列
});
console.log(arr);
</script>
5.7 返回数组元素索引号方法
// 返回数组元素索引号方法:indexOf(数组元素);
//作用就是返回该数组元素的索引号,它只返回第一个满足条件的索引号
<script>
// 返回数组元素索引号方法:indexof(数组元素)
//作用就是返回该数组元素的索引号,它只返回第一个满足条件的索引号
//从前面开始查找
//它如果在该数组里面找不到元素,则返回的是-1
var arr=['red','green','blue','pink','blue'];
console.log(arr.indexOf('blue'));
// 返回数组元素索引号方法:lastIndexOf(数组元素)
//作用就是返回该数组元素的索引号
// 从后面开始查找
console.log(arr.lastIndexOf('blue'));
</script>
5.8 数组去重(重点)
代码:
<script>
//封装一个 去重的函数 unique 独一无二的
function unique(arr){
var newArr=[];
for (var i=0;i<arr.length;i++){ //遍历数组
if(newArr.indexOf(arr[i])===-1){// newArr.indexOf(arr[i]) 旧数组元素去查询新数组,
newArr.push(arr[i]);
}
}
return newArr;
}
var demo =unique([ 'c', 'a', 'z', 'a', 'x', 'a', 'x' , 'c','b']);
console.log(demo);
</script>
5.9 数组转换为字符串
5.10 toString() 将我们的数组转换为字符串
<body>
<script>
var arr=[1,2,3];
console.log(arr.toString()); // 输出结果:1,2,3
//join('分隔符');
console.log(arr.join('-')); // 1-2-3
console.log(arr.join('&')); // 1&2&3
</script>
</body>
6. 字符串对象
6.1 基本包装类型
为了方便操作基本数据类型,JavaScript还提供了三个特殊的引用类型:String、Number和Boolean。
基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。
按道理基本数据类型是没有属性和方法的,而对象才有属性和方法,但上面代码却可以执行,这是因为js会把基本数据类型包装为复杂数据类型,其执行过程如下:
6.2 字符串的不可变
指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间。
6.3 根据字符返回位置
字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。
案例:
查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
核心算法:
- 先查找第一个o出现的位置
- 然后只要 indexOf返回的结果不是-1 就继续往后查找
- 因为indexOf 只能查找到第一个,所以后面的查找,利用第二个参数,当前索引加1,从而继续查找
<script>
var str ='oabcoefoxyozzopp';
var index=str.indexOf('o');//查找第一个o出现的位置
var num=0;
while(index !=-1){
console.log(index);
num++;
index=str.indexOf('o',index+1);
}
console.log('o出现的次数是:'+num);
</script>
6.4根据位置返回字符(重点)
- 根据位置返回字符
- charAt(index)根据位置返回字符
- charCodeAt(index)返回相应索引号的字符ASCII值。目的:判断用户按下了那个键
<script>
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);
</script>
6.5 字符串操作方法(重点)