JavaScript 内置对象
1.内置对象
-
JavaScript 中的对象分为3种:自定义对象 、内置对象、 浏览器对象
-
前面两种对象是JS 基础 内容,属于 ECMAScript; 第三个浏览器对象属于我们JS 独有的, 我们JS API 讲解
-
内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)
-
内置对象最大的优点就是帮助我们快速开发
-
JavaScript 提供了多个内置对象:Math、 Date 、Array、String等
2.查文档
2.1MDN
Mozilla 开发者网络(MDN)提供了有关开放网络技术(Open Web)的信息,包括 HTML、CSS 和万维网及 HTML5 应用的 API。
MDN链接: MDN
3.Math对象
3.1Math概述
Math 对象不是构造函数,它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整、最大值等)可以使用 Math 中的成员。
Math.round();四舍五入,其他数字都是四舍五入,但是 .5特殊,它是往大了取
-
如:
Math.round(-1.5);// -1
Math.round(-1.9);// -2Math.abs(’-1’); //-1 存在隐式转换
Math.abs('abc); //NaN
3.2随机数方法 random()
- random() 方法可以随机返回一个小数,==其取值范围是 [0,1),==左闭右开 0 <= x < 1
- 得到一个两数之间的随机整数,包括两个数在内
return Math.floor(Math.random() * (max - min + 1)) + min;
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
案例 猜数字
程序随机生成一个 1~ 10 之间的数字,并让用户输入一个数字,并且只有十次机会
- 如果大于该数字,就提示,数字大了,继续猜;
- 如果小于该数字,就提示数字小了,继续猜;
- 如果等于该数字,就提示猜对了, 结束程序。
- 如果十次机会用完,则提示很遗憾,您未猜对。
案例分析
-
随机生成一个1~50 的整数 我们需要用到 Math.random() 方法。
-
需要一直猜到正确为止,所以一直循环。
-
用while 循环合适更简单。
-
核心算法:使用 if else if 多分支语句来判断大于、小于、等于。
function getRandom(min,max){
return Math.floor(Math.random()*(max-min+1))+min;
}
var random=getRandom(1,50);
console.log(random);
var i=0;
// var num=prompt('请输入一个1-10的整数:');
while(true){
var chance=10-i;//剩余猜的次数
var num=prompt('请猜一个1-50的整数:\n您最还剩'+chance+'次机会');
/* if(typeof num1!=Number){
num=prompt('请猜一个1-50的整数:\n您最还剩'+chance+'次机会');
}else */
if(i==10){
alert('很遗憾,您未猜对数字');
break;
}else if(num>random){
alert('你猜大了');
i++;
}else if(num<random){
alert('你猜小了');
i++;
}else{
alert('恭喜你,猜对了!');
break;
}
}
4. 日期对象
4.1 Date 概述
-
Date 对象和 Math 对象不一样,他是一个构造函数,所以我们需要实例化后才能使用
-
Date 实例用来处理日期和时间
4.2 Date()方法的使用
1. 获取当前时间必须实例化![在这里插入图片描述](https://img-blog.csdnimg.cn/20210221191905794.png)
2. Date() 构造函数的参数
如果括号里面有时间,就返回参数里面的时间。例如日期格式字符串为‘2021-3-1’,可以写成new Date(‘2021-3-1’) 或者 new Date(‘2021/3/1’)
- 如果Date()不写参数,就返回当前时间
- 如果Date()里面写参数,就返回括号里面输入的时间
4.3 日期格式化
我们想要 2019-8-8 8:8:8 格式的日期,要怎么办?
需要获取日期指定的部分,所以我们要手动的得到这种格式。
方法名 | 说明 |
---|---|
getFullYear() | 获取当年 |
getMonth() | 获取当月(0到11)如要显示正确的月份,则需再加1 |
getDate() | 获取当天日期 |
getDay() | 获取星期几 (周日对应0,周一1…周六对应6) |
getHours() | 获取当前小时 |
getMinutes() | 获取当前分钟 |
getSeconds() | 获取当前秒钟 |
案例: 输出当前日期,并格式化
请写出这个格式的日期:
2021年2月21日 星期日 12:30:01
如果小于各项10,则添0补齐(‘0’+)的方式
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var day=date.getDate();
var weekdays=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var weekday=weekdays[date.getDay()];
var hour=date.getHours();
if(hour<10){
hour='0'+hour;
}
var minute=date.getMinutes();
if(minute<10){
minute='0'+minute;
}
var second=date.getSeconds();
if(second<10){
second='0'+second;
}
console.log('今天是'+year+'年'+month+'月'+day+'日'+weekday+hour+'时'+minute+'分'+second+'秒');
console.log('今天是'+year+'年'+month+'月'+day+'日'+weekday+hour+':'+minute+':'+second);
4.4 获取日期的总的毫秒形式
- Date 对象是基于1970年1月1日(世界标准时间)起的毫秒数
我们经常利用总的毫秒数来计算时间,因为它更精确
案例:做一个倒计时效果
案例分析
- 核心算法:输入的时间减去现在的时间就是剩余的时间,即倒计时 ,但是不能拿着时分秒相减,比如 05 分减去25分,结果会是负数的。
- 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数。
- 把剩余时间总的毫秒数转换为天、时、分、秒 (时间戳转换为时分秒)
- 如果小于各项10,则添0补齐(‘0’+)的方式
转换公式如下:
- time = parseInt(总毫秒数/1000); //总秒数
- d = parseInt(总秒数/ 60/60 /24); // 计算天数
- h = parseInt(总秒数/ 60/60 %24); // 计算小时
- m = parseInt(总秒数 /60 %60 ); // 计算分数
- s = parseInt(总秒数%60); // 计算当前秒数
var nowTime=+new Date();
//console.log(nowTime);
var inputTime=new Date('2021-2-22 12:30:00');
var times=(inputTime-nowTime)/1000;//获得剩余的总秒数
var day=parseInt(times/60/60/24);//天
day=day<10? '0'+day:day;//小于10自动补零
var hour=parseInt(times/60/60%24);//时
hour=hour<10? '0'+hour:hour;
var minute=parseInt(times/60%60);//分
minute=minute<10? '0'+minute:minute;
var second=parseInt(times%60);//秒
second=second<10? '0'+second:second;
console.log('还剩余'+day+'天'+hour+'时'+minute+'分'+second+'秒');
console.log('还剩余'+day+'天'+hour+':'+minute+':'+second);
5. 数组对象
5.1 数组对象的创建
创建数组对象的两种方式
- 字面量方式
- new Array()
5.2 检测是否为数组
-
instanceof 运算符,可以判断一个对象是否属于某种类型
-
Array.isArray()用于判断一个对象是否为数组,isArray() 是 HTML5 中提供的方法
5.3 添加删除数组元素的方法
方法名 | 说明 |
---|---|
push(参数1…) | 末尾添加一个或多个元素,传多少个参数,则添加多少个元素,修改原数组 ,并返回新数组的长度 |
pop() | 删除数组的最后一个元素,把数组的长度减1,无参数,修改元素组,并返回它删除的元素的值 |
unshift(参数1…) | 向数组的开头添加一个或多个元素,传多少个参数,则添加多少个元素,修改元素组,并返回新数组的长度 |
shift() | 删除数组的第一个元素,数组长度减1,无参数,修改原数组,并返回第一个元素的值 |
案例: 筛选数组
有一个包含工资的数组[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);
5.4 数组排序
方法名 | 说明 |
---|---|
reverse() | 颠倒数组中元素的顺序,无参数,并返回新数组 |
sort() | 对数组的元素进行排序,并返回新数组,一定要用如下方法改写sort()方法 |
var arr = [1, 64, 9, 6];
arr.sort(function(a, b) {//一定要改写sort方法,才能实现
return b - a; // 降序
// return a - b; // 升序
});
console.log(arr);
5.5 数组索引方法
方法名 | 说明 |
---|---|
indexOf() | 在数组中查找给定元素的第一个索引,若存在返回索引号,不存在则返回-1 |
lastIndexOf() | 在数组中查找给定元素的最后一个索引,若存在返回索引号,不存在则返回-1 |
案例: 数组去重(重点案例)
有一个数组[‘c’, ‘a’, ‘z’, ‘a’, ‘x’, ‘a’, ‘x’, ‘c’, ‘b’],要求去除数组中重复的元素
案例分析
- 目标:把旧数组里面不重复的元素选取出来放到新数组中,重复的元素只保留一个,放到新数组中去重。
- 核心算法:我们遍历旧数组,然后拿着旧数组元素去查询新数组,如果该元素在新数组里面没有出现过,我们就添加,否则不添加。
- 我们怎么知道该元素没有存在? 利用 新数组.indexOf(数组元素) 如果返回时 -1 就说明 新数组里面没有改元素
旧数组[‘c’, ‘a’, ‘z’, ‘a’, ‘x’, ‘a’, ‘x’, ‘c’, ‘b’]
新数组 [ ]
function unique(arr){
var newArr=[];
for(var i=0;i<=arr.length-1;i++){
if(newArr.indexOf(arr[i])===-1){
newArr[newArr.length]=arr[i];
// newArr.push(arr[i]);
}
}
return newArr;
}
var result=unique(['a','b','c','o','a','z','z','c']);
console.log(result);
5.6 数组转换为字符串
方法名 | 说明 |
---|---|
toString() | 把数组转换为字符串,逗号分隔每一项,并返回这个字符串 |
join(‘分隔符’) | 方法用于把数组中的所有元素转换为一个字符串,并用指定的分隔符隔开,若不写参数,则默认用逗号隔开 |
6. 字符串对象
6.1 基本包装类型
为了方便操作基本数据类型,JavaScript 还提供了三个特殊的引用类型:String、Number和 Boolean。
基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。
按道理基本数据类型是没有属性和方法的,而对象才有属性和方法,但上面代码却可以执行,这是因为 js 会把基本数据类型包装为复杂数据类型,其执行过程如下 :
6.2 字符串的不可变
指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间。
6.3 根据字符返回位置
字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。
方法名 | 说明 |
---|---|
indexOf(‘要查找的字符’,开始的位置) | 返回指定内容在元字符串的位置,若找不到就返回-1,开始的位置上是index索引号 |
lastIndexOf() | 从后往前找,只找第一个匹配的 |
案例:返回字符位置
查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
思路
- 核心算法:先查找第一个o出现的位置
- 然后 只要indexOf 返回的结果不是 -1 就继续往后查找
- 因为indexOf 只能查找到第一个,所以后面的查找,利用第二个参数,当前索引加1,从而继续查找
var arr=['r','a','r','a','r'];
var index=arr.indexOf('r');
var num=0;
while(index!==-1){
console.log(index);
num++;
index=arr.indexOf('r',index+1);//关键
}
console.log('出现的次数是'+num);//统计出现的次数
6.4 根据位置返回字符(重点)
方法名 | 说明 |
---|---|
charAt(index) | 返回指定位置的字符,可用于遍历字符串 |
charCodeAt(index) | 获取指定位置字符的ASCII码 |
str[index] | 返回指定位置的字符,HTML5,IE8+支持和charAt()等效 |
案例:判断出现最多的字符,并统计其次数
判断一个字符串 ‘abcoefoxyozzopp’ 中出现次数最多的字符,并统计其次数。
- 核心算法:利用 charAt() 遍历这个字符串
- 把每个字符都存储给对象, 如果对象没有该属性,就为1,如果存在了就 +1
- 遍历对象,得到最大值和该字符
var str = 'qwertyqwertytytyuuuuuuhjj';
var obj = {};
for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i);
if (obj[chars]) {
obj[chars]++;
} else {
obj[chars] = 1;
}
}
console.log(obj);
var max = 0;
var ch = '';
for (var k in obj) {
if (max < obj[k]) {
max = obj[k];
ch = k;
}
}
console.log('出现的最大次数是' + max + '次');
console.log('该字符是' + ch);
或者封装
//封装
function strs(str) {
var obj = {};
for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i);
if (obj[chars]) {
obj[chars]++;
} else {
obj[chars] = 1;
}
}
console.log(obj);
var max = 0;
var ch = '';
for (var k in obj) {
if (max < obj[k]) {
max = obj[k];
ch = k;
}
}
console.log('出现的最大次数是' + max + '次');
console.log('该字符是' + ch);
}
strs('sadfgasgfasdfhrytfgbgstd');
6.5 字符串操作方法(重点)
6.6 replace()方法
replace() 方法用于在字符串中用一些字符替换另一些字符。
其使用格式如下:
6.7 split()方法
split()方法用于切分字符串,它可以将字符串切分为数组。在切分完毕之后,返回的是一个新数组。
例如下面代码:
- toUpperCase() //转换大写
- toLowerCase() //转换小写