JavaScript基础---JavaScript内置对象---10.20

内置对象

• 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

//封装自己的数学对象

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));

案例：随机点名

案例：猜数字游戏

日期对象

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)；计算当前秒数

数组对象

数组对象的创建

创建数组对象的两种方式：①字面量方式  ②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);//false

2.Array.isArray(参数)；

当检测Array实例时，Array.isArray优于instanceof，因为Array.isArray能检测iframes。

var arr=[];
console.log(Array.isArray(arr));

添加删除数组元素的方法

//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);

筛选数组案例

数组排序

//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
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就说明新数组里没有该元素。

数组转换为字符串

//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

字符串对象

字符的不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。因为我们字符串的不可变，所以不要大量的拼接字符串。

根据字符返回位置

字符串所有的方法都不会修改字符串本身（字符串是不可变的）操作完成会返回一个新的字符串。

//字符串对象根据字符返回位置  str.indexof('要查找的字符'，[起始的位置])
var str='改革春风吹满地，春天来了';
console.log(str.indexOf('春'));//2
console.log(str.indexOf('春',3));//8   从索引号是3的位置开始往后查找

返回字符位置案例
查找字符串'abcoefoxyozzopp'中所有o出现的位置以及次数

• 核心算法：先查找第一个o出现的位置。
• 然后只要indexOf返回的结果不是-1，就继续往后查找。
• 因为indexOf只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找。

根据位置返回字符（重点)

//1.charAt(index)根据位置返回字符
var str = 'andy';
console.log(str.charAt(3));
//遍历所有的字符
for(var i=0; ilength; 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('没有该属性');
}

字符串操作方法（重点）

//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是取几个字符

其他方法

1. 替换字符 replace('被替换的字符'，'替换为的字符')   它只会替换第一个字符。
2. 字符转换为数组 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']