js基础day05笔记

《部分案例代码下载》

学习目标(全天模式)

  • 能够使用对象的属性和方法
  • 能够for…in遍历对象的所有属性
  • 能够说出new关键字的执行过程
  • 能够说出简单类型和复杂类型的数据作为函数参数的差异
  • 能够说出Math对象的至少3个方法
  • 能够说出Date对象的至少3个方法
    。。。。。。

理解上课的知识点……

对象的取值与赋值的语法

点语法

对象的取值:

  • 对象名.属性名

    1
    2
    3
    console.log(person.name);
    console.log(person.height);
    ......

    注意点:

    • 如果属性名存在,获取对应的值
    • 如果属性名不存在,返回undefined
  • 对象名.方法名——》对象名.方法名()

    方法一般不会打印,是用来调用的

    1
    2
    console.log(person.eat);// 打印的是方法这个函数
    person.eat();// 表示调用person对象中的eat方法这个函数

对象的赋值:

  • 对象名.属性名 = 值
    • 如果属性名存在,被覆盖
    • 如果属性名不存在,添加一个新属性

中括号语法

中括号语法也叫做关联数组语法,说白了就是把对象当做是数组看待

  • 数组取值是:arr[下标],其实下标就相当于键值对中的键

    数组

  • 类比如数组的取值,对象也可以写:obj[键]

    对象

中括号语法:

  • 用法灵活,支持字符串或者变量
  • 取值:对象名[“属性名”]
  • 赋值:对象名[“属性名”] = ‘新值’

点语法与中括号语法的区别

两种方法都能使用,但是只有中括号语法中支持变量

  • 点语法:对象名.属性名 ——》简洁——》只能写属性名,不支持变量(不管变量)
  • 中括号语法:对象名[‘属性名’] ——》灵活——》只能写字符串或者变量
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 下列分别访问的是对象的什么属性
// 1、
obj.name;// 找obj的name属性

// 2、
var str = 'age';
obj.str;// 找obj的str属性


// 3、
obj['height'];// 找obj的height属性


// 4、
var str = 'weight';
obj[str];// 找obj的weight属性

中括号语法的使用场景

如果访问的属性值是一个变量,必须使用中括号语法

需求:

1
// 给一个空对象中添加数据,变成 { n1: 1, n2: 2, n3: 3, n4: 4 ...... n10: 10 }
————————

遍历对象

一个一个的访问对象的全部属性

语法:

每一个键值对都会执行一遍for…in语句——》其中是变量需要使用中括号语法

1
2
3
4
5
6
7
// --------------------key——》键——》是一个变量可以变化
// --------------------obj——》需要遍历的对象
// --------------------obg[key]——》对应的值
for(var key in obj) {
console.log(key);
console.log(obj[key]);
}
ヾ(๑╹◡╹)ノ” 遍历对象的小练习
1
2
3
4
5
6
7
8
9
10
11
12
13
// 需求: 将所有 obj2 的属性, 添加到 obj 中去
var obj = {
name: '张三',
age: 30
};

var obj2 = {
money: 1000000,
car: '玛莎拉蒂'
};

// 1、 可以一个一个的添加,但是通用性不好(属性变了之后代码也需要变)
// 2、可以遍历数组动态的把所有的数据都添加上

批量创建对象

在实际开发中,可能需要创建多个用户对象,此时就需要批量创建对象了

使用工厂函数创建对象

需求: 需要同时创建多个对象出来

  • 一个一个字面量形式的创建——》可以,但是不停的做重复的代码
  • 可以把重复创建对象的代码用函数封装起来——》这个用来创建对象的函数,就叫做工厂函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function createPerson(name, age, desc) {
var obj = {
name: name,
age: age,
desc: desc,
say: function() {
// 在对象的方法中, this, 指向当前的对象
console.log('大家好, 我叫' + this.name);
}
};
return obj;
}

var xm = createPerson('小明', 18, '长得帅');
console.log(xm);

var xh = createPerson('小红', 30, '长得美');
console.log(xh);

注意点: 在对象方法中,this就相当于当前这个对象。

优点:可以同时创建多个对象

缺点:工厂函数创建出来的对象,是Object类型的,没有更具体的类型!!

有时候咱们需要构建人这个对象,想要其类型就是person,此时使用工厂函数就不行了

————————

构造函数的介绍

每一个对象自身存在一个类型,表示自己是什么类型的对象。

作为学生来说,对象的类型应该为Student

作为老师来说,对象的类型应该为Teacher

都是人,不过属于不同类型的人

……

但是如果使用工厂函数来说,不管创建出来是什么对象,类型始终是Object,因为底层使用的是new Object这个构造函数。用什么构造函数创建的对象,对象类型就是什么

所以如果希望创建一个学生对象,他的类型为Student,此时可以使用自定义一个Student构造函数即可!!

构造函数的特点:

  • 就是一个函数
  • 函数名首字母大写
  • js内部,内置了一些构造函数,比如:Object、Array…
  • 构造函数可以自定义

自定义构造函数的使用步骤:

  1. 声明一个自定义的构造函数,特点是首字母大写
  2. 结合new语法一起使用,创建出来的对象,就有自己的类型了!!

new做的四件事情

先创建出一个student类型的对象~

new会做四个事情

  1. new会创建一个新的空对象,并且这个对象是有类型的

  2. 让构造函数中的this指向当前创建的对象

    想给当前新对象加属性,直接this.name即可

  3. 执行构造函数中的代码

    在这一步可以给新对象加属性和方法

  4. 会返回这个新对象

注意点

  • new的作用:创建了一个对象

  • 构造函数的作用:给创建对象添加了属性和方法(实例化对象)

    没有构造函数体,只是一个空对象

代码:

1
2
3
4
5
6
7
8
// ----------------------构造函数
function Person(name, age) {
this.name = name;
this.age = age;
this.sayHi = function() {
console.log('大家好')
}
}
ヾ(๑╹◡╹)ノ” 构造函数的小练习-批量创建狗

创建对象的小结

  • 创建单个对象

    • 字面量: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
2
3
4
5
var num = 10;
var num2 = num;
num2 = 20;
console.log(num);
console.log(num2);
(◕ᴗ◕✿)画图说明引用类型内存分布

引用类型变量中存的是内存地址

1
2
3
4
5
6
7
8
var obj = {
name:'ff',
age:18
}
var obj2 = obj;
obj2.name = 'tg';
console.log(obj2.name);
console.log(obj.name);

值类型与引用类型的赋值特征

  • 值类型变量中存的是值本身,所以赋值给其他变量时,赋值的就是值本身

    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
2
3
4
5
6
7
8
var num = 10;
function fn(a) {
// 形参,就相当于局部变量,相当于var a = 10
a = 99;
console.log(a);
}
fn(num);
console.log(num);
  • 引用类型:变量存的是内存地址,传参时传递的是内存地址
(◕ᴗ◕✿)画图说明引用类型参数传递
1
2
3
4
5
6
7
8
9
10
var obj = {
name:"zs",
age:18
}
function fn(a) {
a.name = "ls";
console.log(a.name);
}
fn(obj);
console.log(obj.name);
————————

值类型与引用类型练习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//面试题1 : 
function fn(a, b) {
// 相当于
// var a = 10;
// var b = 20;
// 函数的参数 其实相当于函数内部的局部变量
a = a + 1;
b = b + 1;
console.log(a);
console.log(b);
}

var x = 10;
var y = 20;
fn(x, y);
console.log(x);
console.log(y);
(◕ᴗ◕✿)画图说明第二种情况
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//面试题2 : 
var p = {
name:"zs",
age:18
}
function fn(person) {
person.name = 'ls';
// person = {
// name:'qq'
// }
console.log(person.name);
}
fn(p);
console.log(p.name);

内置对象

JS内置对象就是指Javascript自带的一些对象,供开发者使用,这些对象提供了一些常用的的功能。

常见的内置对象有Math、String、Array、Date等

Math对象

Math对象中封装很多与数学相关的属性和方法。

  • 圆周率

    Math.PI

  • 最大值/最小值

    1
    2
    Math.max(1,2,3,4,5,6);
    Math.min(1,2,3,4,5,6);
  • 取整

    1
    2
    3
    4
    5
    6
    7
    8
    Math.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
    7
    var 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
    4
    Math.abs();//求绝对值
    //-----------------------------
    console.log(Math.abs(1)); // 1
    console.log(Math.abs(-1)); // 1
  • 次幂(次方)

    1
    2
    3
    4
    5
    Math.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
    3
    Math.sqrt(num);//对num开平方
    //-----------------------------
    console.log(Math.sqrt(9)); // 3
————————

Date对象

js提供了一个Date构造函数,通过Date构造函数可以创建不同的日期对象

——》因为日期都是不同的!!!

Date对象用来处理日期和时间

  • 创建一个日期对象

    1
    2
    3
    4
    5
    6
    7
    var 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
    6
    var 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
    22
    var 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);

#####