JavaScript常用的内置对象有数学对象、日期对象、数组对象、字符串对象等,白龙网学习其它内置对象,都是从MDN文档或者W3C上去查找学习的。
对象为3种,自定义对象,内置对象,浏览器对象。前两个是ECMASCRIPT部分内容,浏览器对象是JS独有的。
对象为3种,自定义对象,内置对象,浏览器对象。前两个是ECMASCRIPT部分内容,浏览器对象是JS独有的。
内容对象是JS自带的一些对象,已经封装好的属性与方法,会用即可,不用关心其实现过程。
了解常见的内置对象的使用技巧,能够到MDN查询对象的使用方法。
1、Math对象
Math是一个对象,不是构造函数,无须调用,直接使用对象中的属性、方法即可。参数可以有,一定要跟上数字型的;也可以没有,打印负无穷大。如果是非数字和数字型的属性值,打印结果是NaN。
(1)求最大值、最小值
<script>
console.log(Math.PI);//使用Math属性
console.log(Math.max());//使用Math方法
console.log(Math.max(1,9,2,6));
console.log(Math.max(-1,-9));
console.log(Math.max(1,'白龙网'));//NaN
</script>
案例:使用对象封装PI,最大值,最小值
<script>
var mymath = {
PI: 3.1415926,
max: function() {
var max = arguments[0];
for (var i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
},
min: function() {
var min = arguments[0];
for (var i = 0; i < arguments.length; i++) {
if (arguments[i] < min) {
min = arguments[i];
}
}
return min;
}
}
//字面量创建的对象,调用时用珊种普通方法即可
console.log(mymath.PI);
console.log(mymath.max(1,3,2));
console.log(mymath.min(1,3,2));
</script>
(2)绝对值、整数、四舍五入
<script>
//1.取绝对值
console.log(Math.abs(1));
console.log(Math.abs(-1));
console.log(Math.abs('-1'));//-1
console.log(Math.abs('白龙网'));/NaN
//2.取整数
console.log(Math.floor(8.111));//向下取整
console.log(Math.ceil(1.1));//向上取整
//四舍五入
console.log(Math.round(1.1));
console.log(Math.round(1.9));
console.log(Math.round(-1.1));//-1
console.log(Math.round(-1.5));//-1
</script>
(3)随时数,实现随机抽奖功能
<script>
console.log(Math.random());//1.返回一个随机浮点数,取值范围大于等于0,并且小于1
//2.得到两个数之间的随机整数,并包含这两个数,实现随时抽奖的功能
function getRandom(min,max) {
return Math.floor(Math.random() * (max - min + 1) + min);//取两个数之间(a<=x<=C)所有整数
}
var arr = ['张三','李四','王五','李麻子','李飞机','王大炮','白龙网'];
console.log(arr[getRandom(0,arr.length -1)]);
</script>
案例:随时猜字游戏
<script>
function getRandom(min,max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
var random = getRandom(1,100);
for (i = 1; i <=10; i++) {
var num =prompt('请输入1-10之间的数字');
if (num > random) {
alert('你猜大了,继续加油哦');
} else if (num < random) {
alert('又猜小啦,哈哈');
} else {
alert('恭喜你,猜对了');
}
}
</script>
2、日期对象
(1)日期调用
如果没有参数,返回当前系统的当前时间;也可以跟参数,设置数字型:2022,7,15,或者字符型:2022-1-15
<script>
//Date()是一个构造函数,必须使用new来创建日期对象,类似于创建数组与创建对象
var arr = new Array();
var obj = new Object()
var date = new Date();
console.log(date);
var date1 = new Date(2022,7,15);
console.log(date1);
var date2 = new Date('2022-7-15 15:21:56');
console.log(date2);
</script>
(2)年月日星期
<script>
var date = new Date();
console.log(date.getFullYear());
console.log(date.getMonth() + 1);//月的取值范围是0-11,比实际月数小于,因此加1即可
console.log(date.getDate());
console.log(date.getDay());//1-6对应星期,但是星期日是0
//打印2022年7月15日星期五这个日期
var yaer = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var day = date.getDay();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
console.log(yaer + '年' + month + '月' + dates + '日' + arr[day]);//用数组指定格式,用getDay()返回的数字作为下标,访问数组元素;另外,星期是0开始,到6结束
</script>
(3)打印时分秒:14:20:08分,时与秒如果小于10,前面要补个0
<script>
var time = new Date();
console.log(time.getHours());
console.log(time.getMinutes());
console.log(time.getSeconds());
function getTime() {
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
return h + ':' + m + ':' + s;
}
console.log(getTime());
</script>
(4)获取毫秒数
①方法
获取Date()总的毫秒数(时间戳),不是当前时间的毫秒数,而是1970年后到现在,过了多少毫秒
<script>
var time = new Date();
console.log(time.valueOf());//1.返回毫秒
console.log(time.getTime());//2.返回毫秒
var dates = +new Date();//3.返回毫秒,常用,不需要时间对象,直接使用
console.log(dates);
console.log(Date.now());//4.H5新增的;没参数表示当前时间,有参数表示你输入的时间,不需要时间对象,直接使用
</script>
案例1:倒计时功能时间
<script>
function getCountDown(time) {
var nowTime = +new Date();//计算当前时间
var inputTime = +new Date(time);//计算停止时间
var times = (inputTime - nowTime) / 1000;//转换为秒
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(getCountDown('2022-7-15 17:38:21'));//实参,传递给形参time
</script>
3、数组对象
(1)创建数组
<script>
//1.字面量创建数组
var arr = [1,2,3];
console.log(arr);
//2.关键字创建数组
var arr1 = new Array();//没有参数表示空数组
console.log(arr1);
var arr2 = new Array(6);//一个参数表示数组长度
console.log(arr2);
var arr3 = new Array(6,9)//两个或者两个以上参数,表示数组元素
console.log(arr3);
</script>
(2)判断是否为数组 instance of
<script>
//instanceof 检测是否为数组
function reverse(arr) {
if (arr instanceof Array) {//1.判断arr是否为一个数组
var newArr = [];
for (i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
} else {
console.log('请输入一个数组,例如[1,2,3,4]');
}
}
console.log(reverse([1,2,3,4,5,6]));
</script>
<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>
(3)添加数组元素的两种方法 push() unshift()
<script>
var arr = [1,2,4,45,0];
console.log(arr);
//1.后面添加数组元素
arr.push(90);//push()可以给数组添加一个或者多个新元素
arr.push('白龙网','drupal');//参数直接写数组元素即可
console.log(arr);//添加新元素后,原数组发生了变化;
console.log(arr.push());//追加元素后返回新数组长度
//2.从前面添加数组元素
arr.unshift('abcde','front');
console.log(arr);
console.log(arr.unshift());
(4)删除数组元素 pop() shfit()
<script>
<script>
var addarr = [1,2,3,5];
console.log(addarr.pop());//删除最后一个元素;不带参数;原数组有变化;返回最后面删除的那个元素
console.log(addarr);
console.log(addarr.shift());//返回最前面删除的那个元素
console.log(addarr);
</script>
</script>
案例1:把工资小于2000的元素放到新数组中去
<script>
var arr = [1800,1200,1500,2500,3600];
var newArr = [];
for (i = 0; i < arr.length; i++) {
if (arr[i] < 2000) {
newArr.push(arr[i]);//直接把符合条件的元素从后面追加到新数组,不用考虑下标的事儿
}
}
console.log(newArr);
</script>
(5)数组排序reverse() sort()
<script>
var arr = [8,4,15,98,2];
//reverse()实现数据元素翻转
arr.reverse();
//冒泡排序,按升序排列
console.log(arr);
arr.sort(function(a,b){
return a -b;
});
console.log(arr);
//冒泡排序,按降序排列
arr.sort(function(a,b){
return b - a;
});
console.log(arr);
</script>
(6)索引号 indexof() lastindexof()
<script>
var arr = ['白龙网',8,4,15,98,2,15];//数组名.indexof(数组元素),即可显示数组元素的索引号;从前往后找
console.log(arr.indexOf(15));//返回第一个找到的索引号
console.log(arr.indexOf(888));//如果找不到数据元素,就返回-1
console.log(arr.lastIndexOf(15));//arr.lastIndexOf(15)从后面开始查找
</script>
案例:使用indexof() 返回-1这一特性,实现去重的功能
<script>
function unique(arr) {
var newArr = [];
for (i = 0; i < arr.length;i++) {
if (newArr.indexOf(arr[i]) == -1) {//在新数组中查找旧数组中的所有元素,如果返回值等于-1,说明新数组中没有旧数组的元素,就把旧数组中的该元素追加到新数组的后面
newArr.push(arr[i]);
}
}
return newArr;
}
var demo = unique([1,1,2,2,3,3]);
console.log(demo);
</script>
(7)数组转化为字符串 toString() join()
<script>
var arr = [1,2,3,'白龙网'];
console.log(arr.toString());//1,2,3,白龙网,默认是逗号隔开
console.log(arr.join());//1,2,3,白龙网,默认是逗号分隔
console.log(arr.join('-'));//1-2-3-白龙网,可任意修改分隔符号
</script>
4、字符串对象
理论上说,对象才有属性和方法,只有复杂数据类型才有属性和方法。简单的数据类型为什么也有属性、方法呢?
这就涉及到基本包装类型:把简单的数据类型包装成复杂的数据类型。这个过程有3步:
var temp = new String('andy');//把临时变量转换为对象
str = tmp;//再把这个对象赋值给str
tmp =null;//销毁临时变量
把简单的数据类型包装成复杂的数据类型之后,简单数据类型就可以使用复杂数据类型的属性、方法了。
字符串不可变:给一个字符串赋值,看上去似乎是修改了原字符串的内容,实际上并没有修改原字符串内容。赋值操作实际是在内存中重新开辟了一个新的空间,然后让变量重新指向新的字符串,并且保留了原字符串。
由上可知,字符串的所有方法都不会改变字符串本身的内容,因此,操作完后,都会返回一个新的字符串。
(1)返回字符串位置(根据字符串返回字符串位置) indexof(str) lastindexof(str)
<script>
var str = '春风春又生';
console.log(str.indexOf('春'));//indexof()默认第一个参数填写要查找的字符即可
console.log(str.indexOf('春',1));//第2个参数是起始位置,可以省略
console.log(str.lastIndexOf('春'));//lastindexof()使用方法与上类同
</script>
案例1:用indexof()查找a出现的位置和次数
<script>
var str = 'amnbvcxabacadjhggaaeafagwertyui';
var index = str.indexOf('a');
var num = 0;
while (index !== -1) {
console.log(index);//打印A出现的第一个位置:序号
num++;//计数器记录A出现的次数
index = str.indexOf('a',index + 1);//利用第一个位置的序号,依次寻找下一个A出现的位置:序号
}
console.log('a出现的次数是:' + num);
</script>
同时,我们可以计算出数组中某元素出现的位置及次数
<script>
var arr = ['red','blue','red','green','black','red','orange','red'];
var index = arr.indexOf('red');
var num = 0;
while (index !== -1) {
console.log(index);
num++;
index = arr.indexOf('red',index + 1);
}
console.log('red出现的次数是:' + num);
</script>
(2)返回字符串(根据字符串位置返回字符串)charAt(index) charCodeAt(index) str[index]
<script>
var str = 'www.bailong.org.cn';//遍历字符串
for (i = 0 ; i < str.length; i++) {
console.log(str.charAt(i));//1.charAt(index)根据位置/索引号返回字符串
}
console.log(str.charCodeAt(0));//2.charCodeAt(index),根据索引号返回字符对应的ASCII值,用来判断用来输入哪个键
console.log(str[0]);//3.h5新增的,直接返回字符串
</script>
案例1:每个字符重复次数与重复次数最多的字符
这个案例的精髓在于通过方法遍历字符串,把找到的字符串存入对象,通过判断对象属性值来记录每个字符出现的次数;同时还得到了一个新的对象。
然后,再遍历对象,计算出对象属性值中的最大值,同时把最大值对应的属性名传递至全局变量,进而打印出出现次数最多的字符。
<script>
var str = 'aaabbcdefnnnnnnnnnnnnnnnnafkmkvbdd';
var obj = {};
for (i = 0; i < str.length; i++) {
var chars = str.charAt(i);//1.遍历字符串,得到每个字符
if (obj[chars]) {//2.把遍历到的字符存入对象,判断是否为真
obj[chars]++;//3.若字符存在,则把字符存入对象,并记录数量:1++
} else {
obj[chars] = 1;//4.若字符不存在,则把该字符存入对象,并记录当前值=1
}
}
console.log(obj);
var max = 0;
var ch = '';
for (var k in obj) {//1.遍历对象
if (obj[k] > max) { //2.计算对象中属性值的最大值
max = obj[k];//3.obj[k]是属性值
ch = k;//4.k是对象属性,是局部变量,需要传递给全局变量ch,方便在外部打印
}
}
console.log('出现次数最多次数:' + max);
console.log(ch);
</script>
(3)拼接字符串 concat()
<script>
var str1 = 'bailong';
var str2 = 'seo';
var str3 = str1.concat(str2);//concat()方法类似+,用来拼接字符串,参数可以是变量,也可以是字符串
var str4 = str1.concat('wang');
console.log(str3);
console.log(str4);
</script>
(4)截取字符串 substr(index,length)
<script>
var str1 = 'bailong';
console.log(str1.substr(2,2));//截取字符串,第一个参数表示索引号,第二个参数表示数据长度
</script>
(5)替换字符串 replace(str1,str2)
使用遍历字符串的方法,借用replace()方法替换所有相同的字符
<script>
var str = 'wwwbailongorgcn';
console.log(str.replace('w','n'));//1.把第一个字符堆成成第二个字符,只能替换第一次找到的字符,如果要替换所有相同字符,可以遍历字符串实现
while (str.indexOf('w') !== -1) {//2.如果能查询到这个字符,就替换了
str = str.replace('w','n');
}
console.log(str);
</script>
(6)字符串转换为数组 split('|')
这个转换成join()把数组转换了字符串相反。
<script>
var str1 = 'www,bai,long,wang';
var str2 = 'www#bai#long#wang'
console.log(str1.split(','));//split('分隔符')把字符串转换成数组,字符串之间用什么隔开,就把这个隔开的符号放到split的参数中去即可
console.log(str2.split('#'));
</script>
(7)数据类型
简单数据类型,又叫值类型,有数字型,字符型,布尔型,未定义,null(返回空对象,没有想好存什么,可以用null).
复杂数据类型,又叫引用数据类型,如对象,数组。
简单数据类型放在栈里面,直接开辟一个空间,在栈里面存放的是值,
复杂数据类型放到堆里面。首先在栈进而存放地址,用十六进制表示,这个地址指向堆里面的数据,即值在堆里面放。
简单数据类型在传递参数时,是在栈中把值赋值给另外一个变量;而复杂数据类型在传递参数时,是在栈中把地址给另外一个变量,然后再通过地址到堆中去找到对应的值。