内置对象
什么是内置对象
- JS中的对象分为三种：自定义对象、内置对象、浏览器对象
- 前两种对象是JS基础内容，属于ECMAScript，第三个浏览器对象属于JS独有的
- 内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或者是最基本而没必要的功能（属性和方法）
- 内置对象最大的优点就是帮助我们快速开发
- JS提供了多个内置对象：Math、Date、Array、String等
developer.mozilla.org/zh-CN/
咱就是说要学会查文档
Math对象
Math数学对象，不是一个构造函数，所以我们不用new来调用，直接使用里面的属性和方法即可
Math.PI //圆周率
Math.floor() //向下取整
Math.ceil() //向上取整
Math.round() //四舍五入，-3.5的结果是-3
Math.abs() //绝对值
Math.max() //最大值
Math.min() //最小值
//圆周率
console.log(Math.PI);
//最大值
Console.log(Math.max(1,8,10));//10
Console.log(Math.max(1,9,'hello'));//NaN
Console.log(Math.max());//-Infinity 没有参数就负无穷大
//绝对值方法
Console.log(Math.abs(1));//1
Console.log(Math.abs(-1));//1
Console.log(Math.abs('-1'));//1 隐式转换 会把字符串型-1切换为数字型
//三个取整的方法
//1.Math.floor() 向下取整，往最小了取
Console.log(Math.floor(1.1));//1
Console.log(Math.floor(1.9));//1
//2.Math.ceil()向上取整 往最大了取
Console.log(Math.ceil(1.1));//2
Console.log(Math.ceil(1.9));//2
//3.Math.round()四舍五入 但是.5往大取
Console.log(Math.round(1.1));//1
Console.log(Math.round(1.5));//2
Console.log(Math,round(-1.1));//-1
Console.log(Math.round(-1.5));// 这个结果是-1
Console.log()
随机数方法Random()
- Math对象随机数方法 random() 返回一个随机的小数 0<=x<1
- 这个方法里不跟参数
console.log(Math.random());
//两个数之间的随机整数，并且包含这两个整数
function getRandom(min,max){
return Math.floor(Math.random()*(max-min+1))+min;
}
console.log(getRandom(1,10));
//随机点名
var arr=['Mona','Lily','Cindy','Lucy'];
console.log(arr[getRandom(0,arr.length-1)]);
//猜数字
function getRandom(min,max){
return Math.floor(Math.random()*(max-min+1))+min;
}
var random =getRandom(1,100);
while(true){
var num = prompt('输入数字');
if(num>random){
alert('大了');
}else if(num<random){
alert('小了')
}else{
alert('猜对了');
break;
}
}
//猜数字 但只有10次机会
function getRandom(min,max){
return Math.floor(Math.random()*(max-min+1))+min;
}
var random =getRandom(1,100);
for(var i=0;i<=10;i++){
var num = prompt('输入数字');
if(num>random){
alert('大了');
}else if(num<random){
alert('小了')
}else{
alert('猜对了');
break;
}
if(i==10){
alert('机会已用完');
}
}
日期对象
用来处理日期和时间
是一个构造函数，必须使用new来调用日期对象
使用new来创建对象
var arr = new Array();//创建一个数组对象
var obj = new Object();//创建一个对象实例
var date = new Date();//没有参数就返回系统的当前时间
console.log(date);
//参数常用的写法
var date1 = new Date(2022,8,31);
console.log(date1);//返回的月份是会比实际小一个月
var date2 = new Date('2022-8-31 10:00:00');
console.log(date2);
1. 格式化日期-年月日星期时分秒
| 方法名 | 说明 | 代码 |
|---|---|---|
| getFullYear() | 获取当年 | dateObj.getFullYear() |
| getMonth() | 获取当月（0-11） | dateObj.getMonth() |
| getDate() | 获取当天日期 | dateObj.getDate() |
| getDay() | 获取星期几（周日0到周六6） | dateObj.getDay() |
| getHours() | 获取当前小时 | dateObj.getHours() |
| getMinutes() | 获取当前分钟 | date.getMinutes() |
| getSeconds() | 获取当前秒钟 | dateObj.getSeconds() |
//格式化日期 年月日
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var dates = date.getDate();
// "Uncaught TypeError: date.getDay is not a function" 变量date改成dates
var day = date.getDay();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
console.log('今天是' + year + '年' + month + '月' + dates + '日' + arr[day]);
//格式化日期 时分秒
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<0? '0'+s:s;
return h+':'+m+':'+s;
}
console.log(getTime());
2. 获取日期的总的毫秒数
Date对象是基于1970年1月1日（世界标准时间）起的毫秒数
我们常利用总的毫秒数来计算时间，因为它更精确
//获得Date总的毫秒数（时间戳） 距离1970年1月1日过了多少毫秒数
// 通过valueOf()、getTime()
var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
//常用的写法
var date1 = +new Date();//+new Date()
console.log(date1);
//H5新增的方法
console.log(Date.now())
3. 倒计时案例
- 用输入的时间减去现在的时间就是剩余的时间，即倒计时
- 用时间戳来做，用户输入时间的总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数
- 把算出的时间（毫秒）转化为天、时、分、秒
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+'分'+'秒';
}
console.log(countDown('2022-9-1 21:00:00'));
数组对象
//创建数组的两种方式
//利用数组字面量[]
var arr=[1,2,3];
console.log(arr[0]);
//利用 new Array()
//var arr=new Array();//创建一个空的数组
//var arr1=new Array(2);//表示这个数组的长度为2 里面有两个空的数组元素
var arr2=new Array(2,3);//等价于[2,3] 表示里面有两个数组元素，分别是2和3
console.log(arr2);
1. 检测是否为数组
- instanceof 运算符
var arr=[];
var obj={};
console.log(arr instanceof Array);//true
console.log(obj instanceof Array);//false
- Array.isArray(参数) H5新增的方法
var arr=[];
var obj={};
console.log(Array.isArray(arr));
console.log(Array.isArray(obj))
2. 添加删除数组元素的方法
| 方法名 | 说明 | 返回值 |
|---|---|---|
| push(参数1...) | 数组末尾添加一个或者多个元素，注意修改原数组 | 并返回新的长度 |
| pop() | 删除数组的最后一个元素。把长度-1。该方法没有参数。注意修改原数组 | 返回它删除的元素的值 |
| unshift() | 给数组的开头添加一个或者多个元素，注意修改原数组 | 返回新的长度 |
| shift() | 删除数组的第一个元素。数组长度-1。无参数。注意修改原数组 | 返回第一个元素的值 |
- push() 在数组末尾添加一个或多个元素
var arr = [1,2,3];
console.log(arr.push(4,'hello'));//5 数组的长度
console.log(arr);//[1, 2, 3, 4, 'hello'] 原数组同时也会发生变化
- 在数组末尾追加一个或多个新的元素
- 参数直接写要追加的数组元素即可
- push后返回的是新数组的长度
- 原数组同时也会发生变化
2. unshift() 给数组的开头添加一个或多个元素
var arr = [1,2,3];
console.log(arr.unshift('red','study'));//5
console.log(arr);//['red', 'study', 1, 2, 3]
- 在数组的开头追加一个或多个数组元素
- 参数直接写要追加的元素
- unshift后返回的是数组的长度
- 原数组同时也会发生变化
3. pop() 删除数组的最后一个元素
var arr = [1,2,3];
console.log(arr.pop());
console.log(arr);
- 删除数组的最后一个元素，一次只能删除一个
- 没有参数
- pop结束返回的结果是被删除的元素
- 原数组也会发生变化
4. shift() 它可以删除数组的第一个元素
var arr = [1,2,3];
console.log(arr.shift());
console.log(arr);
- 删除数组的第一个元素 一次只能删除一个
- 没有参数
- shift后返回的结果是被删除的元素
- 原数组也会发生变化
举例：
有一个包含工资的数组 [1500,1200,2000,2100,1800] ,要求把数组中的工资超过2000的删除，剩余的放到新的数组里面。
var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
//方法1：
// if (arr[i] < 2000) {
// newArr[newArr.length] = arr[i];
// }:
//方法2：
// if (arr[i] >= 2000) {
// continue;
// }
// newArr[newArr.length] = arr[i];
//使用push()
if (arr[i] < 2000) {
newArr.push(arr[i]);
}
}
console.log(newArr)
3. 数组排序
- 翻转数组
var arr=[6,4,3,8];
arr.reverse();
console.log(arr);
- 数组排序
var arr=[6,4,3,8];
arr.sort();//对个位数排序没问题
console.log(arr);
var arr=[13,4,77,1,7];
arr.sort(function(a,b){
return a-b;//升序的排列顺序
return b-a;//降序的排列顺序
});
console.log(arr)
4. 数组索引方法
| 方法名 | 说明 | 返回值 |
|---|---|---|
| indexOf() | 数组中查找给定元素的第一个索引 | 存在返回索引号，不存在返回-1 |
| lastIndexOf() | 在数组中的最后一个索引 | 存在返回索引号，不存在返回-1 |
var arr=['red','green','blue','blue'];
console.log(arr.indexOf('blue'));//2
console.log(arr.lastIndexOf('blue'));//3
5. 数组去重
遍历旧数组，用旧数组的元素在新数组中的元素中进行查询，如果元素在新元素中没有出现过，就把元素添加到新元素中，否则不添加。
要如何确定该元素有没有存在？
利用新数组.indexOf(数组元素) 如果返回值是-1 则说明新数组没有该数组元素
//封装一个 去重的函数
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(['blue','blue']);
console.log(demo);//['blue']
6. 数组转换为字符串
| 方法名 | 说明 | 返回值 |
|---|---|---|
| toString() | 把数组转换成字符串，逗号分隔每一项 | 返回一个字符串 |
| join('分隔符') | 用于把数组中的所有元素转换成一个字符串 | 返回一个字符串 |
//toString()
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
| 方法名 | 说明 | 返回值 |
|---|---|---|
| concat() | 链接两个或多个数组，不影响原数组 | 返回一个新的数组 |
| slice() | 数组截取 slice(begin,end) | 返回被截取项目的新数组 [begin,end) |
| splice() | 数组删除splice(第几个开始，要删除个数) | 返回被删除项目的新数组，这个会影响原数组 |
- concat() 连接两个或多个数组
//连接两个数组
var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];
var array3 = array1.concat(array2);
console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]
//连接三个数组
var num1 = [1, 2, 3],
num2 = [4, 5, 6],
num3 = [7, 8, 9];
var nums = num1.concat(num2, num3);
console.log(nums);
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]
- slice() 数组截取 [begin,end)
var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]
console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]
console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]
console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]
- splice() 通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。(重点看看！！)
var months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]
字符串对象
1. 基本包装类型
为了方便操作基本数据类型，JS还提供了三个特殊的引用类型：String、Number和Boolean
基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法
var str = 'andy';
console.log(str.length);
按理说，基本数据类型是没有属性和方法的，而对象才有。上面的代码可以执行是因为JS会把基本数据类型包装为复杂数据类型，执行过程如下：
//生成临时变量，把简单数据类型包装成复杂数据类型
var temp = new String('andy');
//赋值给我们声明的字符变量
str=temp;
//销毁临时变量
temp=null;
2. 字符串不变
指得是里面的值不可变，虽然看上去可以改变内容，但其实地址变了，内存中新开辟了一个内存空间。
var str = 'abc';
str = 'hello';
//当重新给str赋值的时候，常量'abc'不会被修改，仍然在内存中
//重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
//由于字符串的不可变，在大量拼接字符串的时候会有效率问题
var str='';
for(var i =0;i<10000000;i++){
str+=i;
}
console.log(str);//这个结果需要花费大量时间来显示，因为需要不断的开辟新的空间
3.根据字符返回位置
字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串
| 方法名 | 说明 |
|---|---|
| indexOf('要查找的字符',开始的位置) | 返回指定内容在原字符串中的位置，如果找不到就返回-1 ，开始额位置是index索引号 |
| lastIndexOf() | 从后往前找，只找第一个匹配的 |
var str = '好好学习，天天向上';
console.log(str.indexOf('习'));
console.log(str.indexOf('习',4));//从索引号是 4 的位置开始找
//找出str所有‘天’出现的位置和次数
var index=str.indexOf('天');
var num=0;
while(index !==-1){
//找不到才返回-1
console.log(index);
num++;
index = str.indexOf('天',index+1);
}
console.log('天'+'出现'+num+'次');
根据位置返回字符
| 方法名 | 说明 | 使用 |
|---|---|---|
| charAt(index) | 返回指定位置的字符（index字符串的索引号） | str.charAt(0) |
| charCodeAt(index) | 获取指定位子字符的ASCII码（index索引号） | str.charCodeAt(0) |
| str[index] | 获取指定位置字符串 | HTML5新增，和charAt()等效 |
var str = 'andy';
//charAt(index)根据位置返回字符
console.log(str.charAt(3));//
//遍历所有的字符
for (var i = 0; i < str.length; i++) {
console.log(str.charAt(i));
}
//charCodeAt(index) 返回对应索引号的字符的ASCII码 目的：判断用户按下了哪个键
console.log(str.charCodeAt(0));//97
//str[index] H5新增
console.log(str[3]);
统计出现最多的字符和次数
一个对象如何判断是否有该属性
var o={
age:18;
}
if(o[age]){
console.log('里面有该属性');
}elae{
console.log('没有该属性');
}
判断一个字符串中出现次数最多的字符，并统计其次数
//利用charAt() 遍历这个字符串
//把每个字符都存储给对象，对象没有该属性就为1，存在了就为-1
var str = 'abccddfff';
var o = {};
for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i);//chars 是字符串的每一个字符
if (o[chars]) {//o[chars]得到的是属性值
// console.log(o[chars]);
o[chars]++;
} else {
o[chars] = 1;
}
}
console.log(o)
//遍历对象
var max=0;
var ch='';
for(var k in o){
if (o[k]>max){
max=o[k];
ch=k;
}
}
console.log('最多的字符是'+ch);
console.log('出现'+max+'次');
字符串操作方法（重点）
| 方法名 | 说明 |
|---|---|
| concat(str1,str2,str3...) | 用于连接两个或多个字符串。拼接字符串，等效于+，+更常用 |
| substr(start,length) | 从start位置开始（索引号），length取的值的个数 |
| slice(start,end) | 从start位置开始，截取到end位置（start和end的值都是索引号） 取值范围[start,end) |
| substring(start,end) | 从start位置开始，截取到end位置（start和end的值都是索引号） 取值范围[start,end)，但是不接受负值 |
//concat('字符串1','字符串2',...)
var str='andy';
console.log(str.concat('red'));//andyred
//substr('截取的起始位置','截取几个字符')
var str1='好好学习';
console.log(str1.substr(2,2));//学习
//替换字符replace('被替换的字符','替换为的字符') 只会替换第一个字符
var str='andyandy';
console.log(str.replace('a','c'));//cndyandy
//要求把所有a字符替换
while(str.indexOf('a')!==-1){
str=str.replace('a','&');
}
console.log(str);//&ndy&ndy
//字符串转换为数组 split('分隔符') 或者join可以把数组转换为字符串
var str1='red,green,blue';
console.log(str1.split(','));//['red', 'green', 'blue']
var str2='red&green&blue';
console.log(str2.split('&'));//['red', 'green', 'blue']
