JavaScript-第六天（B站黑马程序员）

一、Math对象

Math 是一个内置对象，不是一个构造器。
Math 的所有属性与方法都是静态的。不需要用new来调用，而是直接使用里面的属性和方法。

1、圆周率

// 1.圆周率
Math.PI;

2、最大值

// 2.最大值
console.log(Math.max(1, 2, 3, 4, 5));       // return 5
console.log(Math.max(1, 2, 3, 4, 'apple')); // return NaN
console.log(Math.max());                    // return -Infinity

3、绝对值

// 3. 绝对值
console.log(Math.abs(1));       // return 1
console.log(Math.abs(-1));      // return 1
console.log(Math.abs('-1'));    // return 1,隐式转换
console.log(Math.abs('apple')); // return NaN

4、取整

a. 向下取整

//    a.向下取整
console.log(Math.floor(1.1)); // return 1

b. 向上取整

//    b.向上取整
console.log(Math.ceil(1.1)); // return 2

c. 四舍五入

//    c.四舍五入
console.log(Math.round(1.4)); // return 1
console.log(Math.round(1.5)); // return 2
console.log(Math.round(-1.1)); // return -1
console.log(Math.round(-1.5)); // return -1，仅有'.5'往大了取整
console.log(Math.round(-1.6)); // return -2

5、随机数

// 5. 随机数
console.log(Math.random()); // 返回一个0~1的随机浮点数,方法里不跟参数
// 得到两个整数之间的随机整数，并包含这两个数(max - min + 1)
function getRandomArbitrary(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}
console.log(getRandomArbitrary(1, 10));

应用：随机点名

// 应用：随机点名
var names = ['apple', 'banana', 'peach', 'watermalon', 'orange'];
console.log(names[getRandomArbitrary(0, 4)]); // 随机生成索引号

二、Date对象

1、创建Date对象

Date()日期对象是一个构造函数，必须使用new来调用创建日期对象。创建时可以带参数，也可以不带。

// 1. 如果没有参数，返回当前系统的当前时间
var date1 = new Date();
console.log(date1);

// 2. 参数的常用写法：数字型 2019，10，01  字符串型 '2019-10-1 8：8：8'
var date2 = new Date(2019, 10, 1);
console.log(date2); // return Nov 11月，因为date月份的表示是0-11，在这里'10'表示11月
var date3 = new Date('2019-10-1 8:8:8');
console.log(date3);

2、格式化年月日

// 格式化日期 年月日
console.log(date.getFullYear()); // 年份
console.log(date.getMonth() + 1); // 月份表示为0~11，要记得+1
console.log(date.getDate()); //几号
console.log(date.getDay()); // 周日为 0，周一到周六 1~6

3、格式化时分秒

// 格式化日期 时分秒
var date = new Date();
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());

4、获得距今总毫秒数

获得Date总的毫秒数：当前时间距离1970年1月1日的毫秒数。

a. valueOf() 或者 getTime()

// 1. valueOf() 或者 getTime()
var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());

b. +new Date()

// 2. 简单写法,最常用写法
var date1 = +new Date(); // +new Date()返回的就是总毫秒数
console.log(date1);

c. Date.now()

// 3. H5新增写法
console.log(Date.now());

5、倒计时效果（重点应用）

1. 核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
2. 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
3. 把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）

转换公式如下：

1、d = parseInt(总秒数 / 60 / 60 / 24); //计算天数

2、h = parseInt(总秒数 / 60 / 60 % 24) ; //计算小时

3、m = parseInt(总秒数 / 60 % 60); //计算分数

4、s = parseInt(总秒数 % 60);      //计算当前秒数

function conutDown(time) {
    var nowTime = +new Date(); // 返回的是当前时间毫秒数
    var inputTime = +new Date(time); // 返回的是用户输入时间毫秒数
    var times = (inputTime - nowTime) / 1000; // times是剩余时间 秒数
    var d = parseInt(times / 60 / 60 / 24); // 计算天数
    d = d < 10 ? '0' + d : d;               // 小于10的前面添0，美观
    var h = parseInt(times / 60 / 60 % 24); // 计算小时
    h = h < 10 ? '0' + h : h;
    var m = parseInt(times / 60 % 60); // 计算分数
    m = m < 10 ? '0' + m : m;
    var s = parseInt(times % 60); // 计算当前秒数
    s = s < 10 ? '0' + s : s;
    return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(conutDown('2024-5-1 18:00:00'));

三、数组对象

1、创建数组的两种方法（对于第四天的补充）

// new Array()，带参数和不带参数的情况
var arr1 = new Array(); // 创建了一个空数组
var arr2 = new Array(2); // 创建了一个长度为2的数组，有两个空的元素
var arr3 = new Array(2, 3, 4); // 创建了长度为3，内容为[2,3,4]的数组

2、判断是否是数组

a. instanceof运算符

// 1. instanceof运算符
var arr = [];
console.log(arr instanceof Array); // return true
var obj = {};
console.log(obj instanceof Array); // return false

b. Array.isArray(变量名)

// 2.Array.isArray(变量)
console.log(Array.isArray(arr)); // return true
console.log(Array.isArray(obj)); // return false

3、添加删除数组元素

a.1 push()添加

// 1. push() 在数组的末尾，添加一个或者多个数组元素
var arr = [1, 2, 3];
arr.push(4, 'apple');
console.log(arr);
console.log(arr.push(6)); // return 新数组的长度

a.2 unshift()添加

// 2. unshift 在数组的开头，添加一个或者多个数组元素
arr.unshift(0, 'banana');
console.log(arr);
console.log(arr.unshift('00')); // return 新数组的长度

b.1 pop()删除

// 3. pop() 删除数组的最后一个元素
console.log(arr.pop()); // return 删除的最后一个元素
console.log(arr);

b.2 shift()删除

// 4. pop() 删除数组的第一个元素
console.log(arr.shift()); // return 删除的第一个元素
console.log(arr);

4、翻转数组reverse()

// 翻转数组reverse
var arr = [1, 2, 3, 4, 5];
arr = arr.reverse();
console.log(arr);

5、数组排序

// 数组排序(冒泡排序)
var arr1 = [15, 4, 9, 8];
arr1 = arr1.sort(function (a, b) { // 不加上这个函数会出现bug
    return a - b;    // 升序
    // return b - a; // 降序
});
console.log(arr1);

6、获取指定数组元素索引号

a. indexOf(元素值）

var arr = [1, 2, 3, 4, 5, 6];
// 1. indexOf()从前往后查找
console.log(arr.indexOf(5)); // return 4
console.log(arr.indexOf(7)); // return -1,找不到

b. lastindexOf(元素值）

var arr = [1, 2, 3, 4, 5, 6];
// 2. lastindexOf()从后往前查找
console.log(arr.lastIndexOf(1)); // return 0

7、数组转换为字符串

a. toString()

var arr = [1, 2, 3];
// 1. toString()
console.log(arr.toString()); // '1,2,3'

b. join(分隔符)

var arr = [1, 2, 3];
// 2. join(分隔符),分隔符不屑默认逗号
console.log(arr.join('-')); // '1-2-3'

四、字符串对象

1、基本包装类型

基本包装类型:把简单数据类型包装成复杂数据类型（string、number、boolean）。

var str = 'apple';
console.log(str.length);
// 为什么字符串类型也有length属性？
// 因为，以上代码相当于以下代码
var temp = new String('apple');
str = temp; // 把临时变量的值赋值给str
temp = null; // 销毁临时变量

2、字符串的不可变性

字符串所以的方法都不会修改字符串本身，操作完成后会返回一个新的字符串，指向一个新的地址。因为字符串不可变，所以不要大量修改或者拼接字符串，否则浪费时间和空间资源。

3、根据字符返回位置

a. indexOf(字符）

var str = '改革春风吹满地，春天来了';
// 1.indexOf()
console.log(str.indexOf('春')); // 返回第一个'春'的位置
console.log(str.indexOf('春', [3])); // 从第三个位置往后开始查找，返回第二个'春'的位置

b. lastindexOf(字符）

4、根据位置返回字符

a. charAt(index)

var str = 'apple';
// 1. charAt(index):返回字符本身
for (var i = 0; i < str.length; i++) {
    console.log(str.charAt(i));
}

b. charCodeAt(index)

var str = 'apple';
// 2. charCodeAt(index):返回字符ASCII码,用于断按下哪个键
for (var i = 0; i < str.length; i++) {
    console.log(str.charCodeAt(i));
}

c. 字符串名[index]

var str = 'apple';
// 3. str[index]:返回字符本身(H5新增)
for (var i = 0; i < str.length; i++) {
    console.log(str[i]);
}

5、拼接字符串

var str = 'andy';
// 1. concat('字符串1','字符串2'....)
console.log(str.concat('red'));

6、截取字符串

var str1 = '改革春风吹满地';
// 2. substr('截取的起始位置', '截取几个字符');
console.log(str1.substr(2, 2)); // 第一个2是索引号,第二个2是取几个字符

7、替换字符

注意：它只会替换第一个字符。

// 1. 替换字符 replace('被替换的字符', '替换为的字符')
var str = 'andyandy';
console.log(str.replace('a', 'b'));

// 应用
// 有一个字符串 'abcoefoxyozzopp'  要求把里面所有的 o 替换为 *
var str1 = 'abcoefoxyozzopp';
while (str1.indexOf('o') !== -1) {
    str1 = str1.replace('o', '*');
}
console.log(str1);

8、字符串转换为数组

// 2. 字符转换为数组 split('分隔符')【join：把数组转换为字符串】
var str2 = 'red, pink, blue';
console.log(str2.split(','));
var str3 = 'red&pink&blue';
console.log(str3.split('&'));

五、简单数据类型与复杂数据类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

值类型/简单数据类型/基本数据类型：在存储时变量中存储的是值本身，因此叫做值类型。

Eg. string ，number，boolean，undefined，null

引用类型/复杂数据类型：在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型。

通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等。

1、简单数据类型传参

// 简单数据类型传参
function fn(a) {
    a++;
    console.log(a);
}
var x = 10;
fn(x);
console.log(x); // 10

2、复杂数据类型传参 

// 复杂数据类型传参
function Person(name) {
    this.name = name;
}
function f1(x) { // x = p
    console.log(x.name); // 2. 这个输出什么?  刘德华   
    x.name = "张学友";
    console.log(x.name); // 3. 这个输出什么?   张学友
}
var p = new Person("刘德华"); // 利用构造函数创建对象
console.log(p.name); // 1. 这个输出什么?   刘德华 
f1(p);
console.log(p.name); // 4. 这个输出什么?   张学友