二、（5）JavaScript对象
JavaScript-对象
1. 对象（重点）
定义：对象就是一组属性与方法的集合。对象是一种复合数据类型，或者称为引用类型。基本数据类型只能用于描述单个数据，而引用类型是一个可以描述多个数据的集合。
对象：对象由属性和方法组成；
属性：描述对象自身的特征；比如人的姓名，猪的体重；
方法：对象具有的行为和功能，比如人可以拥有一个“自我介绍”功能；
注意：
- Ese5是基于对象，可以直接创建对象，没有类。
- Es6是面向对象，有类。
对象的分类
JavaScript（内置对象）内建对象
由JavaScript语言规范定义的一系列对象，这些对象提供了完成各种任务的方法，比如Math对象,String对象,Date对象等。
var date = new Date();//日期对象 console.log(date.getSeconds()); console.log(date.getHours());
自定义对象：由程序员创建描述特定事物的对象；
对象创建的两种方式：
<script>
//自定义对象
//a.字面量创建对象
var user={name:"张三",run:function () {
console.log("李四");
}};
console.log(user.name);//调用属性
user.run();//调用方法
//b.实例化方式创建对象
var user1=new Object();
user1.names="王五";
user1.sex="男";
user1.shoeInfo=function () {
console.log("我是："+this.names+",性别："+this.sex);
}
user1.shoeInfo();//调用方法
console.log(user1.names);//调用属性
</script>
比如：
var user = new Object(); //创建了一个对象 user.name = “王花花”; // 为对象添加属性（特征） user.sex = true; user.showInfo = function(){ //this指向user. this==user; console.log(“我是：”+this.name+“，是一个”+this.sex?”男人”：”女人”); }； var myGirl = { name:'小华', age:18, height:2.8, run:function(){ alert('跑步走...'); } };
方法中的this
当一个函数作为对象的属性存在时，并且通过对象调用这个方法，那么函数中的this就指向调用函数的这个对象；
function sayName(){ console.log(this.name); } var ergou = { name :”二狗”, say:sayName }; ergou.say();//二狗 var juer = { name :”菊儿”, say:sayName }; juer.say();//菊儿
this指向对象的好处在于，可以更加方便的对象自身的内部成员。
基本类型与引用类型区别
内存存储
- 1、基本类型和引用类型，都是数据类型；
- 2、数据的值都存储在内存中；
- 3、程序在运行时，会把内存划分不同区域，其中最重要的两个区域，是栈和堆。
- 4、栈中的值占用空间固定，而堆中是动态分配的内存；
- 5、所有的变量都存储在栈
- 6、基本数据类型的值直接存储在栈中，而引用类型的值存储在堆中，变量只是一个指向堆内存的地址引用。
基本类型：基本类型的数据存储在内存栈中，在赋值时将值复制一份给另一个变量，两个互补影响。
引用类型：引用类型的数据存储在内存堆中，赋值时将内存地址给另一个变量，两个变量操作同一块空间。
遍历对象
语法：for...in遍历对象
var user={ name="张三", age=20, email:"123@qq.com" }; //遍历对象 for(var i in user){ console.log(i);//i是遍历所有变量名 console.log(user[i]);//使用动态属性遍历所有值 }
2. String对象（重点）
什么是字符串对象
JS中字符串可以是基本数据类型，也可以是引用数据类型，具体是哪一种根据我们创建的方式而定；
var s1 = “aaa” ; //基本数据类型 var s2 = new String(“bbb”) //引用数据类型 var str1 = “abcd”; //简单常用的定义形式 var str2 = ‘abcd’; var str3 = new String(“abcd”); //标准定义形成 var str4 = new String(‘abcd’); //以上都是字符串，只是不同的数据类型而已，及存储的位置也不同。
基本类型和实例化对象类型区别：
相同点：都是对象，都可以调用属性和方法
不同点：1、类型不同，内存处处位置也不同。2、基本类型的字符串不能自定义属性和方法，引用数据类型可以自定义属性和方法。
注意点：JS中基本数据类型（存储字符串值的能力）与JS引用数据类型（存储字符串值、长度、方法（功能））虽然
从类型的角度来讲，他们的确不同，但是使用的时候其实差异不大，简单理解：就是说JS中的基本数据类型可以当成
对应的引用类型来使用，后面章节中会有直观体会；
为什么使用字符串对象
因为在JavaScript中为字符串对象提供了很多现成对字符串处理的方法和属性,借助于现有的方法和属性可以对对象中的字符串进行处理. 我们在工作中遇到的数据最多也是字符串类型的数据。
字符串的属性和方法
JavaScript为字符串对象定义了很多方法和属性,通过对象可以直接是调用方法和数据对自身的字符串进行处理。
语法:
字符串对象.属性
字符串对象.方法名()
1 .length：length属性字符串对象字符串长度;
2 .charAt(index)：index 必需。查找指定下标的字符，返回在指定位置的字符。
注意:字符串中第一个字符的下标是0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。
3 .indexOf(searchvalue,fromindex)：searchvalue 必需。查找字符首次出现的位置。
fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。方法可返回某个指定的字符串值在字符串中首次出现的位置。
注释：indexOf() 方法对大小写敏感！
注释：如果要检索的字符串值没有出现，则该方法返回 -1。
4 .lastIndexOf(searchvalue,fromindex)：searchvalue 必需。查找字符最后出现的位置。
fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的最后一个字符处开始检索。
返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
5 .replace(substr,replacement)：字符串替换。substr 必需。需要被替换的字符串值。replacement 必需。替换后的字符串值。
字符串中用一些字符替换另一些字符。
默认情况下使用replacement替换找到的第一个substr的值. 如果需要全部替换需要加上全局标志 g
6 .substr(start,length)：字符串截取。start 下标。length 长度。可在字符串中抽取从 start 下标开始的指定数目的字符。
7 .substring(start,stop)：用于提取字符串中介于两个指定下标之间的字符。
start 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
stop 可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。
如果省略该参数，那么返回的子串会一直到字符串的结尾。
8 .toLowerCase()：把字符串转换为小写。
9 .toUpperCase()：把字符串转换为大写。
10 .charCodeAt()：返回在指定的位置的字符的 Unicode 编码。
var s = “程序员”; console.log(s.charCodeAt(1));//获取“序”的unicode编码。
11 .fromCharCode()：可接受一个指定的 Unicode 值，然后返回一个字符串。
var s = String.fromCharCode(97,98,99); console.log(s);
字符串方法实例
点击上传图片按钮检测上传文件后缀是否支持指定的上传后缀。
<body>
<form action="login.php" method="post" enctype="multipart/form-data" id="myform">
<p>上传头像：<input type="file" id="img" /></p>
<p><button type="button" id="btn">提交</button></p>
</form>
<script>
// 验证文件格式
btn.onclick=function(){
var filename = img.value;//得到文件路径
var number = filename.lastIndexOf(".");//得到文件格式后缀.的下标
var s = filename.substr(number);//从.开始截取文件后缀
//定义允许上传的文件扩展名
var allowExt=[".jpg",".gif",".jpeg",".png"];
var flag=false;
for (var i=0;i<allowExt.length;i++){
if (allowExt[i]===s){
flag=true;
}
}
if (flag){
myform.submit();//执行表单提交
}else{
alert("文件格式不支持！");
}
}
</script>
</body>
特殊字符串
可以在 JavaScript 中使用反斜杠来向文本字符串添加特殊字符。
代码 输出
\' 单引号
\" 双引号
\& 和号
\\ 反斜杠
\n 换行符
\r 回车符
\t 制表符
\b 退格符
\f 换页符
以上特殊的字符串是不能够单独存在在字符串中,需要通过\来转义.
3. Number对象（重点）
toFixed：把数字转换为字符串，结果的小数点后有指定位数的数字。
//指定小数点位数,四舍五入 var a=12.258; console.log(a.toFixed(2));//12.26
4. Math对象（重点）
JavaScript自身定义了很多数学运算的方法被定义在Math对象中. Math自身就是一个对象无需创建直接使用自身中的方法和属性。
1. Math的属性PI：PI属性代表圆周率。
2. Math.abs(x)：返回数x的绝对值。
3. Math.ceil(x)：对一个数x进行上舍入
4. Math.floor(x)：对一个数x进行下舍入
5. Math.max(x)：返回指定数中带有较大的值的那个数。…表示可以传递无限个参数。
6. Math.min(x,y)：返回指定数中带有较小的值的那个数。…表示可以传递无限个参数。
7. Math.pow(x,y)：返回 x 的 y 次幂的值。
8. Math.random()：返回介于 0 ~ 1 之间的一个随机数,包含0不包含1。
9. Math.round(x)：可把一个数字舍入为最接近的整数。(四舍五入)
<script>
var a=12.258;
//指定小数点位数,四舍五入
console.log(a.toFixed(2));
//Math类
console.log(Math.abs(-10));//绝对值 10
console.log(Math.ceil(3.8));//向上取整 4
console.log(Math.floor(3.8));//向下取整 3
console.log(Math.max(20,30,50,10));//获取最大值 50
console.log(Math.min(20,30,50,10));//获取最小值 10
console.log(Math.pow(2,10));//x的y次方 1024
console.log(Math.ceil(Math.random()*10+1));//产生1-10的随机数
</script>
10. 获取指定范围的随机整数：获取指定范围的随机整数的方法,该方法不是系统的方法是系统,该方法必须记住写法,后面经常应用。
function randomInt(min,max){ return Math.floor(Math.random()*(max-min+1)+min); } //需求:获取10到30之间的随机整数 //逆向分析法: //>>1. 如果能够获取0到20的随机数,再随机上加10 //>>2. 如果能够获取0到1的随机数,再乘以20可以实现, //因为通过Math.random()生成的随机数不包含1. 所以说在20的基础上加一 //即 Math.random()*(20+1) 计算出来的值0--21之间(不包含21) //返过来分析 //>>1. Math.random()*(20+1) 计算出来的值0--21之间(不包含21),要得到10--30 //>>2. 在以上的基础上加10 即: Math.random()*(20+1)+10, 得到10--31之间(不包含31) //>>3. 在 Math.random()*(20+1)+10公式中需求给出没有20,实际上20可以通过30-10得到 // 即: Math.random()*(30-10+1)+10 (10--31之间的数),但不包含31.并且我们需要的是整数 //>>4. Math.floor(Math.random()*(30-10+1)+10),得到10到30之间的整数 //>>5. 如果将以上需求中的10,30分别作为需求的最小数min,最大数max表示的话, //得到以下公式: //Math.floor(Math.random()*(max-min+1)+min) //>>6.可以将该公式看作获取指定范围随机整数的方法如上方法:
5. Date对象（重点）
Date 对象用于处理日期和时间。
创建Date对象
1. new Date()：创建默认系统日期
2. new Date(dateVal)：创建指定日期，必须要符合时间格式（"年/月/日 时：分：秒"）
3. new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]]):创建指定参数日期。
4. new Date(dateVal):根据dateVal指定的时间创建date对象
字符串的格式:
短日期可以使用“/”或“-”作为日期分隔符，但是必须用月/日/年的格式来表示，例如"7/20/96"。
小时、分钟、和秒钟之间用冒号分隔，尽管不是这三项都需要指明。"10:"、"10:11"、和 "10:11:12" 都是有效的。
dateVal也是数字类型的参数,数字类型的参数代表毫秒值,该毫秒值是从1970 年 1 月 1 日 到指定日期的毫秒数.
5. new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]])：根据指定年月日时分秒创建date对象。
注意：month中的值从0开始, 0—11代表12个月
Date对象的常用方法
1 .getFullYear()：可返回一个表示年份的 4 位数字。
2 .getMonth()：可返回表示月份的数字。使用本地时间。返回值是 0（一月） 到 11（十二月） 之间的一个整数。
3 .getDate()：可返回月份的某一天。使用本地时间。返回值是 1 ~ 31 之间的一个整数。
4 .getHours()：可返回时间的小时字段。以本地时间显示。返回值是 0 （午夜） 到 23 （晚上 11 点）之间的一个整数。
5 .getMinutes()：以本地时间显示。返回值是 0 ~ 59 之间的一个整数。
6 .getSeconds()：可返回时间的秒。以本地时间显示。返回值是 0 ~ 59 之间的一个整数。
7 .getMilliseconds()：可返回时间的毫秒。以本地时间显示。返回值是 0 ~ 999 之间的一个整数。
8 .getDay()：可返回表示星期的某一天的数字。使用本地时间。返回值是 0（周日） 到 6（周六） 之间的一个整数。
9 .getTime()：可返回距 1970 年 1 月 1 日之间的毫秒数。
10 .toLocaleString()：可根据本地时间把 Date 对象转换为字符串，并返回结果。
以上的方法是获取时间中的内容.Date对象也提供了设置Date对象内容的方法
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setFullYear() 设置 Date 对象中的年份（四位数字）。
setYear() 请使用 setFullYear() 方法代替。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
setTime() 以毫秒设置 Date 对象。
时间案例
1. 倒计时案例
<body>
<h1>倒计时：<span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span></h1>
<script>
/*制作一个倒计时*/
//setInterval周期执行，1秒执行一次函数
setInterval(function () {
var d1=new Date(2021,2,5,14,0,0);//目标日期时间
var d2 = new Date();//当前时间
var s = Math.floor((d1-d2)/1000);//获取时间差毫秒
hours.innerHTML=Math.floor(s/3600);//获取小时，放到span标签中
minutes.innerHTML=Math.floor((s%3600)/60);//获取分钟，放到span标签中
seconds.innerHTML=Math.floor(s%3600)%60;//获取秒，放到span标签中
},1000);
</script>
</body>
2. 计算一个人活了多少天?
/** @param birthday: 指定出生日期 @return 截止当前时间出生天数 */ function f(birthday){ //>>1.生日时间对象 var d1 = new Date(birthday); //>>2.当前时间对象 var d2 = new Date(); //>>3.得到生日时间距1970.07.07的毫秒值 var t1 = d1.getTime(); //>>3.得到当前时间距1970.07.07的毫秒值 var t2 = d2.getTime(); return Math.round((t2-t1)/1000/60/60/24) } var days = f('1980/06/26'); alert(days);
3. 计算一个人活到60岁还需要多少天?
/** @param birthday: 指定出生日期 @param num: 指定岁数 @return 截止当前时间出生天数 */ function f1(birthday,num){ //>>1.生日时间对象 var d1 = new Date(birthday); //>>2.设置岁数 var year = d1.getFullYear(); year+=num; //>>3.设置num岁后的日期 d1.setYear(year); var d2 = new Date(); //>>4.未来num岁后距1970.07.07的毫秒值 var t1 = d1.getTime(); //>>5.得到当前时间距1970.07.07的毫秒值 var t2 = d2.getTime(); return Math.round((t1-t2)/1000/60/60/24) } var days = f1('1980/06/26',60); alert(days);
6. 作业
1、使用两种方式创建一个车（car）对象，
属性有：颜色、价格、车门，
方法有：显示汽车颜色，显示汽车价格。
2、字符串查询：（字符）判断一个字符（比如”a”）是否出现在另一个字符（比如”2340sadfj2affa2”）中。
3、敏感词过滤
4、字符串反转：利用var s1 = prompt(“请输入任意字符”,””)可以获取用户输入的字符（存到变量s1中了），
//试编程将用户输入的字符“反转顺序”并首尾字母转为大写，其他字母转为小写后alert出来。
5、在网页中显示类似：2017-3-30 18:03:46 星期四
浙公网安备 33010602011771号