《部分案例代码下载》
学习目标(全天模式)
- 能够使用对象的属性和方法
- 能够for…in遍历对象的所有属性
- 能够说出new关键字的执行过程
- 能够说出简单类型和复杂类型的数据作为函数参数的差异
- 能够说出Math对象的至少3个方法
- 能够说出Date对象的至少3个方法
。。。。。。
理解上课的知识点……
对象的取值与赋值的语法
点语法
对象的取值:
对象名.属性名
1
2
3console.log(person.name);
console.log(person.height);
......注意点:
- 如果属性名存在,获取对应的值
- 如果属性名不存在,返回undefined
对象名.方法名——》对象名.方法名()
方法一般不会打印,是用来调用的
1
2console.log(person.eat);// 打印的是方法这个函数
person.eat();// 表示调用person对象中的eat方法这个函数
对象的赋值:
- 对象名.属性名 = 值
- 如果属性名存在,被覆盖
- 如果属性名不存在,添加一个新属性
中括号语法
中括号语法也叫做关联数组语法,说白了就是把对象当做是数组看待
数组取值是:arr[下标],其实下标就相当于键值对中的键
类比如数组的取值,对象也可以写:obj[键]
中括号语法:
- 用法灵活,支持字符串或者变量
- 取值:对象名[“属性名”]
- 赋值:对象名[“属性名”] = ‘新值’
点语法与中括号语法的区别
两种方法都能使用,但是只有中括号语法中支持变量
- 点语法:对象名.属性名 ——》简洁——》只能写属性名,不支持变量(不管变量)
- 中括号语法:对象名[‘属性名’] ——》灵活——》只能写字符串或者变量
1 | // 下列分别访问的是对象的什么属性 |
中括号语法的使用场景
如果访问的属性值是一个变量,必须使用中括号语法
需求:
1 | // 给一个空对象中添加数据,变成 { n1: 1, n2: 2, n3: 3, n4: 4 ...... n10: 10 } |
————————
遍历对象
一个一个的访问对象的全部属性
语法:
每一个键值对都会执行一遍for…in语句——》其中是变量需要使用中括号语法
1 | // --------------------key——》键——》是一个变量可以变化 |
ヾ(๑╹◡╹)ノ” 遍历对象的小练习
1 | // 需求: 将所有 obj2 的属性, 添加到 obj 中去 |
批量创建对象
在实际开发中,可能需要创建多个用户对象,此时就需要批量创建对象了
使用工厂函数创建对象
需求: 需要同时创建多个对象出来
- 一个一个字面量形式的创建——》可以,但是不停的做重复的代码
- 可以把重复创建对象的代码用函数封装起来——》这个用来创建对象的函数,就叫做工厂函数
1 | function createPerson(name, age, desc) { |
注意点: 在对象方法中,this就相当于当前这个对象。
优点:可以同时创建多个对象
缺点:工厂函数创建出来的对象,是Object类型的,没有更具体的类型!!
有时候咱们需要构建人这个对象,想要其类型就是person,此时使用工厂函数就不行了
————————
构造函数的介绍
每一个对象自身存在一个类型,表示自己是什么类型的对象。
作为学生来说,对象的类型应该为Student
作为老师来说,对象的类型应该为Teacher
都是人,不过属于不同类型的人
……
但是如果使用工厂函数来说,不管创建出来是什么对象,类型始终是Object,因为底层使用的是new Object这个构造函数。用什么构造函数创建的对象,对象类型就是什么
所以如果希望创建一个学生对象,他的类型为Student,此时可以使用自定义一个Student构造函数即可!!
构造函数的特点:
- 就是一个函数
- 函数名首字母大写
- js内部,内置了一些构造函数,比如:Object、Array…
- 构造函数可以自定义
自定义构造函数的使用步骤:
- 声明一个自定义的构造函数,特点是首字母大写
- 结合new语法一起使用,创建出来的对象,就有自己的类型了!!
new做的四件事情
先创建出一个student类型的对象~
new会做四个事情
new会创建一个新的空对象,并且这个对象是有类型的
让构造函数中的this指向当前创建的对象
想给当前新对象加属性,直接this.name即可
执行构造函数中的代码
在这一步可以给新对象加属性和方法
会返回这个新对象
注意点
new的作用:创建了一个对象
构造函数的作用:给创建对象添加了属性和方法(实例化对象)
没有构造函数体,只是一个空对象
代码:
1 | // ----------------------构造函数 |
ヾ(๑╹◡╹)ノ” 构造函数的小练习-批量创建狗
创建对象的小结
创建单个对象
字面量:
var obj = {};
构造函数:
var obj = new Object();
创建多个对象
工厂函数:
function createPerson() {var obj ={};return obj;}
只是把创建对象的过程封装成了一个函数
自定义构造函数:
function Person(){ this.name='zs'; }
需要通过new + 构造函数创建,并且可以创建不同类型的对象
ヾ(๑╹◡╹)ノ” 构造函数相关的概念小结
————————
值类型与引用类型
简单数据类型(值类型):number、string、boolearn、undefined、null
复杂数据类型(引用类型): Array、Object、Function、(自定义构造函数创建的一些对象!!)
从内存角度上划分,可以把数据分为值类型与引用类型。
简单数据类型(值类型):变量在存储时,存储的是值本身!!
复杂数据类型(引用类型): 变量在储存时,储存的是内存地址!!
值类型与引用类型的内存分布
(◕ᴗ◕✿)画图说明值类型内存分布
值类型变量中存的是值本身
1 | var num = 10; |
(◕ᴗ◕✿)画图说明引用类型内存分布
引用类型变量中存的是内存地址
1 | var obj = { |
值类型与引用类型的赋值特征
值类型变量中存的是值本身,所以赋值给其他变量时,赋值的就是值本身
1
2
3
4
5
6// 值类型
var num1 = 10;
var num2 = num1;
num2 = 99;
console.log(num1);
console.log(num2);引用类型变量中存的是内存地址,所以赋值给其他变量时,赋值的是内存地址
1
2
3
4
5
6
7
8
9// 引用类型
var obj1 = {
name:"zs",
age:18
}
var obj2 = obj1;
obj2.name = "ls";
console.log(obj1.name);
console.log(obj2.name);
值类型与引用类型参数传递
- 值类型:变量存的是值本身,传参时传递的是值本身
(◕ᴗ◕✿)画图说明值类型参数传递
1 | var num = 10; |
- 引用类型:变量存的是内存地址,传参时传递的是内存地址
(◕ᴗ◕✿)画图说明引用类型参数传递
1 | var obj = { |
————————
值类型与引用类型练习
1 | //面试题1 : |
(◕ᴗ◕✿)画图说明第二种情况
1 | //面试题2 : |
内置对象
JS内置对象就是指Javascript自带的一些对象,供开发者使用,这些对象提供了一些常用的的功能。
常见的内置对象有Math、String、Array、Date等
Math对象
Math对象中封装很多与数学相关的属性和方法。
圆周率
Math.PI
最大值/最小值
1
2Math.max(1,2,3,4,5,6);
Math.min(1,2,3,4,5,6);取整
1
2
3
4
5
6
7
8Math.ceil();//天花板,向上取整,取大的那个
Math.floor();//地板,向下取整,取小的那个
Math.round();//四舍五入,如果是.5,则取更大的那个数
console.log( Math.ceil(1.1) );
console.log( Math.ceil(1.9) );
console.log( Math.ceil(-1.1) );
console.log( Math.ceil(-1.9) );随机数
1
Math.random();//返回一个[0,1)之间的数,能取到0,取不到1
小案例:随机获取0、1、2这三个数
1
2
3
4// --------------获取0~2.9999的随机数
Math.random()*3
//---------------只需要把小数点之后的去掉即可
parseInt(Math.random()*3)
> 求0~n的整数随机数
>
> `parseInt(Math.random()*(n+1))`
小案例: 随机生成一个rbg颜色
1
2
3
4
5
6
7var colorA = parseInt( Math.random() * 256 );
var colorB = parseInt( Math.random() * 256 );
var colorC = parseInt( Math.random() * 256 );
var str = 'rgb('+ colorA + "," + colorB + ',' + colorC +')';
console.log(str);
//----------------------设置body的颜色(web api内容)
document.body.style.backgroundColor = str;
绝对值
1
2
3
4Math.abs();//求绝对值
//-----------------------------
console.log(Math.abs(1)); // 1
console.log(Math.abs(-1)); // 1次幂(次方)
1
2
3
4
5Math.pow(num, power);//求num的power次方
//-----------------------------
console.log(Math.pow(3, 2)); // 3的平方 9
console.log(Math.pow(10, 3)); // 10的三次方 1000
console.log(Math.pow(100, 0.5)); // 100的开方 10开方
1
2
3Math.sqrt(num);//对num开平方
//-----------------------------
console.log(Math.sqrt(9)); // 3
————————
Date对象
js提供了一个Date构造函数,通过Date构造函数可以创建不同的日期对象
——》因为日期都是不同的!!!
Date对象用来处理日期和时间
创建一个日期对象
1
2
3
4
5
6
7var now = new Date();//不传参,默认是一个当前时间的对象
var date = new Date("2019-05-20 12:00:00");//(格式固定)指定具体的时间对象,后面的时分秒可以省略
console.log(now);
console.log(date);
//-----------------------------不常用的方式
var date = new Date(2019,4,20,12,0,0);// 可以把每一个项分别传入,但是注意月份从0开始的,0~11
var date = new Date(1558324800000);// 直接传入时间戳也行日期格式化(了解,不用)
Date对象中有默认的方法可以进行日期格式化,但是不好看,一般不用。
1
2
3
4
5
6var now = new Date();
console.log(now);// 默认直接打印now对象,会默认调用toString方法,打印结果是一个字符串
console.log(now.toString());// 转成标准的字符串日期数据输出(默认)
console.log(now.toLocaleString()); // 输出本地格式日期
console.log(now.toLocaleDateString()); // 本地格式日期,只输出日期部分
console.log(now.toLocaleTimeString()); // 本地格式日期,只输出时间部分获取日期的指定部分
之前默认的日期格式化格式很丑,一般不用——》通过获取日期的指定部分,可以自定义格式化日期
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22var now = new Date(); // 当前时间
// 获取年份
var year = now.getFullYear();
// 获取月份——》月份从0开始,范围是0~11,一般会+1
var month = now.getMonth() + 1;
// 获取日——》一个月的几号——》getDay表示获取星期几(从0开始,0表示周日,1表示周一)
var day = now.getDate();
// 获取时
var hours = now.getHours();
// 获取分
var minutes = now.getMinutes();
// 获取秒
var seconds = now.getSeconds();
var str = year + '年' + month + '月' + day + '日, ' + hours + '时' + minutes + '分' + seconds + '秒';
document.write(str);
————————
时间戳
一般日期打印出来,是字符串的形式
时间戳则是日期的数字形式,可以运算
时间戳:表示距离1970年01月01日00时00分00秒起,过去的总毫秒数
作用: 用来计算时间差
代码:
var date = +new Date();
可以统计代码执行的时间
1
2
3
4
5
6
7
8
9
10// ------------------------获取开始的时间
var begin = +new Date();
var sum = 0;
for (var i = 1; i <= 100000000; i++) {
sum += i;
}
console.log(sum);
// -------------------------------获取结束的时间
var end = +new Date();
console.log(end - begin); // 计算时间差,可以得出代码的执行时间毫秒数倒计时(距离下课的时间)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19// -----------------------------------当前时间
var now = new Date();
// ----------------------------------将来需要倒计时的时间
var future = new Date('2019-5-20 12:00:00');
// ------------------------------得到时间差——》转换成秒数(小数后忽略)
var time = parseInt((future - now) / 1000);
// --------------------------------秒数中获取时——》1小时=3600秒
var hours = parseInt(time / 3600);
// --------秒数中获取分——》1分钟=60秒, 对所有的分钟数, 对60求余数即可(超过60的进位到小时中了)
var minutes = parseInt(time / 60) % 60;
// ---------获取秒数,对秒数求60的余数(超过60的部分进位到分钟去了)
var seconds = time % 60;
var str = "距离下课还有: " + hours + '小时' + minutes + '分钟' + seconds + '秒';
document.write(str);
#####