JavaScript基础09-内置对象Math,Date和Array

Math对象

Math对象不是构造函数，不需要创建对象，它是一个工具类，具有数学常数和函数的属性和方法，都是以静态成员的方式提供，跟数学相关的运算就来找Math中的成员（求绝对值，取整等）

常见方法如下，

方法	描述	备注
Math.PI	圆周率	Math对象的属性
Math.abs()	返回绝对值	参数中可以接收字符串类型的数字，此时会将字符串做隐式类型转换，然后再调用 Math.abs() 方法。传入不能转换成number类型的数字，返回NaN
Math.random()	生成0-1之间的随机浮点数	生成 [x, y) 之间的随机数：Math.round(Math.random()(y-x)+x)；生成 [x, y]：Math.random() (max - min + 1)) + min
Math.floor()	向下取整（往小取值）
Math.ceil()	向上取整（往大取值）
Math.round()	四舍五入取整
Math.max(x, y, z)	返回多个数中的最大值
Math.min(x, y, z)	返回多个数中的最小值
Math.pow(x,y)	乘方：返回 x 的 y 次幂
Math.sqrt()	开方：对一个数进行开方运算

举几个例子

//Math.abs() 获取绝对值
Math.abs(-12) = 12
//Math.ceil() and Math.floor() 向上取整和向下取整
 console.log(Math.ceil(12.03));//13
 console.log(Math.ceil(12.92));//13
 console.log(Math.floor(12.3));//12
 console.log(Math.floor(12.9));//12
//Math.random()取[0,1)的随机小数 
console.log(parseInt(Math.random()*10));//未包含10
console.log(parseInt(Math.random()*10+1));//包含10
/*Math.round() 四舍五入,正数时，包含5是向上取整，负数时不包含5是向下取整。*/
var a = Math.round(-16.3) //= -16
var b = Math.round(-16.5) //= -16
var c = Math.round(-16.51) //= -17

Number对象

Number.isInteger()

Number.isInteger() 判断是否为整数判断是否为整数，

布尔值 = Number.isInteger(数字);

我们顺便来了解一下toFixed()方法，

字符串 = myNum.toFixed(num);

将数字 myNum 的小数点后面保留 num 位小数（四舍五入），并返回。不会改变原数字。注意，返回结果是字符串。参数 num：指定了小数点后面的位数。

Date对象

内置对象 Date 用来处理日期和时间。与 Math 对象不同，Date 对象是一个构造函数，需要先实例化后才能使用。Date 对象基于1970年1月1日（世界标准时间）起的毫秒数。

创建Date对象

Date的参数为空的构造函数
参数为空，返回当前时间的毫秒数

// 获取当前时间，UTC世界时间，距1970年1月1日（世界标准时间）起的毫秒数
var now = new Date();
console.log(now.valueOf()); // 获取距1970年1月1日（世界标准时间）起的毫秒数

如果Date()里面写参数，就返回括号里输入的时间对象

通过传参的这种写法，我们可以把时间字符串/时间数字/时间戳，按照指定的格式，转换为时间对象。

 // 1. 毫秒数 1498099000356        
        var dateNow = new Date(1597758288773);
        console.log(dateNow.valueOf());
        
        //2. 日期格式字符串  '2020-8-18'    
        var date1 = new Date('2020-8-18')
        console.log(date1.valueOf());
        // 3. 年、月、日……                
        var date2 = new Date(2020, 7, 18)   // 月份从0开始,代表8月份
        console.log(date2.valueOf());

这只是其中的一部分，Date的构造函数有很多，参数可以是字符串，数字和时间戳。

日期的格式化

我们获取到了 Date 对象，但这个对象，打印出来的结果并不是特别直观。如果我们需要获取日期的指定部分，就需要用到 Date对象自带的方法。获取了日期指定的部分之后，我们就可以让日期按照指定的格式，进行展示（即日期的格式化）。

Date对象的方法

方法名	含义	备注
getFullYear()	获取年份
getMonth()	获取月： 0-11	0代表一月
getDate()	获取日：1-31	获取的是几号
getDay()	获取星期：0-6	0代表周日，1代表周一
getHours()	获取小时：0-23
getMinutes()	获取分钟：0-59
getSeconds()	获取秒：0-59
getMilliseconds()	获取毫秒 1s = 1000ms
getTime()	获取当前时间戳

获取Date时间戳的写法

// 方式一：获取 Date 对象的时间戳（最常用的写法）
        const timestamp1 = +new Date();
        console.log(timestamp1); 

        // 方式二：获取 Date 对象的时间戳（较常用的写法）
        const timestamp2 = new Date().getTime();
        console.log(timestamp2); 

        // 方式三：获取 Date 对象的时间戳
        const timestamp3 = new Date().valueOf();
        console.log(timestamp3); 

        // 方式4：获取 Date 对象的时间戳
        const timestamp4 = new Date() * 1;
        console.log(timestamp4); 

        // 方式5：获取 Date 对象的时间戳
        const timestamp5 = Number(new Date());
        console.log(timestamp5); 
        // 方式六：获取当前时间的时间戳（很常用的写法）
        console.log(Date.now()); // 打印结果举例：1589448165370

***我们可以在业务代码的前面定义时间戳1，在业务代码的后面定义时间戳2。把这两个时间戳相减，就能得出业务代码的执行时间。****

format格式化时间
我们可以转换为指定的时间格式，语法如下，

var time1 = new Date().format("yyyy-MM-dd hh:mm:ss");
console.log(time1);

Moment.js

Moment.js 是一个轻量级的JavaScript时间库，我们可以利用它很方便地进行时间操作，提升开发效率。
中文官网：http://momentjs.cn/

Array对象

创建数组除了字面量的方式，我们还可以使用new Array()来创建

// 1. 使用构造函数创建数组对象
// 创建了一个空数组
var arr = new Array();
// 创建了一个数组，里面存放了3个字符串
var arr = new Array('zs', 'ls', 'ww');
// 创建了一个数组，里面存放了4个数字
var arr = new Array(1, 2, 3, 4);

数组中常见的方法

数组类型相关

方法	描述
Array.isArray()	判断是否为数组
toString()	将数组转换为字符串，中间以，分割
valueof()	返回数组本身
Array.from(arrayLike)	将伪数组转化为真数组
Array.of(value1, value2, value3)	创建数组：将一系列值转换成数组

注意，Array.isArray()是h5的新特性，可能会有兼容性问题，我们可以使用instanceof来判断是否是一个数组。

数组常见方法

数组中常见的方法

具体的使用可以参考：https://www.runoob.com/jsref/jsref-obj-array.html

toString()：数组转换为字符串
备注：大多数的数据类型都可以使用.toString()方法，将其转换为字符串。
字符串 = String(数组);也可以把数组转化成字符串。

Array.from()：将伪数组转换为真数组

array = Array.from(arrayLike);

伪数组包含 length 属性的对象或可迭代的对象。另外，伪数组的原型链中没有 Array.prototype，而真数组的原型链中有 Array.prototype。因此伪数组没有数组的一般方法，比如 pop()、join() 等方法。如，我们通过getElementsByTagName获取到的数组实际上是伪数组，可以使用from方法转换成真数组。

Array.of()：创建数组

//Array.of(value1, value2, value3);
const arr = Array.of(1, 'abc', true);
console.log(arr); // 打印结果是数组：[1, "abc", true]

new Array()和 Array.of()的区别在于：当参数只有一个时，前者表示数组的长度，后者表示数组中的内容。

向数组中添加和删除元素

push
向数组的最后面插入一个或多个元素，返回结果为新数组的长度。

新数组的长度 = 数组.push(元素);

pop()
删除数组中的最后一个元素，返回结果为被删除的元素。

被删除的元素 = 数组.pop();

unshift()

在数组最前面插入一个或多个元素，返回结果为新数组的长度。插入元素后，其他元素的索引会依次调整。

新数组的长度 = 数组.unshift(元素);

shift()
删除数组中的第一个元素，返回结果为被删除的元素。

被删除的元素 = 数组.shift();

slice()
从数组中提取指定的一个或者多个元素，返回结果为新的数组（不会改变原来的数组）。

//新数组 = 原数组.slice(开始位置的索引, 结束位置的索引); //注意：包含开始索引，不包含结束索引
const arr = ['a', 'b', 'c', 'd', 'e', 'f'];

const result1 = arr.slice(); // 不加参数时，则获取所有的元素。相当于数组的整体赋值
const result2 = arr.slice(2); // 从第二个值开始提取，直到末尾
const result3 = arr.slice(-2); // 提取最后两个元素
const result4 = arr.slice(2, 4); // 提取从第二个到第四个之间的元素（不包括第四个元素）
const result5 = arr.slice(4, 2); // 空

splice()
从数组中删除指定的一个或多个元素，返回结果为被删除元素组成的新数组（会改变原来的数组）。改方法会改变原数组。

//新数组 = 原数组.splice(起始索引index, 需要删除的个数);

//新数组 = 原数组.splice(起始索引index, 需要删除的个数, 新的元素1, 新的元素2...);

上方语法中，第三个及之后的参数，表示：删除元素之后，向原数组中添加新的元素，这些元素将会自动插入到起始位置索引的前面。也可以理解成：删除了哪些元素，就在那些元素的所在位置补充新的内容。

fill()
用一个固定值填充数组，返回结果为新的数组。不会改变原数组。

// 用一个固定值填充数组。数组里的每个元素都会被这个固定值填充
新数组 = 数组.fill(固定值);

// 从 startIndex 开始的数组元素，用固定值填充
新数组 = 数组.fill(固定值, startIndex);

// 从 startIndex 到 endIndex 之间的元素（包左不包右），用固定值填充
新数组 = 数组.fill(固定值, startIndex, endIndex);
// 创建一个长度为4的空数组，然后用 'f' 来填充这个空数组
console.log(Array(4).fill('f')); // ['f', 'f', 'f,' 'f']

// 将现有数组的每一个元素都进行填充
console.log(['a', 'b', 'c', 'd'].fill('f')); // ['f', 'f', 'f,' 'f']

// 指定位置进行填充
console.log(['a', 'b', 'c', 'd'].fill('f', 1, 3)); // ["a", "f", "f", "d"]

数组的拆分与合并

concat()
连接两个或多个数组，返回结果为新的数组。不会改变原数组。concat()方法的作用是数组合并。

新数组 = 数组1.concat(数组2, 数组3 ...);

join

//将数组转换为字符串，返回结果为转换后的字符串（不会改变原来的数组）。
新的字符串 = 原数组.join(参数); // 参数选填

join()方法可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符；如果不指定连接符，则默认使用 , 作为连接符，此时和 toString()的效果是一致的。

split()

通过指定的分隔符，将一个字符串拆分成一个数组。不会改变原字符串

新的数组 = str.split(分隔符);

split()是字符串的方法，不是数组的方法。

reverse()

反转数组，返回结果为反转后的数组（会改变原来的数组）。

反转后的数组 = 数组.reverse();

sort

对数组的元素进行从小到大来排序（会改变原来的数组）。

sort()方法：无参时
如果在使用 sort() 方法时不带参，则默认按照Unicode 编码，从小到大进行排序。

let arr1 = ['e', 'b', 'd', 'a', 'f', 'c'];

let result = arr1.sort(); // 将数组 arr1 进行排序

console.log('arr1 =' + JSON.stringify(arr1));
console.log('result =' + JSON.stringify(result));
//  arr1 =["a","b","c","d","e","f"]
 //result =["a","b","c","d","e","f"]

我们再来看一下

排序

如图，用 sort() 排序后，数字11竟然在数字2的前面。因为sort()方法是按照Unicode 编码进行排序的。并非是按照自然排序。我们可以给sort传参，自定义排序方法
我们可以在 sort()添加一个回调函数，来指定排序规则。回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数。
浏览器根据回调函数的返回值来决定元素的排序：

如果返回一个大于 0 的值，则元素会交换位置
如果返回一个小于 0 的值，则元素位置不变
如果返回一个等于 0 的值，则认为两个元素相等，则不交换位置

从小到大排序

简化写法从大到小排序

indexOf() 和 lastIndexOf()：获取数据的索引

//索引值 = 数组.indexOf(想要查询的元素);
//索引值 = 数组.lastIndexOf(想要查询的元素);

indexOf() 是从前向后查找元素的位置;lastIndexOf()是从后向前寻找。
可以检索一个数组中是否含有指定的元素。如果数组中含有该元素，则会返回其第一次出现的索引；如果没有找到指定的内容，则返回 -1。ndexOf()在检索时，是严格类型约束，类似于===
这个方法还可以指定第二个参数，用来指定查找的起始位置。语法如下：

索引值 = 数组.indexOf(想要查询的元素, [起始位置]);

find()

find((item, index, arr) => {
    return true;
});

找出第一个满足「指定条件返回 true」的元素；如果没找到，则返回 undefined。
备注：一旦找到符合条件的第一个元素，将不再继续往下遍历。
findIndex()

findIndex((item, index, arr) => {
    return true;
});

找出第一个满足「指定条件返回 true」的元素的 index。

every()
数组中每一项运行回调函数，如果都返回 true，every 就返回 true；如果有一项返回 false，则停止遍历，此方法返回 false。
every()方法的返回值是 boolean 值，参数是回调函数。

some()
对数组中每一个元素运行回调函数，只要有一个元素返回 true，则停止遍历，此方法返回 true。

every()：全部真，才为真。当你需要让数组中的每一个元素都满足指定条件时，那就使用 every()。
some()：一个真，则为真，点到为止。数组中只要有一个元素满足指定条件时，就停止遍历。那就使用 some()。*

valueOf()

数组本身 = 数组.valueOf();

数组的遍历

遍历数组的方法包括：every()、filter()、forEach()、map()等。

for循环

let arr = ["0", "1", "2", "3", "4", "5"];
        //for循环遍历
        for(let i = 0;i<arr.length;i++){
            console.log(arr[i]);
            
        }

forEach()遍历
forEach() 这种遍历方法只支持 IE8 以上的浏览器。IE8 及以下的浏览器均不支持该方法。所以如果需要兼容 IE8，则不要使用 forEach，改为使用 for 循环来遍历即可。
forEach()方法需要一个函数作为参数。这种函数，是由我们创建但是不由我们调用的，我们称为回调函数。
回调函数中传递三个参数：

第一个参数，就是当前正在遍历的元素
第二个参数，就是当前正在遍历的元素的索引
第三个参数，就是正在遍历的数组

arr.forEach((item, index, arr) => {
            console.log('item:' + item);
            console.log('index:' + index);
            console.log('arr:' + JSON.stringify(arr));
            console.log('----------');
        });
        

        //通常，后两个参数是省略的。
        arr.forEach(function (items) {
            console.log(items);

        });

map()
对数组中每一项运行回调函数，返回该函数的结果，组成的新数组（返回的是加工之后的新数组）。不会改变原数组。

/*arr.map(function (item, index, arr) {
    return newItem;
});*/
 //map的结果返回一个新的数组。(纯遍历，省略两个参数)
        let arr = ["0", "1", "2", "3", "4", "5"];
        let arrNew = arr.map(function(item){
            return item
        });
        console.log(arrNew);

filter()
对数组中的每一项运行回调函数，该函数返回结果是 true 的项，将组成新的数组（返回值就是这个新的数组）。不会改变原数组。

arr.filter(function (item, index, arr) {
    return true;
});

reduce()
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。返回值是回调函数累计处理的结果。

arr.reduce(function (previousValue, currentValue, currentIndex, arr) {}, initialValue);

参数说明：

previousValue：必填，上一次调用回调函数时的返回值
currentValue：必填，当前正在处理的数组元素
currentIndex：选填，当前正在处理的数组元素下标
arr：选填，调用 reduce()方法的数组
initialValue：选填，可选的初始值（作为第一次调用回调函数时传给 previousValue 的值）

 let arr = [1, 2, 3, 4, 5];
        //initialValue不填写时，第一次调用function的时候 pre的值为0. 一般
        //回调函数里我们都是用这两个参数就够了。
        //求arr数组元素的和，（10为pre最初的值，只求和的话，不传该参数）
        var res = arr.reduce(function (pre, cur) {
            return pre + cur;

        },10);
        console.log(res);