内置对象
内置对象就是指这个语言自带的一些对象,供开发者使用,这些对象提供了一些常用的或是最基本而必要的功能。
javascript的内置对象:
内置对象:Date
Date对象的声明
写法一:
var date1 = new Date();
console.log(date1);
写法二:(兼容性最强)
var date2 = new Date("2017/09/06 09:00:00");
console.log(date2);
写法三和写法四:(不常用)
var date3 = new Date('Wed Jan 27 2017 12:00:00 GMT+0800 (中国标准时间)'); //写法三
var date4 = new Date(2017, 1, 27); //写法四
以上四种写法的打印结果是:
Date对象的方法:获取日期和时间
Date对象 有如下方法:
getDate()
获取日 1-31getDay()
获取星期 0-6(0代表周日)getMonth()
获取月 0-11(1月从0开始)getFullYear()
获取完整年份(浏览器都支持)getHours()
获取小时 0-23getMinutes()
获取分钟 0-59getSeconds()
获取秒 0-59getMilliseconds()
获取毫秒 (1s = 1000ms)getTime ()
返回累计毫秒数(从1970/1/1午夜)
为何累计毫秒数是从1970/1/1开始算起呢?
打印结果举例:
返回距离1970/01/01毫秒数
也就是返回:此刻时间 减去 1970/01/01 的毫秒数。
代码实现:
var date1 = Date.now();
var date2 = +new Date();
var date3 = new Date().getTime();
var date4 = new Date().valueOf();
打印结果:
举例:模拟日历
要求每天打开这个页面都能定时显示当前的日期。
代码实现:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 800px;
margin: 200px auto;
color: red;
text-align: center;
font: 600 30px/30px "simsun";
}
</style>
</head>
<body>
<div></div>
<script>
//模拟日历
//需求:每天打开这个页面都能定时显示年月日和星期几
//1.创建一个当前日期的日期对象
var date = new Date();
//2.然后获取其中的年、月、日和星期
var year = date.getFullYear();
var month = date.getMonth();
var hao = date.getDate();
var week = date.getDay();
// console.log(year+" "+month+" "+hao+" "+week);
//3.赋值给div
var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var div = document.getElementsByTagName("div")[0];
div.innerText = "今天是:"+year+"年"+(month+1)+"月"+hao+"日 "+arr[week];
</script>
</body>
</html>
实现效果:
举例:发布会倒计时
实现思路:
设置一个定时器,每间隔1毫秒就自动刷新一次div的内容。
代码实现:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 1210px;
margin: 200px auto;
color: red;
text-align: center;
font: 600 30px/30px "simsun";
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.getElementsByTagName("div")[0];
var timer = setInterval(fn, 1);
function fn() {
var nowtime = new Date();
var future = new Date("2019/02/03 11:20:00");
var timeSum = future.getTime() - nowtime.getTime(); //获取时间差:发布会时间减去此刻的毫秒值
var day = parseInt(timeSum / 1000 / 60 / 60 / 24);
var hour = parseInt(timeSum / 1000 / 60 / 60 % 24);
var minu = parseInt(timeSum / 1000 / 60 % 60);
var sec = parseInt(timeSum / 1000 % 60);
var millsec = parseInt(timeSum % 1000);
//问题处理:所有的时间小于10的时候,在前面自动补0,毫秒值要补双0(比如如,把 8 秒改成 08 秒)
day = day < 10 ? "0" + day : day; //day小于10吗?如果小于,就补0;如果不小于,就是day本身
hour = hour < 10 ? "0" + hour : hour;
minu = minu < 10 ? "0" + minu : minu;
sec = sec < 10 ? "0" + sec : sec;
if (millsec < 10) {
millsec = "00" + millsec;
} else if (millsec < 100) {
millsec = "0" + millsec;
}
// console.log(day);
// console.log(parseInt(timeSum/1000/60/60/24));
if (timeSum < 0) {
div.innerHTML = "距离苹果发布会还有00天00小时00分00秒000毫秒";
clearInterval(timer);
return;
}
div.innerHTML = "距离苹果发布会还有" + day + "天" + hour + "小时" + minu + "分" + sec + "秒" + millsec + "毫秒";
}
</script>
</body>
</html>
实现效果:
内置对象String
简单数据类型、复杂数据类型
1、简单数据类型:
注意,之前学习的简单数据类型string
是无法绑定属性和方法的。比如说:
var str = "smyhvae";
str.aaa = 12;
console.log(typeof str); //打印结果为:string
console.log(str.aaa); //打印结果为:undefined
上方代码中,当我们尝试打印str.aaa
的时候,会发现打印结果为:undefined。
当然,我们可以打印str.length、srt.indexOf("m")等等。因为这两个方法的底层做了数据类型转换。
2、复杂数据类型:
复杂数据类型String
是可以绑定属性和方法的。如下:
var strObj = new String("smyhvae");
strObj.aaa = 123;
console.log(strObj);
console.log(typeof strObj); //打印结果:Object
console.log(strObj.aaa);
打印结果:
同理,内置对象Number也有一些自带的方法,比如:
Number.MAX_VALUE;
Number.MIN_VALUE;
内置对象Boolean也有一些自带的方法,但是用的不多。
下面讲一下内置对象String的常见方法。
charAt/charCodeAt:1.2.1 给索引查字符
字符 = Str.charAt(索引值);
解释:获取相应位置的字符。
字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间,该方法将返回一个空字符串。
字符编码 = Str.charCodeAt(索引值);
解释: 获取相应位置的Unicode字符编码。
举例1:
var str = new String("smyhvae");
for (var i = 0; i < str.length; i++) {
console.log(str.charAt(i));
}
打印结果:
上面这个例子一般不用。一般打印数组和json的时候用索引,打印String不建议用索引。
举例2:打印字符串的占位长度
提示:一个英文占一个位置,一个中文占两个位置。
思路:判断该字符是否在0-127之间(在的话是英文,不在是非英文)。
代码实现:
<script>
// sort(); 底层用到了charCodeAt();
var str = "I love my country!我你爱中国!";
//需求:求一个字符串占有几个字符位。
//思路;如果是英文,站一个字符位,如果不是英文占两个字符位。
//技术点:判断该字符是否在0-127之间。(在的话是英文,不在是非英文)
alert(getZFWlength(str));
alert(str.length);
//定义方法:字符位
function getZFWlength(string) {
//定义一个计数器
var count = 0;
for (var i = 0; i < string.length; i++) {
//对每一位字符串进行判断,如果Unicode编码在0-127,计数器+1;否则+2
if (string.charCodeAt(i) < 128 && string.charCodeAt(i) >= 0) {
count++;
} else {
count += 2;
}
}
return count;
}
</script>
打印结果:
30
24
从打印结果可以看出:字符串的长度是24,但是却占了30个字符位(一个中文占两个字符位)。
另外,sort()方法其实底层也是用到了charCodeAt(),因为用到了Unicode编码。
indexOf/lastIndexOf:给字符查索引
索引值 = str.indexOf/(想要查询的字符);
解释:从前向后索引字符串的位置。
因此可以得出一个技巧:如果获取的索引值为0,说明字符串是以查询的参数为开头的。
同理,lastIndexOf()是从后向前寻找。
var str = "abcdea";
//给字符查索引(索引值为0,说明字符串以查询的参数为开头)
console.log(str.indexOf("c"));
console.log(str.lastIndexOf("c"));
console.log(str.indexOf("a"));
console.log(str.lastIndexOf("a"));
打印结果:
concat:字符串的链接
新字符串 = str1.concat(str2); 链接两个字符串
这种方法基本不用,直接两个字符串相加就好。
字符串的截取(重要)
字符串的截取有好几个方法,下面分别讲解。
1、 slice()方法:
格式:
字符串 = str.slice(索引1,索引2); //两个参数都是索引值。
上面的参数,包左不包右。如下:
(2,5) 表示正常,包左不包右。
(2) 表示从指定的索引位置开始,剪到最后。
(-3) 表示从倒数第几个开始,剪到最后.
(5,2) 表示前面的大,后面的小,返回值为空。
2、substr()方法:
格式:
字符串 = srt.substr(索引值, 长度);
参数解释:
(2,4):从索引值为2的字符开始,截取4个字符。
(1):从指定位置开始,截取到最后。
(-3):从倒数第几个开始,剪到最后.
不包括前大后小的情况。
一些特殊方法
1、trim():去除字符串前后的空白。
代码举例:
//去除前后的空格,trim();
var str1 = " a b c ";
console.log(str1);
console.log(str1.trim());
打印结果:
2、replace():替换。
举例:
//replace()方法:替换
var str2 = "Today is fine day,today is fine day !!!"
console.log(str2);
console.log(str2.replace("today","tomorrow")); //只能替换第一个today
console.log(str2.replace(/today/gi,"tomorrow")); //这里用到了正则,才能替换所有的today
3、split():字符串变数组。
//split()方法:字符串变数组
var str3 = "生命壹号|许嵩|smyhvae";
console.log(str3);
console.log(str3.split()); // 无参数,表示:把字符串作为一个元素添加到数组中。
console.log(str3.split("")); //参数为空字符串,则表示:分隔字符串中每一个字符,分别添加到数组中
console.log(str3.split("|")); //参数为指定字符,表示:此字符将不会出现在数组的任意一个元素中
console.log(str3.split("许")); //同理
打印结果:
大小写转换
举例:
var str = "abcdEFG";
//转换成小写
console.log(str.toLowerCase());
//转换成大写
console.log(str.toUpperCase());
html方法
anchor() 创建a链接
big()
sub()
sup()
link()
bold()
注意,str.link() 返回值是字符串。
举例:
var str = "你好";
console.log(str.anchor())
console.log(str.big())
console.log(str.sub())
console.log(str.sup())
console.log(str.link("http://www.baidu.com"));
console.log(str.bold())
字符串练习
练习1:"smyhvaevaesmyh"查找字符串中所有m出现的位置。
代码实现:
var str2 = "abcoefoxyozzopp";
for(var i=0;i<str2.length;i++){
//如果指定位置的符号=== "o"
//str2[i]
if( str2.charAt(i)==="o"){
console.log(i);
}
}
练习2:判断一个字符串中出现次数最多的字符,统计这个次数
<script>
var str2 = "smyhvaevaesmyhvae";
//定义一个json,然后判断json中是够有该属性,如果有该属性,那么值+1;否则创建一个该属性,并赋值为1;
var json = {};
for (var i = 0; i < str2.length; i++) {
//判断:如果有该属性,那么值+1;否则创建一个该属性,并赋值为1;
var key = str2.charAt(i);
if (json[key] === undefined) {
json[key] = 1;
} else {
json[key] += 1;
}
}
console.log(json);
console.log("----------------");
//获取json中属性值最大的选项
var maxKey = "";
var maxValue = 0;
for (var k in json) {
// if(maxKey == ""){
// maxKey = k;
// maxValue = json[k];
// }else{
if (json[k] > maxValue) {
maxKey = k;
maxValue = json[k];
}
// }
}
console.log(maxKey);
console.log(maxValue);
</script>
打印结果:
内置对象 Math
内置对象 Math的常见方法:
Math.abs(); 取绝对值
Math.floor(); 向下取整(向小取)
Math.ceil(); 向上取整(向大取)
Math.round(); 四舍五入取整(正数四舍五入,负数五舍六入)
Math.random(); 随机数0-1
举例:
var num = -0.6;
console.log(Math.abs(num)); //取绝对值
console.log(Math.floor(num)); //向下取整,向小取
console.log(Math.ceil(num)); //向上取整,向大取
console.log(Math.round(num)); //四舍五入取整(正数四舍五入,负数五舍六入)
console.log(Math.random()); //随机数 0-1
url 编码和解码
URI (Uniform ResourceIdentifiers,通用资源标识符)进行编码,以便发送给浏览器。有效的URI中不能包含某些字符,例如空格。而这URI编码方法就可以对URI进行编码,它们用特殊的UTF-8编码替换所有无效的字符,从而让浏览器能够接受和理解。
encodeURIComponent(); //把字符串作为 URI 组件进行编码
decodeURIComponent(); //把字符串作为 URI 组件进行解码
举例:
var url = "http://www.cnblogs.com/smyhvae/";
var str = encodeURIComponent(url);
console.log(str); //打印url的编码
console.log(decodeURIComponent(str)); //对url进行编码后,再解码,还原为url
打印结果: