自律每一天,进步每一天,幸福每一天
知识导航:
js中常用内置对象
- Math对象
- Date对象
- Array对象
- string对象
博文脑图大纲:
1. js种常见内置对象
JavaScript 中的对象分为3种:自定义对象 、内置对象、 浏览器对象
前两种属于js基础内容,浏览器对象在web API中解释
学习要领:学习一个内置对象的使用,只要学会其常用成员的使用即可
1.1 Math对象
对象:即保存了一些属性和行为的集合。内置:即js封装时帮我们写好的,我们直接拿来用即可
来看一下math对象中保存了哪些有用于我们的信息吧
有些多,头有点疼有么有。其实我们不需要全部掌握只需对它们的功能特性有一些映像即可,用到的时候查询相关文档(w3c等)
不过有些常用的我们还是要熟记一下的。
如下:
属性、方法名 | 功能 |
---|---|
Math.PI | 圆周率 |
Math.floor() | 向下取整 |
Math.ceil() | 向上取整 |
Math.round() | 四舍五入版 就近取整 注意 -3.5 结果是 -3 |
Math.abs() | 绝对值 |
Math.max()/Math.min() | 求最大和最小值 |
Math.random() | 获取范围在[0,1)内的随机值 |
栗子:
console.log(Math.PI);
console.log(Math.floor(1.2));
console.log(Math.ceil(1.2));
console.log(Math.round(1.2));
console.log(Math.abs(-2));
console.log(Math.max(-2, 3, 4, 1));
console.log(Math.min(-2, 3, 4, 1));
console.log(Math.random());
结果:
再单独搞一下Math.random(),它默认是取0-1的值(左闭右开)。但往往这不是我们所需要的范围。那该怎么办呢?
不急js的参考文档上为我们提供了以下方法。我们来体验一下。
(1)得到一个两数之间的随机数
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
这句逻辑很简单,拿个栗子说话
本来是范围[0,1),我需要的是[4,6)。假设在0-1上得到的是0.2,在4-6上的+4不难理解,因为4是底线基数。但为啥还要*2呢?还是拿精度来说。0-1假设被分为了10份,那4-6的岂不就是20份。它在10份的尺度上占了十分之二,等比例到20份的尺度上也要占到十分之二啊。即占了4份为4.4
(2)得到一个两数之间的随机整数
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //不含最大值,含最小值
}
只是把两个参数取整了,min向上取整,max向下取整正好丢掉端点的不可取值
最后所得随机值再向下取整。(注意return中单看+min就可以肯定含有最小值。前面最大值向下取整就已经把最大值踢出去了。return中的取值只是保证返回的是整数)
(3)得到一个两数之间的随机整数,包括两个数在内
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值,含最小值
}
含有最小值的原理和上面一下,来看一下为什么这有了最大值。通过代码发现。它把我们的比例份数放大了1
极限处理法:令max=1.99,min=0 。 参数取整处理之后结果min
=0,max=1 。设随机数0.99看结果,0.99*(1+1)=1.98(不超过3,但包含原max) 。故处理方法提高一份成立
1.2 Date对象
Date 对象和 Math 对象不一样,Date是一个构造函数,所以使用时需要实例化后才能使用其中具体方法和属性。
它的方法还是这么的多,但我们还是只需掌握几个常用的。
首先我们先来看一下它构造函数的基本形式(四种):
1 new Date();
2 new Date(value);
3 new Date(dateString);
4 new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
// 第一种
//如果创建实例时并未传入参数,则得到的日期对象是当前时间对应的日期对象
var date01 = new Date();
console.log(date01);
//一个 Unix 时间戳(Unix Time Stamp),它是一个整数值,表示自1970年1月1日00:00:00 UTC(the Unix epoch)以来的毫秒数,忽略了闰秒
var date02 = new Date(2020);
console.log(date02);
// 第三种
//表示日期的字符串值。该字符串应该能被 Date.parse() 正确方法识别
//即获取指定时间的日期对象
var date03 = new Date("2020/1/1")
console.log(date03);
// 第四种
// year:表示年份的整数值。 0 到99会被映射至1900年至1999年, 其它值代表实际年份。 参见 示例。
// monthIndex:表示月份的整数值, 从 0( 1 月) 到 11( 12 月)。
// day 可选:表示一个月中的第几天的整数值, 从1开始。 默认值为1。
var date04 = new Date(2020, 1, 1, 11, 10, 00);
console.log(date04);
Date实例的常见方法:
栗子:
var date = new Date();
var year = date.getFullYear();
var mon = date.getMonth() + 1;//0-11,所以+1
var day = date.getDate();
var week = date.getDay();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
console.log("现在是" + year + "年" + mon + "月" + day + "日星期" + week + ", " + hour + "小时" + min + "分钟, " + sec + "秒");
通过Date实例获取总毫米数
获取的是基于1970年1月1日(世界标准时间)起的毫秒数
方法:
// 获取的三种方法:
var date = new Date();
// 1.
console.log(date.valueOf());
// 2.
console.log(date.getTime());
// 3. h5新增
console.log(Date.now());
// 常用简单写法:
var date02 = +new Date();
console.log(date02);
结果:
这里所有知道的实例:
(1)将毫秒转为距今多少天:
var date02 = +new Date();
console.log(date02);
var time = date02 / 1000;
var s = parseInt(time % 60);//默认是浮点数换为整数
var m = parseInt(time / 60 % 60);
var h = parseInt(time / 60 / 60 % 24);
var d = parseInt(time / 60 / 60 / 24);
console.log(d);
console.log("距今已经" + d + "天" + h + "时" + m + "分" + s + "秒");
(2)扩展,求自定义时间距现在时刻的倒计时。10以内的前面补0
function getCount(time) {
var nowTime = +new Date();
var inputTime = +new Date(time);
var t = (inputTime - nowTime) / 1000;
var s = parseInt(t % 60);
s = s < 10 ? "0" + s : s;
var m = parseInt(t / 60 % 60);
m = m < 10 ? "0" + m : m;
var h = parseInt(t / 60 / 60 % 24);
h = h < 10 ? "0" + h : h;
var d = parseInt(t / 60 / 60 / 24);
d = d < 10 ? "0" + d : d;
console.log("倒计时:" + d + "天" + h + "时" + m + "分" + s + "秒");
}
getCount("2020,2,1 20: 00: 00");
1.3 数组对象
JavaScript的 Array 对象是用于构造数组的全局对象。
它的原型中提供了遍历和修改元素的相关操作。
先来回忆一下创建数组的两种方式:
(1)字面量方式
var arr = [1,2,3];
(2)利用构造函数:
var arr = new Array();
这里需要注意的是: 使用需要使用构造函数Array创建非空数组,可以在创建数组时传入参数,参数传递规则如下:1. 如果只传入一个参数,则参数规定了数组的长度;2.如果传入了多个参数,则参数称为数组的元素
1.3.1 instanceof 运算符
可以用instanceof来检测是否是数组
instanceof 可以判断一个对象是否是某个构造函数的实例,返回值是boolean型
栗子:
//利用通过Array构造函数创建的实例一定是个数组对象
var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
同时h5为新增了一个检测数组的方法(Array.isArray()
):
var arr = [1, 2];
var obj = {};
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false
1.3.2 数组元素的增删
方法如下:
栗子(不要像我这样输出数组吆)
var arr = [1, 2];
console.log(arr);
var newLength01 = arr.push(3, 4);
console.log(arr + "当前的长度" + newLength01);
var newLength02 = arr.unshift(-1, 0);
console.log(arr + "当前的长度" + newLength02);
var date01 = arr.pop();
console.log(arr + "删除的元素为" + date01);
var date02 = arr.shift();
console.log(arr + "删除的元素为" + date02);
结果:
1.3.3 数组排序
数组中有对数组本身排序的方法,部分方法如:
主要功能介绍:
(1)reverse方法实现数组元素翻转:
var arr = [1, 2, 3];
console.log(arr.reverse());
结果:
(2)sort方法通过传入参数来设置升序、降序排序
var arr = [3, 98, 5, 6, 7];
console.log(arr.sort(function(a, b) {
return a - b;
}));
return a-b:是升序
return b-a;是降序
结果:
1.3.4 得到数组元素索引号
我们可用通过数组的索引号获取数组元素,当然也可以通过数组元素获取数组的索引号。
方法一:indexOf(从前往后找,返回找到第一个满足条件的。找不到则返回-1)
var arr = ["a", 2, 3, 2, 5];
console.log(arr.indexOf(2));
结果:
方法二:lastIndexOf(与方法不同的是它是从后往前找)
var arr = ["a", 2, 3, 2, 5];
console.log(arr.indexOf(2));
console.log(arr.lastIndexOf(2));
**结果:**返回的是后面的那个2的索引号。
1.3.5 数组转换为字符串
两种方法:
方法一:toString方法,返回值字符串
var arr = ["a", 2, 3, 2, 5];
console.log(arr.toString());
方法二:join(参数为设置的分隔符)
var arr = ["a", 2, 3, 2, 5];
console.log(arr.join("-"));
1.3.6 其他常用方法
方法:
(1)concat
基本语法:arrayObject.concat(arrayX,arrayX,......,arrayX)
其中参数arrayX 必需。该参数可以是具体的值,也可以是数组对象。可以是任意多个
。
返回值: 返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组。
栗子:
var arr01 = [0, 1, 2];
var arr02 = [3, 4, 5];
console.log(arr01.concat(arr02));
结果:
(2)slice
基本语法:arrayObject.slice(start,end)
,参数:start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。
返回值::返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。(不会像循环链表那样循环回去哦)
栗子:
var arr = [1, 2, 3, 4, 5];
console.log(arr.slice(-3, -1)); //3,4
结果:
splice
基本语法:
arrayObject.splice(index,howmany,item1,.....,itemX)
,参数:index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, …, itemX 可选。向数组添加的新项目。
返回值: 包含被删除项目的新数组,如果有的话。(该方法会改变原始数组。)
栗子:
var arr = [1, 2, 3, 4, 5];
console.log(arr.splice(0, 4, 8, 9)); //删除元素为1,2,3,4
//在0索引处删4的元素并添加8,9 。最后数组结果应为8,9,5
console.log(arr);
结果:
1.4 字符串对象
首先得接受一下js的基本包装类型:
基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。
看下面的一个栗子:
// 下面代码有什么问题?
var str = 'gongxiaobai';
console.log(str.length);
按道理基本数据类型是没有属性和方法的,而对象才有属性和方法,但上面代码却可以执行,这是因为js 会把基本数据类型包装为复杂数据类型,其执行过程如下 :
// 1. 生成临时变量,通过构造函数的方式将简单类型包装为复杂数据类型
var temp = new String('andy');
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null;
字符串的不可变性
指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间。
当重新给字符串变量赋值的时候,变量之前保存的字符串不会被修改,依然在内存中重新给字符串赋值,会重新在内存中开辟空间,这个特点就是字符串的不可变。
由于字符串的不可变,在大量拼接字符串的时候会有效率问题
下面来介绍方法
1.4.1 根据字符返回位置
方法一:indexOf,返回某个指定的字符串值在字符串中首次出现的位置。
基本语法:
stringObject.indexOf(searchvalue,fromindex)
参数:searchvalue 必需。规定需检索的字符串值。fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。
说明:
该方法将从头到尾地检索字符串 stringObject,看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头(没有指定 fromindex 时)。如果找到一个 searchvalue,则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
栗子:
var str = "aabbcc345eeff";
console.log(str.indexOf("345")); //没写formindex参数默认从0开始。打印值应为6
console.log(str.indexOf("345", 5));//当然写了这个顺序结果也没差,只是找到的更快
结果:
方法二:lastIndexOf,返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。
基本语法
stringObject.lastIndexOf(searchvalue,fromindex)
,参数与上同
说明:
- 与上的方法相同只是前者从前往后找,这个从后往前,不过要注意的是如果在 stringObject 中的 fromindex 位置之前存在 searchvalue,则返回的是出现的最后一个 searchvalue 的位置。
- 如果找到一个 searchvalue,则返回 searchvalue 的第一个字符在 stringObject 中的位置
栗子:
var str = "aabbee345eeff";
console.log(str.lastIndexOf("ee")); //9
console.log(str.lastIndexOf("ee", 6)); //4
结果:
1.4.2 根据位置返回字符
方法一: charAt(),返回指定位置的字符
基本语法:
stringObject.charAt(index)
参数:index 必需。表示字符串中某个位置的数字,即字符在字符串中的下标。
栗子:
var str = "aabbee345eeff";
console.log(str.charAt(0));
结果:
方法二: charCodeAt(),返回指定位置的字符的 Unicode 编码(ASCII码)
基本语法:
stringObject.charCodeAt(index)
,参数:index 必需。表示字符串中某个位置的数字,即字符在字符串中的下标。
栗子:
var str = "aabbee345eeff";
console.log(str.charCodeAt(0));
结果:
方法三: str[index],h5新增
栗子:
var str = "aabbee345eeff";
console.log(str[0]);
结果:
1.4.3replace()方法
replace() 方法用于在字符串中用一些字符替换另一些字符(或替换一个与正则表达式匹配的子串。),其使用格式如下:
字符串.replace(被替换的字符串, 要替换为的字符串);
//标准型:
stringObject.replace(regexp/substr,replacement)
参数:
regexp/substr 必需。规定子字符串或要替换的模式的 RegExp 对象。
请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象。
replacement 必需。一个字符串值。规定了替换文本或生成替换文本的函数。
栗子:
var str = "aabbee345eeff";
console.log(str.replace("aa", "rr"));
结果:
1.4.4split()方法
split()方法用于切分字符串,它可以将字符串切分为数组。在切分完毕之后,返回的是一个新数组。
基本语法:
stringObject.split(separator,howmany)
,参数:separator起始字符,howmany切割长度.如果把空字符串 ("") 用作 separator,那么 就从stringObject字符串的起始位置开始
或者:
stringObject.split(分隔符);
作用如把字符串’'name=gongxiaobai"转为"[name,gongxiaobai]"这样的数组
栗子:
var str = "aabbee345eeff";
console.log(str.split("", 5));
结果:
1.4.5其他常用方法
栗子:
var str01 = "gong";
var str02 = "xiaobai";
console.log(str01.concat(str02));
// substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
console.log(str01.substr(0, 4));
// slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
console.log(str02.slice(4)); //后面参数不写默认到最后
// substring() 方法用于提取字符串中介于两个指定下标之间的字符。参数是非负整数
console.log(str02.substring(0, 4));
结果: