六、JavaScript 对象(1)——认识对象、常用对象

JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...

此外,JavaScript 允许自定义对象

1. 认识对象

JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。

1.1 哪些内容是对象

  1. 布尔型可以是一个对象

  2. 数值型可以是一个对象

  3. 字符串可以是一个对象

  4. 日期也是一个对象

  5. 数学和正则表达式也是对象

  6. 数组是一个对象

  7. 甚至函数也可以是对象

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,能够定义并创建自己的对象。创建对象有两种方法。

  1. 使用 Object 定义并创建对象

  2. 使用函数来定义对象,然后创建新的对象实例。

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:[扩展]倒计时 

倒计时小程序

​请输入倒数秒数:


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部