六、JavaScript 对象(1)——认识对象、常用对象
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[i]+'
');
}
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
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 页面时钟
JavaScript:页面时钟
3.7 倒计时小程序
JavaScript:[扩展]倒计时 倒计时小程序
请输入倒数秒数:
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
