JavaScript学习第四天
1.JavaScript内置对象
1.1内置对象
- JavaScript中对象分为三种:自定义对象、内置对象、浏览器对象
- 前面两种对象是js基础内容,属于ECMAScript;第三个浏览器对象属于我们js独有的,我们js api讲解
- 内置对象指js语言自带的一些对象
- JavaScript提供了多个内置对象:Math、Date、Array、String等
1.2 MDN文档
1.3 Math对象
与其他全局对象不同的是,Math
不是一个构造器。Math
的所有属性与方法都是静态的。引用圆周率的写法是 Math.PI
,调用正余弦函数的写法是 Math.sin(x)
,x
是要传入的参数。Math
的常量是使用 JavaScript 中的全精度浮点数来定义的。
1.3.1 随机数方法random()
- random()方法可以随机返回一个小数,其取值范围是[0,1),左闭右开
- 得到一个数之间的随机整数,包括两个数在内
function getRandom(min,max){
return Math.floor(Math.random()*(max-min)+1)+min;
}
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
console.log(Math.PI);
console.log(Math.floor(1.9));
console.log(Math.ceil(1.1));
console.log(Math.round(1.5));
console.log(Math.round(1.4));
console.log(Math.round(-2.5));
console.log(Math.abs(-1));
console.log(Math.abs('-1'));
console.log(Math.abs('pink'));
console.log(Math.max(1,2,89,34,22));
console.log(Math.min(1,2,89,34,22));
console.log(Math.max(1,2,'green'));
console.log(Math.max());
console.log(Math.random());
function getRandom(min,max){
return Math.floor(Math.random()*(max-min)+1)+min;
}
console.log(getRandom(1,3));
</script>
</head>
<body>
</body>
</html>
1.4 日期对象
- 获取当前时间必须实例化,日期对象是一个构造函数*
- 如果Date()里面不写参数,则返回当前时间
- 如果Date()里面写参数,则返回括号里面输入的时间
1.4.1日期格式化
方法名 | 说明 |
---|
getFullYear() | 获取当年 |
getMonth() | 获取当月(0-11) |
getDate() | 获取当前日期 |
getDay() | 获取星期几(周日0到周六6) |
getHours() | 获取当前小时 |
getMinutes() | 获取当前分钟 |
getSeconds() | 获取当前秒钟 |
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var date=new Date();
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 h=date.getHours();
var m=date.getMinutes();
var s=date.getSeconds();
console.log(h+':'+m+':'+s);
</script>
</head>
<body>
</body>
</html>
1.4.2 获取日期的总的毫秒数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var date=new Date();
console.log(date.valueOf());
console.log(date.getTime());
var now=+new Date();
console.log(now);
console.log(Date.now());
</script>
</head>
<body>
</body>
</html>
倒计时案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function countDown(time){
var nowtime=+new Date();
var inputTime=+new Date(time);
var restTime=(inputTime-nowtime)/1000;
var s=parseInt(restTime%60);
s=s<10? '0'+s:s;
var m=parseInt(restTime/60%60);
m=m<10? '0'+m:m;
var h=parseInt(restTime/60/60%24);
h=h<10? '0'+h:h;
var day=parseInt(restTime/60/60/24);
day=day<10? '0'+day:day;
return day+':'+h+':'+m+':'+s;
}
console.log(countDown('2022-2-14 12:00:00'));
</script>
</head>
<body>
</body>
</html>
1.5 数组对象
1.5.1 数组创建方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var arr1=new Array();
var arr2=new Array(2);
var arr3=new Array(2,4,5,7,8);
console.log(arr1);
console.log(arr2);
console.log(arr3);
</script>
</head>
<body>
</body>
</html>
1.5.2 检测是否为数组
- instanseof运算符,可以判断一个对象是否属于某种类型
- Array.isArray()用于判断一个对象是否为数组,isArray()是HTML5中提供的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var arr=[];
var obj={};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));
</script>
</head>
<body>
</body>
</html>
1.5.3 添加和删除数组元素的方法
方法名 | 说明 | 返回值 |
---|
push(参数1…) | 末尾添加一个或多个元素,注意修改原数组 | 返回新的长度 |
pop() | 删除数组最后一个元素,把数组长度减1,无参数,修改原数组 | 返回它删除的元素的值 |
unshift(参数1…) | 向数组的开头添加一个或更多元素,注意修改原数组 | 返回新的长度 |
shift() | 删除数组的第一个元素,数组长度减1,无参数,修改原数组 | 返回第一个元素的值 |
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var arr=[1,2];
console.log(arr.push(3,'pink'));
console.log(arr);
console.log(arr.unshift('green','nb'));
console.log(arr);
console.log(arr.pop());
console.log(arr);
console.log(arr.shift());
console.log(arr);
</script>
</head>
<body>
</body>
</html>
1.5.4 数组排序
方法名 | 说明 | 是否修改原数组 |
---|
reverse | 颠倒数组中元素的顺序,无参数 | 改变数组,返回新数组 |
sort | 对数组元素进行排序 | 改变原来数组,返回新数组 |
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var arr=[1,7,6,3,2];
arr.reverse();
console.log(arr);
arr.sort(function(a,b){
return b-a;
});
console.log(arr);
</script>
</head>
<body>
</body>
</html>
1.5.5 数组索引方法
方法名 | 说明 | 返回值 |
---|
indexOf() | 数组中查找给定元素的第一个索引 | 如果存在返回索引号,不存在返回-1 |
lastIndexOf | 在数组中查找给定元素的最后一个索引 | 如果存在返回索引号,不存在返回-1 |
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var arr=['pink','green','yellow'];
console.log(arr.indexOf('pink'));
console.log(arr.indexOf('blue'));
console.log(arr.lastIndexOf('pink'));
console.log(arr.lastIndexOf('blue'));
</script>
</head>
<body>
</body>
</html>
1.5.6 数组去重
- 核心算法:创建新旧两个数组,旧数组存为修改的原数组,新数组为空,遍历旧数组,在新数组中查找是否存在旧数组,如果存在,不添加到新数组,不存在添加到新数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var oldarr=['a','b','a','e','f','f','e','k','b'];
var newarr=[];
for(var i=0;i<oldarr.length;i++){
if(newarr.indexOf(oldarr[i])==-1){
newarr.push(oldarr[i]);
}
}
console.log(newarr);
</script>
</head>
<body>
</body>
</html>
1.5.7 数组转换为字符串
方法名 | 说明 | 返回值 |
---|
toString() | 把数组转换成字符串,逗号分隔每一项 | 返回一个字符串 |
join(‘分隔符’) | 方法用于把数组中的所有元素转换成一个字符串 | 返回一个字符串 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var arr=[1,2,3];
console.log(arr.toString());
console.log(arr.join('-'));
</script>
</head>
<body>
</body>
</html>
1.6 字符串对象
1.6.1 基本包装类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var str='judy';
temp=new String('judy');
str=temp;
temp=null;
</script>
</head>
<body>
</body>
</html>
1.6.2 字符串的不可变
- 指的是里面的值不可变,虽然看上去内容改变了,但其实是地址发生了改变,内存中开辟了新内存空间
- 不要大量拼接字符串,字符串每拼接一次,开辟一块内存空间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var str='';
for(var i=0;i<1000;i++){
str+=i;
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
1.6.3 根据字符返回位置
- 字符串所有的方法,都不会修改字符串本身(字符串不可变),操作完成会返回一个新的字符串
方法名 | 说明 |
---|
indexOf(‘要查找的字符’,开始位置(可选)) | 返回指定内容在元字符串中的位置,找不到-1,可以规定起始位置 |
lastIndexOf() | 从后往前找,找第一个匹配的 |
1.6.4 根据位置返回字符(重点)
方法名 | 说明 | 使用 |
---|
charAt(index) | 返回指定位置的字符(index字符串的索引号) | str.charAt() |
charCodeAt(index) | 获取指定位置字符的ascll码 | str.charCodeAt() |
str[index] | 获取指定位置字符 | HTML5 |
1.6.5 统计一个字符串中所有字符出现的个数及出现次数最多的字符
- 核心算法:
- 利用charAt()遍历字符串
- 把每个字符赋值给一个对象的属性,属性值为出现的次数
- 如果该对象不存在该属性,则属性值为1,否则属性值加1
- 遍历对象的所有属性,求得最大值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var str='abcoefoxyozzopp';
var obj={};
for(var i=0;i<str.length;i++){
var ch=str.charAt(i);
if(obj[ch]){
obj[ch]++;
}else{
obj[ch]=1;
}
}
console.log(obj);
var max=-1;
var maxch='';
for(k in obj){
if(obj[k]>max){
max=obj[k];
maxch=k;
}
}
console.log(maxch);
console.log(max);
</script>
</head>
<body>
</body>
</html>
1.6.6 字符串截取
方法名 | 说明 |
---|
concat(str1,str2,str3) | concat()用于链接一个或多个字符串。拼接字符串,等价于+ |
substr(start,length) | 从start位置开始(索引号),取length个字符(重点) |
slice(start,end) | 从start位置开始,截取到end位置,end取不到 |
substring(start,end) | 从start位置开始,截取到end位置,end取不到,基本上与slice一致,不接受负值 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var str='judy';
console.log(str.concat('red','green'));
console.log(str.substr(0,2));
console.log(str.slice(0,2));
</script>
</head>
<body>
</body>
</html>
1.6.7 字符串字符替换
- replace()方法用于在字符串中用一些字符替换另一些字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var str='name';
console.log(str.replace('a','e'));
var str2='nananana';
while(str2.indexOf('a')!==-1){
str2=str2.replace('a','n');
}
console.log(str2);
</script>
</head>
<body>
</body>
</html>
1.6.8 字符串转换成数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var str='red,green,yellow';
var arr=str.split(',');
console.log(arr);
</script>
</head>
<body>
</body>
</html>
2. Javascrip简单类型和复杂类型
2.1 简单类型和复杂类型
- 简单类型又叫基本数据类型或者值类型,复杂类型又叫做引用类型
- 值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫值类型:string,number,boolean,undefined,null
- 引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址(引用),因此叫做引用数据类型,通过new关键字创建的对象(系统对象,自定义对象),如Object、Array、Date
2.2 堆和栈
- 栈(操作系统):由操作系统自动分配释放存放函数的参数值,局部变量的值,简单数据类型存放到栈里面
- 堆(操作系统):存储复杂数据类型,一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收,复杂数据类型存放在堆里面
2.3 简单类型的内存分配
2.4 复杂类型的内存分配
- 引用类型变量(栈空间)里存放的是地址,真正的对象实例存放在堆空间中