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

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

  1. 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()添加一个回调函数,来指定排序规则。回调函数中需要定义两个形参,浏览器将会分别使用数组中的元素作为实参去调用回调函数。
浏览器根据回调函数的返回值来决定元素的排序:

  1. 如果返回一个大于 0 的值,则元素会交换位置
  2. 如果返回一个小于 0 的值,则元素位置不变
  3. 如果返回一个等于 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()方法需要一个函数作为参数。这种函数,是由我们创建但是不由我们调用的,我们称为回调函数。
回调函数中传递三个参数:

  1. 第一个参数,就是当前正在遍历的元素
  2. 第二个参数,就是当前正在遍历的元素的索引
  3. 第三个参数,就是正在遍历的数组
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);

参数说明:

  1. previousValue:必填,上一次调用回调函数时的返回值
  2. currentValue:必填,当前正在处理的数组元素
  3. currentIndex:选填,当前正在处理的数组元素下标
  4. arr:选填,调用 reduce()方法的数组
  5. 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);
        
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,468评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,620评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,427评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,160评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,197评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,334评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,775评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,444评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,628评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,459评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,508评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,210评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,767评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,850评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,076评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,627评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,196评论 2 341