js基础第5天

一、对象语法补充

上面的方式是可以创建对象的，但是只能一个一个的创建，如果我们要创建大量的对象，那么上面的两个方式也就不推荐了。

当我们要大量创建的时候，我们想要创建对象，更好的方式是：自定义构造函数

1.1、自定义构造函数

语法格式

function 要描述的对象的种类(参数){
  this.属性1 = 参数1;
  this.属性2 = 参数2;
  ...
  this.方法名 = function(){}
  ...
}

例如我们要给’学生’对象写构造函数

// 我们习惯将描述对象种类的名词首字母大写
function Student(name,age,gender){
  // 属性名不是一定要和形参一样，但是从语义的角度，最好是一样的
  this.name = name;
  this.age = age;
  this.gender = gender;
  // 学生有一个自我介绍的方法
  this.sayHello = function(){
    console.log('您好，我叫'+this.name+',今年'+this.age+'岁了，是个'+this.gender+'孩子');
  }
}

此时当我们要创建一个学生的时候，只要new操作一下

var s1 = new Student('张三',18,'男');
console.log(s1);
// 让一个学生对象做自我介绍
s1.sayHello();

被构造函数new出来的对象，我们称为该对象的实例对象——上面的代码来说，s1是Student构造函数的实例对象

1.2、this关键字

在上面的代码中，我们发现一个东西叫this，这是JavaScript说法中的一个关键字，这个关键字的作用是在函数中自动指代一个对象。

也就是说，this是一个对象

这个对象到底是谁呢？不用死记硬背，每次想看看this是谁的时候，只要输出一下

function Student(name,age,gender){
  this.name = name;
  this.age = age;
  this.gender = gender;
  console.log(this);
}

Student是一个函数，我们需要调用才会执行，而它又是一个构造函数，所以我们调用它的方式是new

var s1 = new Student('狗蛋',12,'男');

当函数执行的时候，输出

{
  name : '狗蛋',
  age : 12,
  gender : '男'
}

也就是说函数里面的this是被new出来的实例对象

结论：构造函数里面的this是被new出来的实例对象

1.3、new关键字

我们在使用构造函数创建对象的时候，还用到了一个new关键字

这个关键字的意思是新建，用法就是配合构造函数使用，构造函数在new的时候其实有这么一个过程。

1.调用构造函数

2.创建一个新的对象并用this指代这个对象

3.执行构造函数里面的代码，给this指代的对象添加属性和方法

4.返回this所指代的对象

new 的过程还是比较复杂的，平时一般不关注，不需要记，知道即可

1.4、键的方式访问对象的属性和有方法

语法：对象[属性名]

var obj = {};
obj['name'] = '张三';
obj['sayName'] = function(){
  console.log('你好，我叫' + obj['name']);
}

1.5、遍历对象(掌握)

语法：for(var key in obj){ }

key 就是obj这个对象中的每个键，obj[key]就是对象中的每个值。

var obj = {
  name : '张三',
  age : 18,
  gender : '男'
};
for(var key in obj){
  console.log(key);
  console.log(obj[key]);
}

小结

1.对象不仅仅是一种语法，更是一种思想，一种方便解决问题的思想

2.使用对象来表示一个可以帮我做事的东西，我们只要调用对象的方法和属性，就能实现效果

3.对象语法使用属性描述事物的特征，使用方法描述事物的行为

二、引用类型和值类型的区别

引用类（复杂类型）型把自己存储在堆空间

值类型（简单类型）把数据存储在栈空间

赋值的过程发生在栈空间

如果是我们把一个引用类型的变量赋值给另一个变量其实两个变量都是指向同一个对象

如果是引用类型传参，形参被修改了，实参也会跟着修改

三、内置对象

js里面的对象分成三大类

1.内置对象

new Array() new Date()

2.自定义对象

{name: 123} new Object();

3.宿主对象

上次学习的就是自定义对象，可以做一些很简单的功能，方便自己使用。

内置对象

所谓内置对象，就是JavaScript自带的一些功能对象，里面提供了很多常用、实用的属性和方法，我们需要做的就是学习这些属性和方法怎么使用，在需要用的时候直接用就行

3.1、Math

数学 - 用于进行一些和数学相关的运算(计算)的

Math.random()

这个方法的作用是生成一个 [0,1) 之间的随机浮点数

var num = Math.random();
console.log(num );// 每次执行等到的数字都一样

Math.floor(x)

这个方法的作用是把一个浮点数进行向下取整

console.log(Math.floor(1.1));  // 1
console.log(Math.floor(2.9));  // 2
console.log(Math.floor(-3.1)); // -4
console.log(Math.floor(-3.9)); // -4

向下取整就是从这个数字开始，朝数轴的左边找到一个离它最近的整数

Math.round(x)

这个方法的作用是把一个浮点数进行四舍五入取整

console.log(Math.floor(2.1));  // 2
console.log(Math.floor(2.9));  // 3
console.log(Math.floor(-3.1)); // -3
console.log(Math.floor(-3.9)); // -4

Math.ceil(x)

这个方法的作用是把一个浮点数进行向上取整

console.log(Math.floor(2.1));  // 3
console.log(Math.floor(3.9));  // 4
console.log(Math.floor(-3.1)); // -3
console.log(Math.floor(-3.9)); // -3

向上取整就是从这个数字开始，朝数轴的右边找到一个离它最近的整数

Math.abs(x)

这个方法的作用是求一个数的绝对值

console.log(Math.abs(3));  // 3
console.log(Math.abs(-3)); // 3

Math.max(x,y…)

这个方法的作用是求多个数字中的最大值

console.log(Math.max(10,20));  // 20
console.log(Math.max(8,4,5,7,3)); // 8

这个方法的参数个数是不限定的，想写几个就写几个

Math.min(x,y…);

这个方法的作用是求多个数字中的最小值

console.log(Math.max(10,20));  // 10
console.log(Math.max(8,4,5,7,3)); // 3

这个方法的参数个数是不限定的，想写几个就写几个

可以试着练习：

求[0,10]之间的随机整数

console.log(parseInt(Math.random()*(10+1)))

3.2、Array对象

1、push()从数组最后增加成员

var aList = [1,2,3,4];
var res = aList.push(5); 
console.log(res);     //5             返回添加元素后，数组的长度
console.log(aList);   //[1,2,3,4,5]   原数组。改变

2、pop()从数组最后删除成员

var aList = [1,2,3,4];
var res = aList.pop(); 
console.log(res);	    //4           返回被删除的元素
console.log(aList);   //[1,2,3]     原数组。改变

3、unshift()从数组前面增加成员

var aList = [1,2,3,4];
var res = aList.unshift(5); 
console.log(res);     //5             返回添加元素后，数组的长度
console.log(aList);   //[5,1,2,3,4]   原数组。改变

4、shift()从数组前面删除成员

var aList = [1,2,3,4];
var res = aList.shift(); 
console.log(res);	    //1            返回删除的元素
console.log(aList);   //[2,3,4]      原数组。改变

5、reverse() 将数组反转

var aList = [1,2,3,4];
var res = aList.reverse(); 
console.log(res);	    //[4,3,2,1]     返回翻转后的数组
console.log(aList);   //[4,3,2,1]     原数组。改变

6、splice(index,多少,项1,项2…) : 返回删除的项目
删除从 index 处开始的零个或多个元素,
并且用参数列表中声明的一个或多个项,来替换那些被删除的元素(如果没有,则不替换)

var aList = [1, 2, 3, 4];
var res = aList.splice(2, 1,'a','b');
console.log(res);       //[3]               返回切割掉的元素
console.log(aList);     //[1,2,'a','b',4]   原数组。改变

以下的方法不会改变原数组

7、slice(start,end): 返回切割项目
选取从数组 start位置 到数组的 end位置(不包含end位置) 所有元素,
如果没有end,选取从 start 到数组结尾的所有元素

var aList = [1,2,3,4];
var res = aList.slice(0,2);
console.log(res);    //[1,2]            返回切割掉的元素
console.log(aList);  //[1,2,3,4]        原数组。不变

8、indexOf() 返回数组中元素第一次出现的索引值

var aList = [3,2,"a",1,2,3,"a"];
var res = aList.indexOf("a"); 
console.log(res);	    //2 

var res2 = aList.indexOf("a",3); 
console.log(res2)

9、join() 将数组成员通过一个分隔符合并成字符串

var aList = [1,2,3,4];
var res = aList.join('-');
console.log(res);     //1-2-3-4     返回合并后的字符串
console.log(aList);   //[1,2,3,4]   原数组。不变

forEach 遍历数据的方法

作用： 遍历数组
arr.forEach(function(item,index){
  item 是数组里面的每个元素
  index 是数组的每个索引
})

filter 数组筛选

数组.filter

作用： 把数组中满足条件的元素，放到一个新的数组里面
var result = arr.filter(function(item,index){
  return 条件
});

3.3、String内置对象

1、字符串合并操作：“ + ”

var num1 = 123;
var str2 = 'def';
console.log(str1+str2) // 123def

2、split() 把一个字符串按某种方式分隔成字符串组成的数组

var str2 = 'a-b-c';
var arr2 = str4.split('-');
console.log(arr4) // ['a','b','c']

3、charAt() 获取字符串中的某一个字符

var str3 = 'hello word'
var res = str3.charAt(2)
console.log(res)//l

4、indexOf() 查找字符串是否含有某字符**(和数组一样的使用方式)

5、substring() 截取字符串 用法： substring(start,end)（不包括end）截取从star开始,到end之间的字符串

​ 如果只传一个值,表示从这个位置开始,一致截取到字符串末端

注意:  substring是以两个参数中较小一个作为起始位置，较大的参数作为结束位置 
var test = 'hello world';
alert(test.substring(7,4)); //o w

注意: 如果substring里面碰到负数,则干脆将负参数都直接转换为0
var test = 'hello world'
alert(test.substring(-3));     //hello world
alert(test.slice(3,-4));       //lo w

6、substr(index,n) : 从index索引位置开始截取,截取n个字符
​ 如果只传一个值,表示从这个位置开始,一致截取到字符串末端

7、toUpperCase() 字符串转大写
8、toLowerCase() 字符串转小写
9、replace(“要被替换的字符”,替换的字符) 该方法会返回一个新字符串，原字符串不改变

var str9 = 'hello word'
var res = str.replace('word','hhhhhhhh')
console.log(res)// hello hhhhhhhh

…

3.4、Date内置对象

可以获取 时间+日期

var date = new Date(); // 当前的系统的时间和日期
console.log(date.getFullYear());// 年份
console.log(date.getMonth()); // 月份，从0开始
console.log(date.getDate()); // 当前天数
console.log(date.getHours()); // 小时，0-23
console.log(date.getMinutes()); // 分钟 ， 0-59
console.log(date.getSeconds()); // 秒数 ， 0-59
console.log(date.getMilliseconds()); //毫秒 0-999        1000毫秒=1秒


返回距 1970 年 1 月 1 日之间的毫秒数
date.getTime()
或者
+date  也可以获取距 1970 年 1 月 1 日之间的毫秒数

也可以生成一个指定的日期

1.传入不同的年月日时分秒
var d1 = new Date(2020,0,1,8,30,59); // 2020年1月1日 8:30:59

2.传入一个指定的字符串
var d2 = new Date('2020-01-01');

3.传入一个 大的数字 -- 从1970年1月1日开始到某个日期的总共的毫秒数
var d3 = new Date(1378594320999); 

四、学会自己学习

即为： 面向百度编程

在百度里面直接查，看看人家的说明，有些是正规的文档网站，有些是人家自己写的博客，都是可以参考的

推荐的网站 MDN

4.1、如何学习一个方法？

1. 方法的功能
2. 参数的意义和类型
3. 返回值意义和类型
4. demo进行测试

下次再见!