JavaScript学习笔记（七）-- 内置对象(数组方法)Math 是 js 的一个内置对象，提供了一堆的方法帮助我们

内置对象

对象：属性和方法的集合体；我们关注如何使用就可以；
内置：JS语法给我封装好了一些对象，里面提供了很多常用、实用的属性和方法；

Math 和 Date

Math 是 js 的一个内置对象，提供了一堆的方法帮助我们操作数字。
Date 是 js 的一个内置对象，提供了一堆的方法帮助我们操作时间。

Math - 没有什么多余的东西，就是一堆的方法来操作数字

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

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

Math.floor(x) 地板函数：把一个浮点数进行向下取整

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

案例：刷新页面，页面改变颜色；

function getRandom() {
   return Math.floor(Math.random() * (255 + 1));
 }

 function getRandomColor() {
   var r = getRandom();
   var g = getRandom();
   var b = getRandom();
   var color = 'rgb(' + r + ',' + g + ',' + b + ')';
   return color;
 }

document.write(`<div style='background:${getRandomColor()}'></div>`)

Math.round(x) 把一个浮点数进行四舍五入取整

var num = 10.1
   console.log(Math.round(num)) // 10

  var num2 = 10.6
  console.log(Math.round(num2)) // 11

Math.ceil(x) ：天花板函数把一个浮点数进行向上取整，向比数据大的方向取整

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

Math.abs(x) ：求一个数的绝对值正数

	var num = -10
	console.log(Math.abs(num)) // 10
    
    var num = 10
	console.log(Math.abs(num)) // -10

Math.max(x,y...) 求多个数字中的最大值，同理 Math.min(x,y...);

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

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

Date

js 提供的内置构造函数，专门用来获取时间的

语法

var date = new Date(); // 得到的是当前时间的日期对象

new Date() 传递的参数有多种情况

1、传递两个数字，第一个表示年，第二个表示月份

var time = new Date(2019, 00) // 月份从 0 开始计数，0 表示 1月，11 表示 12月
console.log(time) // Tue Jan 01 2019 00:00:00 GMT+0800 (中国标准时间)

2、传递三个数字，前两个不变，第三个表示该月份的第几天，从 1 到 31

var time = new Date(2019, 00, 05) 
console.log(time) // Sat Jan 05 2019 00:00:00 GMT+0800 (中国标准时间)

3、传递四个数字，前三个不变，第四个表示当天的几点，从 0 到 23

var time = new Date(2019, 00, 05, 22) 
console.log(time) // Sat Jan 05 2019 22:00:00 GMT+0800 (中国标准时间)

4、传递五个数字，前四个不变，第五个表示的是该小时的多少分钟，从 0 到 59

var time = new Date(2019, 00, 05, 22, 33) 
console.log(time) // Sat Jan 05 2019 22:33:00 GMT+0800 (中国标准时间)

5、传递六个数字，前五个不变，第六个表示该分钟的多少秒，从 0 到 59

var time = new Date(2019, 00, 05, 22, 33, 55) 
console.log(time) // Sat Jan 05 2019 22:33:55 GMT+0800 (中国标准时间)

6、传入字符串的形式

console.log(new Date('2019')) 
// Tue Jan 01 2019 08:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02')) 
// Fri Feb 01 2019 08:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02-03')) 
// Sun Feb 03 2019 08:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02-03 13:')) 
// Sun Feb 03 2019 13:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02-03 13:13:')) 
// Sun Feb 03 2019 13:13:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02-03 13:13:13')) 
// Sun Feb 03 2019 13:13:13 GMT+0800 (中国标准时间)

获取年月日时分秒

console.log(date.getFullYear());// 年份
	console.log(date.getMonth()); // 月份，从0开始

	// 当前日 为什么不是getDay() 英语：日期date，day某天；
	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 ， 1秒 = 1000毫秒

创建一个指定日期的对象

// 给一个日期格式字符串
	var date = new Date('2019-01-01');

	// 分别传入年月日时分秒。注意传入的月份是从0开始算的
	var date = new Date(2019,0,1,12,33,12);

获取时间差

是指获取两个时间点之间相差的时间
在 js 中是不能用时间直接做减法的
我们需要一些特殊的操作
在编程的世界里面，有一个特殊的时间，是 1970年01月01日00时00分00秒
这个时间我们叫做格林威治时间
所有的编程世界里面，这个时间都是一样的，而且格林威治时间的数字是 0
从格林威治时间开始，每经过1毫秒，数字就会 + 1
所以我们可以获取到任意一个时间节点到格林威治时间的毫秒数
然后在用两个毫秒数相减，就能得到两个时间点之间相差的毫秒数

我们在通过这个毫秒数得到准确的时间

获取从1970年1月1日到现在的总毫秒数，常说的时间戳

var date = new Date();

  console.log(date.valueOf());
  console.log(date.getTime());
  console.log(1*date);

  console.log(Date.now());

计算时间差

例如：我们现在计算一下 2020-03-01 00:00:00 到 2019-03-03 04:55:34 的时间差

I. 先获取两个时间点到 格林威治时间 的毫秒数

  	var time1 = new Date('2020-03-01 00:00:00')
   	var time2 = new Date('2020-03-03 04:55:34')

   	time1 = time1.getTime()
   	time2 = time2.getTime()

   	console.log(time1) // 1546272000000
   	console.log(time2) // 1546462534000

II. 两个时间相减，得到两个时间点之间相差的毫秒数

   var differenceTime = time2 - time1
      console.log(differenceTime) // 190534000

现在我们计算出了两个时间点之间相差的毫秒数

III. 把我们计算的毫秒数换算成时间

- 先计算出有多少天
- 以为一天是 `1000 * 60 * 60 * 24 毫秒`
- 用总的毫秒数除以一天的毫秒数，就能得到多少天了

	var time1 = new Date('2020-03-01 00:00:00')
      var time2 = new Date('2020-03-03 04:55:34')
  	time1 = time1.getTime()
  	time2 = time2.getTime()
  	var differenceTime = time2 - time1

		// 计算整的天数
  	var day = differenceTime / (1000 * 60 * 60 * 24) // 2.20525462962963
  	day = Math.ceil(day) // 2

因为得到的是有小数的天数，我们向下取整，得到有多少个整的天数

使用 differenceTime 减去两天所包含的毫秒数，剩下的就是不够一天的毫秒数
用不够一天的毫秒数计算出有多少个小时
因为一个小时是 1000 * 60 * 60 毫秒
用不够一天的毫秒数除以一小时的毫秒数，就能得到多少小时了

var time1 = new Date('2020-03-01 00:00:00')
var time2 = new Date('2020-03-03 04:55:34')
time1 = time1.getTime()
time2 = time2.getTime()
var differenceTime = time2 - time1

// 计算整的天数
var day = differenceTime / (1000 * 60 * 60 * 24) // 2.20525462962963
day = Math.floor(day) // 2

// 计算整的小时数
var afterHours = differenceTime - (1000 * 60 * 60 * 24 * 2)
var hours = afterHours / (1000 * 60 * 60)
hours = Math.floor(hours) // 4

和刚才一样的道理，我们需要向下取整

同理，使用 afterHours - 4个小时包含的毫秒数，剩下的就是不够一个小时的毫秒数
用不够一个小时的毫秒数计算出有多少分钟
因为一分钟是 1000 * 60 毫秒
用不够一个小时的毫秒数除以一分钟的毫秒数就能得到多少分钟了

var time1 = new Date('2020-03-01 00:00:00')
var time2 = new Date('2020-03-03 04:55:34')
time1 = time1.getTime()
time2 = time2.getTime()
var differenceTime = time2 - time1

// 计算整的天数
var day = differenceTime / (1000 * 60 * 60 * 24) // 2.20525462962963
day = Math.floor(day) // 2

// 计算整的小时数
var afterHours = differenceTime - (1000 * 60 * 60 * 24 * 2)
var hours = afterHours / (1000 * 60 * 60)
hours = Math.floor(hours) // 4

// 计算整分钟数
var afterMinutes = afterHours - (1000 * 60 * 60 * 4)
var minutes = afterMinutes / (1000 * 60)
minutes = Math.floor(minutes) // 55

和之前一样的道理计算出秒

var time1 = new Date('2020-03-01  00:00:00')
var time2 = new Date('2019-03-03 04:55:34')
time1 = time1.getTime()
time2 = time2.getTime()
var differenceTime = time2 - time1

// 计算整的天数
var day = differenceTime / (1000 * 60 * 60 * 24) // 2.20525462962963
day = Math.floor(day) // 2

// 计算整的小时数
var afterHours = differenceTime - (1000 * 60 * 60 * 24 * 2)
var hours = afterHours / (1000 * 60 * 60)
hours = Math.floor(hours) // 4

// 计算整分钟数
var afterMinutes = afterHours - (1000 * 60 * 60 * 4)
var minutes = afterMinutes / (1000 * 60)
minutes = Math.floor(minutes) // 55

// 计算整秒数
var afterSeconds = afterMinutes - (1000 * 60 * 55)
var seconds = afterSeconds / 1000
seconds = Math.floor(seconds) // 34

最后，同理减去整秒的数，剩下的就是毫秒数

var time1 = new Date('2020-03-01 00:00:00')
var time2 = new Date('2020-03-03 04:55:34')
time1 = time1.getTime()
time2 = time2.getTime()
var differenceTime = time2 - time1

// 计算整的天数
var day = differenceTime / (1000 * 60 * 60 * 24) // 2.20525462962963
day = Math.floor(day) // 2

// 计算整的小时数
var afterHours = differenceTime - (1000 * 60 * 60 * 24 * 2)
var hours = afterHours / (1000 * 60 * 60)
hours = Math.floor(hours) // 4

// 计算整分钟数
var afterMinutes = afterHours - (1000 * 60 * 60 * 4)
var minutes = afterMinutes / (1000 * 60)
minutes = Math.floor(minutes) // 55

// 计算整秒数
var afterSeconds = afterMinutes - (1000 * 60 * 55)
var seconds = afterSeconds / 1000
seconds = Math.floor(seconds) // 34

// 计算毫秒数
var milliSeconds = afterSeconds - (1000 * 34) // 0

输出结果

document.write('2020-03-01 00:00:00 和 2020-03-03 04:55:34 之间相差')
document.write(day + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒' + milliSeconds + '毫秒')

Array

对元素操作

push 作用：从数组后面推入一个元素或多个元素

		var arr = [1, 2, 3]
  		// 使用 push 方法追加一个元素在末尾
  		arr.push(4)
  		console.log(arr) // [1, 2, 3, 4]

pop 删除数组最后一个元素

 // 数组的pop方法用于将数组的最后一个元素移除
  	var arr = [1, 2, 3]
   // 使用 pop 方法删除末尾的一个元素
  	arr.pop()
  	console.log(arr) // [1, 2]

unshift 从数组前面添加一个或多个元素

   var arr = [1,2,3];
 	  // 使用 unshift 方法想数组的最前面添加元素
 	  arr.unshift(4,5,6); // 4,5,6,1,2,3

shift 用于将数组的第一个元素移除

	var arr = [1, 2, 3]
    // 使用 shift 方法删除数组最前面的一个元素
		arr.shift()
		console.log(arr) // [2, 3]

splice：可进行数组任何位置的增删改

// 数组的splice方法用于从数组的指定位置移除、添加、替换元素
   var arr = ['a','b','c','d','e'];

   // 对原数组操作
   // 作用：索引从零开始,从索引3开始移除，总共移除1个元素 ，
   // 返回:被移除元素的数组
   arr.splice(3,1); 
   console.log(arr); // "a" "b" "c" "e"

   // 在c的后面添加7和8两个元素
   // 作用：从索引3开始添加，移除0个元素，把7，8加入；
   // 返回：一个空数组
   // 操作原数组；
   arr.splice(3,0,7,8); // "a", "b", "c", 7, 8, "d", "e"

   // 作用：从索引1开始替换，总共替换1个，用0替换 ；
   // 返回：被替换元素的数组
   arr.splice(1,1,0);
   console.log(arr); //  "a", 0, "c", "d", "e"

与字符串互转

join 用于将数组中的多元素以指定分隔符连接成一个字符串

var arr = ['刘备','关羽','张飞'];
var str = arr.join('|'); 
  console.log(str);  //  刘备|关羽|张飞

split 字符串的方法：转数字，后面为分隔的字符

  // 这个方法用于将一个字符串以指定的符号分割成数组
   var str = '刘备|关羽|张飞';
   var arr = str.split('|');
   console.log(arr);

查找元素

indexOf：根据元素查找索引，如果这个元素在数组中，返回索引，否则返回-1，找元素在不在数组内部


	  /* indexOf  【!!!】
	 	参数：被查找的元素
	 	返回：下标（没有找到返回-1） 
     */

	// 场景：查找数组中有没有我们需要的数据；
	var arr = [1, 10, 20];
	var index = arr.indexOf("a");
	console.log(index);  // -1

findIndex方法用于查找满足条件的第一个元素的索引，如果没有，则返回-1

	/* findIndex
 	   语法：
 	 		参数：函数（被传入的函数，回调函数）
 	    	格式要求：
       			item  回调函数，代表每一次遍历的数据
 	       		return 判断条件(自己写)
 			返回：满足条件的第一个元素的下标，若没有，返回-1；
             */
     var arr = [1, 10, 20];
 	 var index = arr.findIndex(function(item) {
 	  return item === 20;
 	 	});
 	console.log(index);

遍历数组

for循环：JS基础语法；【!!!】

forEach：遍历数组；

  // 如何学习？关注参数？返回是什么？
 /* forEach:  
   作用：遍历数组
   参数：函数（函数函数）格式要求：
   函数函数参数：item,index,arr
   item：每个数据
   index：下标；
   arr：当前遍历的数组；
*/
var max = arr[1];
 arr.forEach(function(item, index, arr) {
   //console.log(item, index, arr);
   if (item > max) {
    max = item;
 }
});
console.log(max);

filter 筛选出数组中满足条件的数组，返回是一个新的数组；

	  /* filter  
    作用：对当前数组一定的过滤；
       参数：函数（函数函数）格式要求：
       函数函数参数：item,index,arr
       item：每个数据
       index：下标；
       arr：当前遍历的数组；
       return 过滤条件; 返回是true，把当前满足条件的item 放入新的数组中
       返回:返回过滤后的新数组;
    */
var arr_1 = arr.filter(function(item, index, arr) {
 // 过滤条件; 返回是true，把当前满足条件的item 放入新的数组中
 return item == 10;
});
console.log(arr, arr_1);

拼接与截取

concat 把多个数组进行拼接拼接数组，不改变原数组，创建新数组返回

  /* concat 
 作用：数组的拼接
   参数：要拼接的数据（单个数据、多个数据、单个数组，多个数组）
 返回：拼接后的 新 数组； */

 var arr1 = [1, 2, 3];
 var arr2 = [4, 5, 6];
 var arr3 = [7, 8, 9];
 var res = arr1.concat(arr2, arr3);
 console.log(arr1, res);

slice 截取数组：不对原数组操作，返回的是截取出来新的数组；


/* slice:
 作用：截取数组
 参数：
 返回：被截取的新数组；*/
var arr = ['a', 'b', 'c', 'd', 'e'];
// 参数:2个参数。第一个参数从哪个下标开始（包括），截取到哪个下标结束(不包括),
 var res = arr.slice(1, 4);
 console.log(arr, res);

  // 参数：1个参数，从哪个下标开始，一直到结尾都要截取
    var arr_1 = arr.slice(1);
    console.log(arr_1);

// 参数：没有参数，全部截取，复制数组；
     var res = arr.slice();

复制

   
   	 // 需求：复制过来的新数据和原来的数据没有任何关系；
 	var arr = ["a", "b", "c", "d"];

 	// var arr_1 = arr;
 	// arr_1[0] = "abc";
   
  -------------------------for----------------------------------
   var arr_1 = [];
 	for (var i = 0; i < arr.length; i++) {
    	 arr_1[i] = arr[i]
  		}
    	arr_1[0] = 10
    	console.log(arr_1, arr);


----------------------------forEach-------------------------------
// arr：可选参数
		var new_arr = [];
		arr.forEach(function(item, index) {
 	 	new_arr.push(item);
		});
		new_arr[0] = "abc";
  	console.log(new_arr, arr);



--------------------------filter----------------------------------
// 作用：满足过滤条件的元素，组成个新数组返回；
   var new_arr = arr.filter(function(item, index, arr) {
  // 过滤条件？
    return arr.indexOf(item) != -1;
 });
// arr.indexOf(item) != -1条件：过滤条件结果为true , 把当前的item组成，到新的数组里；
		new_arr[0] = "abc";
		console.log(new_arr, arr);



----------------------拼接和截取--------------------------------------
// 参数：不传入
// 返回：新数组（和arr一样）
var new_arr = arr.concat();
new_arr[0] = "---------------------";
console.log(new_arr, arr);

// 参数：不传入
// 返回：全部截取，新数组（和arr一样）
var new_arr = arr.slice();
new_arr[0] = "-----------++----------";
console.log(new_arr, arr);



----------------------------与字符串的互转--------------------------------
// var str = arr.join("-");
// // console.log(str);
// var new_arr = str.split("-"); // 新数组
// new_arr[0] = "-----------++----------";
// console.log(new_arr, arr);

Object 复习

语法

   var obj = {}; // 字面写的这些数据，知道它的数据类型；
   var obj_1 = new Object();

   // 对象.属性 = 值;
   obj.name = '狗蛋';
   // 键值对
   obj['age'] = 10;

   obj.name
   obj['age']

   // 
   for(var name in obj){
 	console.log(name);
 	// 只能通过键的方式获取值
 	console.log(obj[name]);
   }

复制

  // 需求：对象如何复制？
  var obj = {
    a: 1,
    b: "abc"
  };

  // var new_obj = obj;

  // 遍历对象
  var new_obj = {};
  for (var key in obj) {
    new_obj[key] = obj[key]
  }

  // 浅拷贝,深拷贝
  var arr_1 = [];
  for (var key = 0; key < arr.length; key++) {
   arr_1[key] = arr[key]
  }

String

不可变
- 特性：不可变性；
- 旧的字符串赋值在一个变量上，给变量重新赋值新的字符串（完全新的字符串，或者拼接后字符串），旧的字符串不是被覆盖；在内存的游离状态；
- 所以尽量避免大量使用字符串的拼接；这个算前端性能优化的一点；
- 提升前端性能：

查找

indexOf 字符串中是否存在指定字符存在就返回找到的下标，没有就-1；
```
// 这个方法用于查找某个字符串是否包含于另一个字符串
var str = '我爱中华人民共和国';
console.log(str.indexOf('中华'));
```
- lastIndexOf 用法和indexOf一样，只不过是从后面开始找;

charAt

 	// 这个方法用于获取字符串中位于指定位置的字符
 	var str = '我爱中华人民共和国';
 	console.log(str.charAt(2)); //中

charCodeAt

 // 这个方法用于获取字符串中位于指定位置的字符的ASCII码
 var str = 'abcdef'
 console.log(str.charCodeAt(0));

转为数组

split 字符串转数组，后面的分隔的字符

   // 这个方法用于将一个字符串以指定的符号分割成数组
   var str = '刘备|关羽|张飞';
   var arr = str.split('|');
   console.log(arr);

拼接与截取

+：隐式转化；
concat 拼接

   // 这个方法用于连接多个字符串；
   var res = "abc".concat('def','ghi');
   console.log(res);

substring 截取字符串，不操作原字符串；返回截取出来的字符串；

// 这个方法用于获取字符串中的部分字符
  var str = '我爱中华人民共和国';

  // 从索引2开始，到索引4结束，得到之间的字符，不包含索引4的字符
 var res = str.substring(2,4);
 console.log(res);

slice

// 这个方法用于获取字符串中的部分字符
  	var str = '我爱中华人民共和国';
  	var res = str.slice(2,4);// 从索引2开始，到索引4结束，得到之间的字符，不包含索引4的字符
  	console.log(res);

  	// 看起来和substring 没有啥区别，
  	// 但是 slice()可以设置参数为负数，slice()方法在遇到负的参数的时候，会		将这个负值与字符串的长度相加。
  		console.log(str.slice(-6,7));
  	    console.log(str.slice(2,-5));
  		console.log(str.slice(-9,-7));

substr

```javascript
		// 这个方法用于获取字符串中的部分字符
		var str = '我爱中华人民共和国';
		var res = str.substr(2,2);// 索引2开始，总共获取2个字符，第二个参数为个数




**如何学习一个方法（对象）**

- 1.方法的功能是什么
- 2.方法的参数有哪些
- 3.方法的返回值是什么