目标
- 能够说出什么是内置对象
- 能够根据文档查询指定API的使用方法
- 能够使用Math对象的常用方法
- 能够使用Date对象的常用方法
- 能够使用Array对象的常用方法
- 能够使用String对象的常用方法
目录
- 内置对象
- 查文档
- Math对象
- 日期对象
- 数组对象
- 字符串对象
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。
2.2 如何学习对象中的方法
- 查阅该方法的功能
- 查看里面参数的意义和类型
- 查看返回值的意义和类型
- 通过demo进行测试
3. Math数学对象
最大值，PI之类的
console.log(Math.PI)
console.log(Math.max(1,2));
封装自己的数学对象
利用对象封装自己的数学对象里面有PI最大值和最小值
var myMath = {
PI: 3.14159,
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.max(1,5,9));
数学的东西就用math吧
3.1 常用的math方法
- abs 绝对值
- floor 向下取整
- ceil 向上取整
- round 四舍五入取整
- random（） 随机小数
4. date日期对象
4.1 date概述
- Date对象和Math对象不一样，他是一个构造函数，所以我们需要实例化后才能使用
会打印出当前时间
4.2 date方法的使用
var date = new Date();
console.log(date);
- 如果括号里面有时间，就返回参数里面的时间。
var date1 = +new Date();
//+new Date()返回的就是总的毫秒数
console.log(date1);
// H5新增的获得总的毫秒数
console.log(Date.now());
4.3 倒计时做法（重要）
- 核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，比如05分减去25分，结果会是负数的。
- 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
- 把剩余时间总的亳秒数转换为天、时、分、秒（时间戳转换为时分秒)
转换公式如下:
- d = parselnt(总秒数/60/60/24);计算天数
- h = parseInt(总秒数/60/60%24)计算小时
- m = parselnt(总秒数/60 %60);计算分数
- s = parselnt(总秒数%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('2021-6-22 18:00:00'));
5. 数组对象
5.1 创建数组对象的两种方式
- 字面量方式
- new Array()
5.2检测是否为数组
- instanceof 运算符
- Array.isArray（参数）；[更好，ie9才支持]
5.3 添加删除数组元素的方法
| 方法名 | 说明 | 返回值 |
|---|---|---|
| push(参数1....) | 末尾添加一个或多个元素，注意修改原数组 | 并返回新的长度 |
| pop() | 删除数组最后一个元素，把数组长度减1无参数、修改原数组 | 返回它删除的元素的值 |
| unshift(参数1...) | 向数组的开头添加一个或更多元素，注意修改原数组 | 并返回新的长度 |
| shift() | 删除数组的第一个元素，数组长度减1无参数.修改原数组 | 并返回第一个元素的值 |
5.4 数组排序
| 方法名 | 说明 | 是否修改原数组 |
|---|---|---|
| reverse() | 颠倒数组中元素的顺序,无参数 | 该方法会改变原来的数组返回新数组 |
| sort() | 对数组的元素进行排序 | 该方法会改变原来的数组返回新数组 |
固定排序写法
arr.sort(function(a,b){
return a-b;
})
5.5 数组索引方法
| 方法名 | 说明 | 返回值 |
|---|---|---|
| indexOf | 数组中查找给定元素的第一个索引 | 如果存在返回索引号如果不存在，则返回-1。 |
| lastindexOf() | 在数组中的最后一个的索引 | 如果存在返回索引号如果不存在，则返回-1. |
5.6 数组去重（重点案例）
有一个数组[ 'c','a', 'z', 'a', 'x', 'a', 'x', 'c'，'b']，要求去除数组中重复的元素。
方法：把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个，放到新数组中去重。
核心算法:我们遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过,我们就添加，否则不添加。 我们怎么知道该元素没有存在?利用新数组.indexOf(数组元素）如果返回时–1就说明新数组里面没有改元素
function unique(arr) {
var newArr = [];
for (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.6 数组转换为字符串
| 方法名 | 说明 |
|---|---|
| toString() | 把数组转换成字符串，逗号分隔每一项 |
| join('分隔符') | 方法用于把数组中的所有元素转换为一个字符串。 |
6. 字符串对象
6.1 基本包装类型
为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型:String、Number和Boolean.
基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。
假设 var str = 'nizhenshuai'
相当于
var temp = new string（'nizhenshuai'）；//生成临时变量，把简单包装成复杂的
str = temp // 复制给我们声明的变量
temp = null 销毁临时变量
6.2 字符串的不可变
指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。
所以不要大量拼接字符串
操作完成后都会生成个新的
6.3 根据字符返回下标
- indexof
6.4 经典题
查找字符串"abcoefoxyozopp"中所有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);
}
console.log('O出现的次数' + num);
6.5 根据位置返回字符（重点）
| 方法名 | 说明 | 使用 |
|---|---|---|
| charAt(index) | 返回指定位置的字符(index字符串的索引号) | str.charAt(O) |
| charCodeAt(index) | 获取指定位置处字符的ASCII码(index索引号) | str.charCodeAt(0) |
| str[index] | 获取指定位置处字符 | HTML5，IE8+支持和charAt()等效 |
6.6 小案例
判断一个字符串'abcoefoxyozzopp'中出现次数最多的字符，并统计其次数。
- 核心：用charAt（）遍历字符串
- 把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在了就+1
- 遍历对象，得到最大值和该字符
var str = 'yuehanshizhendeshuai';
var o = {};
//遍历所有字符
for(var i = 0 ; i< str.length;i++) {
var chars = str.charAt(i);
if(o[chars]){
o[chars]++;
}else {
o[chars] = 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);
console.log('最多的字符是' + ch+','+'次数为'+max);
6.7 字符串操作方法(重点)
| 方法名 | 说明 |
|---|---|
| concat(str1,str2,str3...) | concat()方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用 |
| substr(start,length) | 从start位置开始（索引号), length取的个数重点记住这个 |
| slice(start, end) | 从start位置开始，截取到end位置，end取不到(他们俩都是索引号) |
| substring(start, end) | 从start位置开始，截取到end位置，end取不到基本和slice相同但是不接受负值 |
replace 替换字符
split（‘分隔符’） 字符串转换为数组
