细说JavaScript内置对象（JavaScript内置对象详解）

编程日记2024-03-20 15:35:33

69e530474ccf4835b58ecf810db1f348.png

一、String对象

任何一门语言都会有关于js字符串的介绍，一连串的字符组成一串，就构成了字符串。字符串的处理不存在生活中还是在计算机应用中都很广泛。

1、简单上手

在js中，String对象通过特有的属性和方法来操作或获取有关文本的信息。与boolean对象相似，String对象不需要进行实例化就能够使用

var string = "hello world";
alert(string.toUpperCase()); // HELLO WORLD

String对象只有一个属性length 这个属性只有只读权限，因此读者不能进行修改

var str = "hello world";
alert(str.length); // 12 空格也算字符串

2、构造方法

// String对象有三种常用的构造方法
// 1、new String();
var str = new String("知数SEO，专注品牌推广");
// 2、String()
var str = String("知数SEO，专注品牌推广");
// 3、字符串字面量
var str = "知数SEO，专注品牌推广";

3、其他方法

虽然String对象只有一个属性，但是却有很多的方法，下面为大家介绍下

3.1、charAt()返回指定位置的字符

// charAt()方法返回指定位置的字符，返回的字符是长度为1的字符串
// 例如
var str = "stay hungry stay foolish";
alert(str.charAt(3)); // y

// 最后一个字符的下标为string.length-1,如果参数index不在0和string.length-1之间，则该方法返回一个空字符串
// 一个空格也算一个字符串

3.2、indexOf()返回指定的字符串首次出现的位置

// indexOf()返回指定的字符串首次出现的位置
// 例如
var str = "stay hungry stay foolish";
alert(str.indexOf('s')); // 0

// 这个方法有两个参数，一个参数是想要查询的字符
// 第二个参数是想要从哪个位置开始查询
// 如果没有第二个参数则默认从头开始查询
// 如果有查询结果则返回指定的字符串首次出现的位置，如果没有查询结果，则返回-1
var str = "stay hungry stay foolish";
alert(str.indexOf('s',4)); // 12

3.3、split()字符串分隔

// split()字符串分隔
// 第一个参数是指从指定的地方分隔字符串
// 第二个参数代表分隔次数，默认是无数次，分隔完成后会返回相应长度的字符串
var name = '赵,钱,孙,李';
alert(name.split(',')); // 赵,钱,孙,李
var array = name.split(',');
console.log(array[1]); // 钱

3.4、substring()提取字符串

// 如果你手里有一段字符串，可是你只想要其中一部分字符串，可以使用substring()方法
// 第一个参数代表从下标为几开始
// 第二个参数代表到下标多少为止 如果省略则默认到字符串结尾
var str = "everything will be ok";
console.log(str.substring(3)); // rything will be ok
console.log(str.subthing(3,5)); // ry

3.5、substr()提取指定数目的字符

// 参数1:代表从指定位置开始
// 参数2:代表提取的字符串的长度
// 需要注意的是：如果第一个参数是负数，则代表从字符串结尾开始
var str = "everything will be ok";
console.log(str.substr(3)); // rything will be ok
console.log(str.substr(3,5)); // rythi

// substring() 和 substr()的区别是前者从下标3到下标5，后者从下标3开始共5个字符

二、Math对象

Math对像没有构造函数，Math对象定义了一些常用的数学常数，我们通常用Math来处理数学运算

1、简单上手

// 和其他内置对象不同Math对象不能加以实例化，读者只能依据Math对象的原理使用它
// 在没有任何实例化的情况下从该对象中调用属性和方法
var Pi = Math.PI;
var random = Math.random();

2、对象属性

常用的Math对象属性

属性	描述
E	返回算数常量，即自然对数的底数
LN2	返回2的自然对数
LN10	返回10的自然对数
LOG2E	返回以2为底的e的对数
PI	返回圆周率
SQRT1_2	返回2的平方根的倒数
SQRT2	返回2的平方根

console.log("LN10:" + Math.LN10); // LN10:2.302585092994046

3、对象方法

常用的Math对象方法

方法	描述
abs(x)	返回x的绝对值
acos(x)	返回x的反余弦值
asin(x)	返回x的反正弦值
atan(x)	返回x的反正切值
atan2(y,x)	返回从x轴到点(x,y)的角度
ceil(x)	对x进行上舍入,小数小后不管多少都+1
round	把数四舍五入为最接近的整数
floor(x)	对x进行下舍入，不管小数点后是说少都舍掉
sin(x)	返回x的正弦
cos(x)	返回x的余弦
tan(x)	返回x的正切
exp(x)	返回e的指数
log(x)	返回x的自然对数
max(x,y)	返回x和y中的最大值
min(x,y)	返回x和y中的最小值
pow(x,y)	返回x的y次幂
random()	返回0-1之间的随机数
sqrt(x)	返回x的平方根
toSource()	返回该对象的源代码
valueOf	返回Math对象的原始值

console.log(Math.ceil(3.8)); // 4
console.log(Math.floor(3.8)) // 3

三、Date对象

1、简单上手

// Date对象在使用前必须先声明，语法

var 实例对象名称 = new 对象名称(参数列表)

var mydate = new Date();

2、构造方法

// Date对象的构造方法大致分为4中
// 1、无参构造 new Date(); 这种形式是直接采用 new Date()方式获取返回值
var myDate = new Date();
console.log(myDate); // Tue Jan 16 2024 16:39:05 GMT+0800 (中国标准时间)

//2、new Date(millisenconds); 输入时间作为参数，以获取时间
// 这个毫秒是以1970/01/01/ 00:00:00 为起点的
var mydate = new Date(60*1000*1);
console.log(mydate); // 前进一分钟的毫秒数

var mydate = new Date(-60*1000*1);
console.log(mydate);  // 后退一分钟的毫秒数

// 3、new Date(dateStr);
// 将字符串转换为Date对象
var mydate = new Date("2020-02-02");
console.log(mydate); // Sun Feb 02 2020 08:00:00 GMT+0800 (中国标准时间)
mydate = new Date("2020-02-02 18:00:00");
console.log(mydate); // Sun Feb 02 2020 18:00:00 GMT+0800 (中国标准时间)
mydate = new Date("2020/2/2");
console.log(mydate);  // Sun Feb 02 2020 00:00:00 GMT+0800 (中国标准时间)
mydate = new Date("2020/2/2 18:00:00");
console.log(mydate);  // Sun Feb 02 2020 18:00:00 GMT+0800 (中国标准时间)

// 4、new Date(year,month,day,hour,minites,seconds);
var mydate = new Date(2020,2,2,0,1,3);
console.log(mydate); // Mon Mar 02 2020 00:01:03 GMT+0800 (中国标准时间)

3、Date实例方法

Date对象的实例方法只要分为两种形式：==本地时间和UTC时间==，同一个方法一般都会有这两种时间格式操作（方法名带UTC的就是操作UTC时间）

3.1、get()方法

方法	功能
getFullYear()	返回Date对象的年份值年份的四位数字
getMonth()	返回Date对象的月份值从0开始，所以实际鱼粉 = 返回值+1
getDate()	返回Date对象的月份中的日期值值的范围1-31
getHours()	返回Date对象的小时值
getMinutes()	返回Date对象的分钟值
getSeconds()	返回Date对象的秒值
getMilliseconds()	返回Date对象的毫秒值
getDay()	返回Date对象的一周中的星期几，0为星期天，1为星期一
getTime()	返回Date对象与1970/01/01 00:00:00之间的毫秒数北京时间为东八区 1970/01/01 08:00:00

3.2、set()方法

方法	功能
setFullYear(year,month,dat)	设置Date对象的年份值
setMonth(month)	设置Date对象的月份值 0表示1月，11表示12月
setDate(day)	设置Date对象的月份中的日期值范围1-31
setHours(hour)	设置Date对象的小时值
setMinutes(minutes)	设置Date对象的分钟值
setSeconds(seconds)	设置Date对象的秒数
setMilliSeconds(seconds)	设置Date对象的毫秒数

3.3、其他方法

方法	功能
toString()	将Date对象转换为一个'年月日时分秒'字符串
toLocaleString()	将Date对象转换为一个'年月日时分秒'的本地格式字符串
toDateString()	将Date对象转换为一个'年月日'字符串
toLocaleDateString()	将Date对象转换为一个'年月日'的本地格式字符串
toTimeString()	将Date对象转换为一个'时分秒'字符串
toLocaleTimeString()	将Date对象转换为一个'时分秒'的本地格式字符串
valueOf	与get Time()一样

4、静态方法

静态方法不同于之前采用的 ==new 对象== 的形式，是可以直接通过对象.method()来调用另一种方法

// 1、Date.now();
console.log(Date.now()); // 1705396658710

// 2、Date.parse(dateStr);
console.log(Date.parse("2020-02-02")); // 1580601600000

四、Number对象

Number对象是数字对象，包含js中的整数、浮点数等

1、简单上手

// 语法结构
var a = 1;
var b = -1.1;

2、构造方法

// 1、Number()
var num = Number(5);

// 2、new Number()
var num = new Number(5);

// 当Number()和运算符 new 一起作为构造函数使用时返回一个新创建的Number读喜庆，如果不用new运算符，则把Number()作为一个函数来调用，它将把自己的参数转换成原始的数值，并返回这个值（如果转换失败则返回NaN）

3、对象属性

属性	描述
constructor	返回对创建此对象的Number()函数的引用
MAX_VALUE	克表示的最大值
MIN_VALUE	可表示的最小值
NaN	非数字值
NEGATIVE_INFINITY	负无穷大，溢出时返回该值

console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
// 这些值时构造函数Number()自身的属性，不是单独的某个Number对象的属性

4、对象方法

方法	描述
toString()	把数字转换为字符串，使用指定的基数
toLocaleString()	把数字转换为字符串，使用本地数字格式顺序
toFixed()	把数字转换为字符串，结果的小数点后有指定位数的数字
toExponential()	把对象的值转化为指数计数法
toPrecision()	把数字格式化为指定的长度

javascript

五、RrgExp对象

正则表达式是一个十分古老而又强大的文本处理工具，仅仅用一段非常简短的表达式语句便能快速实现一个复杂的业务逻辑。

1、简单上手

正则表达式由普通字符和特殊字符（元字符）组成的文字模式，模式描述在搜索文本时要匹配的一个或多个字符串，正则表达式作为一个模版将某个字符模式与所搜索的字符串进行匹配。

2、构造方法

// 1、用//将正则表达式夹在中间
var reg = /r/;  // 匹配r字母
var red = /\r/;  // 匹配一个回车符

// 2、使用new来创建
var reg = new RegExp('r'); // 匹配r字母
var reg = new RegExp('\r'); // 匹配一个回车符

3、元字符

javascript

4、运算符优先级

javascript

六、Event对象

Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等

1、事件句柄

属性	此事件发生在什么时候
onabort	图像的加载被中断
onload	一张页面或一副图像完成加载
onfocus	元素获取焦点
onblur	元素失去焦点
onchange	域的内容被更改
onclick	当用户点击某个对象时调用的事件句柄
ondblclick	当用户双击某个对象时调用的句柄
onerror	在加载文档或图像时发生错误
onkeydown	某个键盘按键被按下
onkeypress	某个键盘按键被按下并松开
onkeyup	某个键盘按键被松开
onmousedown	鼠标按钮被按下
onmousemove	鼠标被移动
onmouseup	鼠标按钮被松开
onresize	窗口或框架被重新调整大小
onsubmit	确认按钮被点击
onreset	重置按钮被点击
onselect	文本被选中
onunload	用户退出页面

2、鼠标/键盘属性

属性	描述
altKey	返回当事件被触发时，Alt键是否被按下
button	返回当事件被触发时，哪个鼠标按键被点击
clientX	返回当事件被触发时,鼠标指针的水平坐标
clientY	返回当事件被触发时,鼠标指针的垂直坐标
ctrlKey	返回当事件被触发时,Ctrl键是否被按下
screenX	返回当事件被触发时,鼠标指针的水平坐标
screenY	返回当事件被触发时,鼠标指针的垂直坐标
shiftKey	返回当事件被触发时,Shift键是否被按下
relatedTarget	返回与事件的目标节点相关的节点

3、IE属性

IE事件的属性和方法

属性 / 方法	类型	读 / 写	说明
cancelButton	Boolean	只读	默认为false，但将其设置为true就可以取消事件冒泡
returnValue	Boolean	只读	默认为true，但将其设置为false就可以取消事件的默认行为
srcElemnet	Element	只读	事件的目标
type	String	只读	被触发的事件的类型

4、标准Event对象属性

Event对象可以让HTML特定的事件处理程序与js函数执行相同的操作，Event对象包含与创建它的特定事件有关的属性和方法，触发的事件类型不一样，可用的属性和方法也不一样

属性	描述
bubbles	返回布尔值，只是事件是否时起泡事件类型
cancelable	返回布尔值，指示时加你是否被event、preventdefault()取消默认动作
currentTarget	当前处理该事件的元表、文档或窗口
eventPhase	返回事件传播的当前阶段
target	返回触发此事件的元素（事件的目标节点）
timeStamp	返回事件生成的日期和时间

5、标准Event对象方法

方法	描述
inEvent()	初始化新创建的Event对象的属性
preventDefault	通知浏览器不要执行与事件关联的默认动作

查看全文

一、String对象

1、简单上手

2、构造方法

3、其他方法

3.1、charAt()返回指定位置的字符

3.2、indexOf()返回指定的字符串首次出现的位置

3.3、split()字符串分隔

3.4、substring()提取字符串

3.5、substr()提取指定数目的字符

二、Math对象

1、简单上手

2、对象属性

3、对象方法

三、Date对象

1、简单上手

2、构造方法

3、Date实例方法

3.1、get()方法

3.2、set()方法

3.3、其他方法

4、静态方法

四、Number对象

1、简单上手

2、构造方法

3、对象属性

4、对象方法

五、RrgExp对象

1、简单上手

2、构造方法

3、元字符

4、运算符优先级

六、Event对象

1、事件句柄

2、鼠标/键盘属性

3、IE属性

4、标准Event对象属性

5、标准Event对象方法

相关文章：