JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...
此外,JavaScript 允许自定义对象。
1. 认识对象
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。
1.1 哪些内容是对象
布尔型可以是一个对象
数值型可以是一个对象
字符串可以是一个对象
日期也是一个对象
数学和正则表达式也是对象
数组是一个对象
甚至函数也可以是对象
1.2 访问对象的属性
属性时与对象相关的值,访问对象的方法是
objectName.propertyName
var message = "Hello World!"; var x = message.length; //这里就访问了一个字符串对象的属性
1.3 访问对象的方法
方法是在对象上执行的动作,访问对象的方法是
objectName.methodName()
var message = "Hello World!"; var x = message.toUpperCase(); //这里是访问了一个字符串对象的方法
2. 创建 JavaScript 对象
通过 JavaScript,能够定义并创建自己的对象。创建对象有两种方法。
-
使用 Object 定义并创建对象
-
使用函数来定义对象,然后创建新的对象实例。
2.1 使用 Object 定义
2.1.1 构造函数定义
//1.以构造函数形式定义 var meinv = new Object(); //2.添加属性 meinv.name='苍'; meinv.sex='女'; meinv.age=35; //3.添加方法 meinv.clean = function(){ alert('我在帮你打扫卫生!'); }
2.1.2 使用花括号定义
//1.以花括号方式定义 var shuaige = { name: '于谦', sex: '男', age: '50', smoke:function(){ alert('正在抽烟'); }, drink:function(){ alert('正在喝酒'); }, };
2.2 使用对象构造器定义
//定义一个人物对象 function person(name,sex,age){ this.name = name; this.sex = sex; this.age = age; this.changeName=changeName; function changeName(name) { this.name=name; } } //创建一个对象 var myFriend = new persion("张三","男","18"); //查看属性与使用方法 console.log(myFriend.name); console.log(myFriend.changeName('李四'));
3. 常用对象
3.1 字符串对象
方法名 | 含义 |
---|---|
length | 字符串长度 |
charAt() | 获取指定位置上的字符 |
indexOf() | 获取指定字符活字符串首次出现的位置 |
lastIndexOf() | 获取指定字符活字符串最后一次出现的位置 |
split() | 按照指定字符活字符串将字符串拆分成数组 |
//定义一段字符串 var str1 = "get busy living, or get busy dying..."; var str2 = "要么忙着去生存,要么忙着去死亡"; //1.length:获取字符串长度 console.log(str1.length); //37 console.log(str2.length); //15 //2.charAt(): 获取指定位置上的字符【下标从0开始】 console.log(str1.charAt(4)); //b //3.indexOf(): 获取指定字符或字符串首次出现的位置 console.log(str1.indexOf('u')); //5 //4.lastIndexOf(): 获取指定字符或字符串最后一次出现的位置 console.log(str2.lastIndexOf('忙着')); //10 //5.split(): 按照指定字符或字符串来拆分字符串 var str3 = "张三##李四##王五##马六##赵七"; console.log(str3.split('##'));
3.2 数学对象
方法名 | 含义 |
---|---|
Math.floor() | 向下取整 |
Math.ceil() | 向上取整 |
Math.round() | 四舍五入 |
Math.max() | 取最大值 |
Math.min() | 取最小值 |
Math.abs() | 求绝对值 |
Math.random() | 随机一个0-1之间的数值 |
//数学对象常用方法 var num1 = 3.67; var num2 = 3.14; var num3 = 3.47; //1.Math.floor():向下取整 console.log(Math.floor(num1)); //3 //2.Math.ceil():向上取整 console.log(Math.ceil(num2)); //4 //3.Math.round():四舍五入 console.log(Math.round(num3)); //3 //4.Math.max():从一组值中取出最大值 console.log(Math.max(3,1,5,3,8,10)); //10 //5.Math.min():从一组值中取出最小值 console.log(Math.min(0.1,3,5,10,0.01)); //0.01 //6.Math.abs():求绝对值 var num4 = -3.1583; console.log(Math.abs(num4)); //3.1583 //7.Math.random():随机数,随机一个指定范围的数字 console.log(Math.random()); //0.xxxxxxxxxx console.log(rand(100,255)); //小案例:随机一个m与n之间的数 function rand(m, n){ return Math.ceil(Math.random()*(n-m+1))+m-1; }
3.3 日期对象
方法名 | 含义 |
---|---|
getFullYear() | 获取完整年份 |
getMonth() | 获取月份 - 1 |
getDate() | 获取日期 |
getDay() | 获取星期(从0开始) |
getHours() | 获取小时 |
getMinutes() | 获取分钟 |
getSecconds() | 获取秒 |
//1. 数组定义 //① 使用 [] 定义 var movies = ['肖申克的救赎','阿甘正传','拯救大兵瑞恩','霸王别姬','控方证人']; console.log(movies); //② 使用 new Array() 定义 var fruit = new Array('苹果','香蕉','橘子','柚子'); console.log(fruit); //2.数组常用属性:length,统计数组当中元素个数 console.log(fruit.length); //3.数组元素的增、删、改、查 //① 往数组中追加一个元素 movies[5] = '怦然心动'; console.log(movies); //② 删除数组中的一个元素 delete movies[3]; console.log(movies); //empty:代表空的意思 //③ 修改数组中的一个元素 movies[0] = '刺激1995'; console.log(movies); //④ 查找数组中的一个元素 console.log(movies[2]); //拯救大兵瑞恩 //4.遍历数组【将数组中的元素一一取出的过程叫做遍历】 //① 使用for循环遍历 for(var i=0; i<fruit.length; i++){ console.log(fruit[i]); } //② 使用for...in...方式遍历【把数组的下标放到 i 中】 for(var i in fruit){ document.write(i+'>>>>>'+fruit[i]+'<br/>'); }
3.4 数组对象
方法名 | 含义 |
---|---|
push() | 从数组尾部追加一个新的元素进去 |
pop() | 从数组尾部删除一个元素 |
splice() | 从指定位置,删除指定元素个数 |
sort() | 数组排序 |
reverse() | 数组进行翻转 |
join() | 用特定的分隔符将数组连接成一个字符串 |
concat() | 将多个数组合并成一个大数组 |
//定义一个数组 var stars = ['张国荣','张学友','梁朝伟','郭富城','黎明','陈百强','谭咏麟']; //1.push:从数组尾部追加一个新的元素进去 stars.push('梅艳芳'); console.log(stars); //2.pop:从数组尾部删除一个元素 stars.pop(); console.log(stars); //3.splice:从指定位置,删除指定元素个数 stars.splice(4,2); console.log(stars); //4.sort:数组排序 var arr = [10,100,38,20,448,1004]; arr.sort(function(a,b){ if(a>b){ return 1; }else if(a==b){ return 0; }else if(a<b){ return -1; } }); console.log(arr); //5.reverse:数组进行翻转 console.log(arr.reverse()); //6.join:用特定的分隔符将数组连接成一个字符串 console.log(stars.join('==')); //7.concat:将多个数组合并成一个大数组 var China = ['天安门','颐和园','圆明园']; var England = ['白金汉宫','泰晤士河','伦敦塔桥']; var America = ['纽约','拉斯维加斯','洛杉矶']; console.log(China.concat(England, America));
3.5 时间对象
方法名 | 含义 |
---|---|
getFullYear() | 获取完整年份 |
getMonth() | 获取月份 - 1 |
getDay() | 获取日 |
getHours() | 获取小时 |
getMinutes() | 获取分钟 |
getSeconds() | 获取秒 |
//1.获取一个时间对象【可以获取系统时间】 var timer = new Date(); //Sat Nov 14 2020 17:11:19 GMT+0800 (中国标准时间) //2.常用方法 //① getFullYear():获取完整年份 console.log(timer.getFullYear()); //2020 //② getMonth():获取月份 - 1 console.log(timer.getMonth()); //10 //③ getDay():获取日 console.log(timer.getDay()); //6 //④ getHours():获取小时 console.log(timer.getHours()); //17 //⑤ getMinutes():获取分钟 console.log(timer.getMinutes()); //15 //⑥ getSeconds():获取秒 console.log(timer.getSeconds()); //12
3.6 页面时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> JavaScript:页面时钟 </title>
<style type="text/css">
#time{
width:300px;
height:50px;
border:1px solid #ccc;
text-align:center;
line-height: 50px;
font-size:20px;
}
</style>
</head>
<body>
<div id="time"></div>
<script type="text/javascript">
//完成页面时钟
//1.获取追加时钟的标签
var time =document.getElementById('time');
//2.开启定时器
setInterval(function(){
//3.实例化日期对象
var timer = new Date();
//4.获取年月日时分秒
var year = timer.getFullYear();
var month = timer.getMonth();
var day = timer.getDay();
var hours = timer.getHours();
var minutes = timer.getMinutes();
var seconds = timer.getSeconds();
//5.拼装时钟字符串
var clock = year+'年'+month+'月'+day+'日 '+hours+'时'+minutes+'分'+seconds+'秒';
//6.在网页上输出时钟
time.innerHTML = clock;
},1000);
</script>
</body>
</html>
3.7 倒计时小程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> JavaScript:[扩展]倒计时 </title>
<style type="text/css">
#box{
width:500px;
height:200px;
line-height:200px;
margin-top:100px;
border:1px solid #eee;
font-size:100px;
}
</style>
</head>
<body>
<center>
<h2>倒计时小程序</h2>
请输入倒数秒数:<input type="text" id="second" value="0" name="">
<button id="start">开始倒计时</button>
<div id="box"></div>
</center>
<script type="text/javascript">
//获取节点
var second = document.getElementById('second');
var box = document.getElementById('box');
var button = document.getElementById('start');
//1.button按钮的单击事件
button.onclick = function(){
//2.获取用户输入的秒数
var time = second.value;
//3.判断用户输入的描述是否大于2
if(time <= 2){
alert('请输入大于2的数字');
}else{
//4.将second和button设置为不可操作
box.style.background = 'white';
box.style.color = 'black';
box.innerHTML = time;
second.setAttribute('disabled','disabled');
button.setAttribute('disabled','disabled');
//5.开启定时器
var dingshi = setInterval(function(){
//6.时间自减
time--;
//7.写入box盒子
box.innerHTML = time;
//8.判断是否数到了0
if(time<=0){
time.value = 0;
box.innerHTML = '时间到';
box.style.background = 'red';
box.style.color = 'white';
second.removeAttribute('disabled');
button.removeAttribute('disabled');
//9.清除定时器
clearInterval(dingshi);
}
},1000);
}
}
</script>
</body>
</html>