JavaScript——对象-内建对象(数组、Date、Math、包装类、字符串、正则表达式)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/actionActivity/article/details/89813585

内建对象

由 ES 标准中定义的对象,在任何ES的实现中都可以使用。比如:Math String Number Function…

数组

数组也是一个对象,他和普通的对象功能类似,也是用来存储一些值的。不同的是,普通对象是使用字符串作为属性名,而数组使用的是数字作为索引。

索引:从0开始的整数就是索引。

  • 数组的存储性能比普通对象要好,所以在开发中经常使用数组来存储一些数据。
  • 使用 typeof 检查一个数组是会返回 object

创建和使用数组

创建数组的第一种方式

var arr = new Array();   // 创建一个数组对象

创建数组的第二种方式
使用字面量来创建数组
var arr = []

可以在创建时就指定数组中的元素
var arr = [1,2,3,4,80];

// 使用字面量来创建一个数组
var arr = ["张三","李四","王五",...];

向数组中添加元素

语法:array[index] = 值;
var arr = new Array();   // 创建一个数组对象
//添加元素
arr[0] = "张三";
arr[1] = "李四";
arr[2] = "王五";

读取数组中的元素

语法: array[index]

注意: 如果读取不存在的索引,不会报错会返回 undefined

var arr = new Array();   // 创建一个数组对象
//读取数组中的元素
arr[0] = "张三";
arr[1] = "李四";
arr[2] = "王五";
console.log("数组中的第一个元素为:" + arr[0]);
console.log("数组中的第二个元素为:" + arr[1]);
console.log("数组中的第三个元素为:" + arr[2]);
console.log("数组中没有的元素:" + arr[3]);   // 返回 undefined

控制台的运行结果
在这里插入图片描述
获取数组的长度
array.length
可以使用length 属性来获取数组的长度(元素的个数)

  • 对于连续的数组,使用 length 可以获取到数组的长度(元素的个数)

  • 对于非连续的数组,使用 length 会获取到数组的最大的索引 +1,尽量不要创建非连续性的数组。

  • 如果修改的 length 大于原长度,则多出的部分会空出来。

  • 如果修改的length小于原长度,则多出的元素会被删除。

  • 向数组的最后一个位置添加元素。

    array[array.length] = 10;

// 创建一个数组
var nameList = ["孙悟空","猪八戒","沙和尚","唐僧"];
console.log("数组的长度为:" + nameList.length);  // 输出数组的长度

控制台的运行结果
在这里插入图片描述

遍历数组

所谓的遍历数组就是将数组中的所有的元素都取出来。

// 创建一个数组
var nameList = ["孙悟空","猪八戒","沙和尚","唐僧"];

//使用 for 循环来遍历数组
for(var i = 0;i < nameList.length;i++){
	console.log("数组中的第 "+ i +"个值为:" + nameList[i]);
}

控制台的运行结果
在这里插入图片描述

数组中的方法

push()

该方法可以向数组的末尾添加一个或多个元素,并返回数组新的长度
可以将要添加的元素作为方法的参数传递,这样这些元素就会自动添加到数组的末尾

// 创建一个数组
var nameList = ["孙悟空","猪八戒","沙和尚","唐僧"];
console.log("数组的长度为 :" + nameList.length);   // 输出数组的长度
console.log("原数组:" + nameList);   // 输出原数组
var newLength = nameList.push("白骨精");  //返回数组新的长度,用一个变量来接收这个值
console.log("数组的新长度为 :" + newLength);   // 输出数组的新长度
console.log("新数组:" + nameList);   // 输出新数组

控制台的运行结果
在这里插入图片描述

pop()

该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回

// 创建一个数组
var nameList = ["孙悟空","猪八戒","沙和尚","唐僧"];
console.log("原数组:" + nameList);   // 输出原数组
var deleteValue = nameList.pop();  //删除数组的最后一个元素
console.log("删除的元素为 :" + deleteValue);   // 输出删除的元素
console.log("新数组:" + nameList);   // 输出新数组

控制台的运行结果
在这里插入图片描述

unshift()

向数组的开头添加一个或多个元素,并返回数组新的长度,向前边插入元素以后,其他的元素索引会依次调整。

// 创建一个数组
var nameList = ["孙悟空","猪八戒","沙和尚","唐僧"];
console.log("数组的长度为 :" + nameList.length);   // 输出数组的长度
console.log("原数组:" + nameList);   // 输出原数组
var newLength = nameList.unshift("观音菩萨","如来佛祖");  //返回数组新的长度,用一个变量来接收这个值
console.log("数组的新长度为 :" + newLength);   // 输出数组的新长度
console.log("新数组:" + nameList);   // 输出新数组

运行结果
在这里插入图片描述

shift()

可以删除数组的第一个元素,并将删除的元素作为返回值返回。

// 创建一个数组
var nameList = ["孙悟空","猪八戒","沙和尚","唐僧"];
console.log("原数组:" + nameList);   // 输出原数组
var deleteValue = nameList.shift();  //删除数组的第一个元素
console.log("删除的元素为 :" + deleteValue);   // 输出删除的元素
console.log("新数组:" + nameList);   // 输出新数组

运行结果,感觉干掉大师兄有点 emm…
在这里插入图片描述

slice()

可以用来在数组中提取指定的元素
需要两个参数

  • 第一个参数表示截取开始的位置的索引(含左不含右)
  • 第二个参数表示截取结束的位置的索引
    第二个参数可以省略不写,此时会截取从开始索引往后的所有元素。
  • 索引可以传递一个负值,如果传递一个负值,则从后往前计算。
  • 该方法不会改变原数组,而是将截取到的元素封装到一个新数组中返回
var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
var newArr = arr.slice(0,3);  // 把徒弟们都提出来,返回一个新的数组,所以定义一个新的变量来接收这个值
console.log(newArr);

运行结果
在这里插入图片描述

splice

可以用于删除数组中的指定元素
参数:
- 第一个参数表示开始位置的索引
- 第二个参数表示删除的数量
- 第三个及以后的参数可以传递一些新的元素,这些元素将会插入到开始位置索引的前边。

注意: 使用 splice会影响到元素组,会将指定元素从原数组中删除,并将被删除的元素作为返回值返回。

// 创建一个数组
var nameList = ["孙悟空","猪八戒","沙和尚","唐僧"];
console.log("原数组:" + nameList);   // 输出原数组
var deleteValue = nameList.splice(1,1);  //从索引1的位置开始删除,删除1个
console.log("删除的元素为 :" + deleteValue);   // 输出删除的元素
console.log("新数组:" + nameList);   // 输出新数组

运行结果
在这里插入图片描述
指定第三个参数

// 创建一个数组
var nameList = ["孙悟空","猪八戒","沙和尚","唐僧"];
console.log("原数组:" + nameList);   // 输出原数组
var deleteValue = nameList.splice(1,1,"红孩儿");  //删除 猪八戒,并将 红孩儿 添加到猪八戒的那个位置。
console.log("删除的元素为 :" + deleteValue);   // 输出删除的元素
console.log("新数组:" + nameList);   // 输出新数组

运行结果
在这里插入图片描述

concat()

可以连接两个或多个数组,并将新的数组返回
该方法不会对 原数组 产生影响

var arr = ["孙悟空","猪八戒"];
var arr2 = ["唐僧","沙和尚"];
var newArr = arr.concat(arr2);  // 连接两个数组
console.log("新数组为:" + newArr);

运行结果
在这里插入图片描述

join()

该方法可以将数组转换为一个字符串
该方法也不会对原数组产生影响,而是将转换后的字符串作为结果返回。
join 中可以指定一个字符串作为参数,该字符串将会成为数组中元素的连接符。如果不指定链接符,则默认使用,作为链接符。

var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];  // 创建一个数组
var result = arr.join(); // 返回一个字符串,不指定分隔符则默认使用 , 分隔
console.log(typeof result);  // 检查一下数据类型
console.log(result);   // 返回的结果

var result1 = arr.join("-"); // 返回一个字符串,指定用 - 分隔
console.log(typeof result);  // 检查一下数据类型
console.log(result1);   // 返回的结果

运行结果
在这里插入图片描述

reverse()

该方法用来反转数组,该方法会直接修改原数组。

var arr = [1,2,3,4,5];  // 创建一个数组
console.log("原数组为:" + arr);  // 输出原数组
console.log("反转后:" + arr.reverse());  // 反转数组

运行结果
在这里插入图片描述

sore()

可以对数组中的元素进行排序,默认会按照 Unicode 编码进行排序。该方法也会直接修改原数组

即使对于纯数字的数组,使用 sort() 方法也会根据 Unicode 编码进行排序。所以对数字进行排序时,也可能会得到一个错误的结果。

自定义排序规则
我们可以在 sort 中添加一个回调函数,来指定排序规则。
回调函数中需要定义两个形参。
浏览器将会分别使用数组中的元素作为实参去调用回调函数
使用哪个元素去调用不确定,肯定的是 在数组中,第一个参数一定在第二个参数前边。
浏览器会根据回调函数的返回值来决定元素的顺序,如果返回一个大于 0 的值,则元素会交换位置。
如果返回一个小于 0 的值,则元素的位置不变。
如果返回 0 则认为两个元素相等,也不交换位置。

如果需要升序排列,则返回 a-b 如果需要降序排列 则返回b-a

sort(function(a,b){
	return a - b;  // 升序排序
});

sort(function(a,b){
	return b - a;  // 降序排序
});

Date (日期时间对象)

在 JS 中,使用 Date 对象来表示一个时间

创建 Date 对象

使用构造函数创建

如果直接使用构造函数来创建一个 Date 对象,则封装称为当前代码执行的时间。

var d1 = new Date();  // 使用构造函数来创建一个 Date 对象
console.log(d1); // 输出当前的时间对象

运行结果
在这里插入图片描述

创建一个指定的对象

需要在构造函数中传递一个表示时间的字符串当做参数。

 // 日期的格式:月/日/年 时:分:秒
var d2 = new Date("06/03/2016 16:28:30");
console.log(d2);  // 输出时间对象

运行结果
在这里插入图片描述

Date 对象的一些常用方法

getDate()

获取当前日期对象是 几号

// 创建一个时间对象  2016年06月03日 16:28:30
var d2 = new Date("06/03/2016 16:28:30");
// 获取几号
var n = d2.getDate();
console.log("那天是:" + n + "号!");

运行结果
在这里插入图片描述

getDay()

获取当前日期对象是 周几
会返回一个 0-6 的值 0 表示周日,1 表示周一

// 创建一个时间对象  2016年06月03日 16:28:30
var d2 = new Date("06/03/2016 16:28:30");
// 获取周几
var day = d2.getDay();
console.log("那天是周:" + day);

运行结果
在这里插入图片描述

getMonth()

可以获取当前时间对象的月份,返回 0-11 之间的值 0 表示 1月,1 表示2月。

// 创建一个时间对象  2016年06月03日 16:28:30
var d2 = new Date("06/03/2016 16:28:30");
// 获取月份
var month = d2.getMonth();
console.log(month + 1 + "月!");  // 获取到月份  + 1 才是中国的月份!

运行结果
在这里插入图片描述

getFullYear()

获取当前日期对象的年份

// 创建一个时间对象  2016年06月03日 16:28:30
var d2 = new Date("06/03/2016 16:28:30");
// 获取年份
var year = d2.getFullYear();
console.log("今年是 " + year + "年");  

在这里插入图片描述

getTime()

获取当前日期对象的时间戳
时间戳指的是从格林威治标准时间的1970年1月1日0时0分0秒到当前日期所花费的毫秒数。1秒 = 1000 毫秒

// 创建一个时间对象  2016年06月03日 16:28:30
var d2 = new Date("06/03/2016 16:28:30");
// 获取年份
var time = d2.getTime();
console.log("从1970年到当前日期对象的时间戳为:" + time);  

运行结果
在这里插入图片描述

// 获取当前的 1970 年到当前的一个时间戳
var time = Date.now();
console.log("当前的时间戳为:" + time);

运行结果
在这里插入图片描述

Math

Math 和其他的对象不同,不是一个构造函数,属于一个工具类,它里边封装了数学运算的属性和方法。

Math.PI

表示圆周率

//定义一个函数,返回圆的面积
// r :表示半径
function area(r){
	return Math.PI * r * r; 
};

//调用这个函数
var result = area(3);  //计算半径为 3 的园的面积
console.log("圆的面积为 : " + result);

运行结果
在这里插入图片描述

abs()

可以用来计算一个数的绝对值

var result = Math.abs(1);  // 计算 1 的绝对值
console.log("绝对值为:" + resiult );

运行结果
在这里插入图片描述

ceil()

可以对一个数进行向上取整,小数位只要有值,就自动向上进1

var a = 5.2;
console.log("原值为:" + a);
console.log("向上取整后为:" + Math.ceil(a));

运行结果
在这里插入图片描述

floor()

可以对一个数进行向下取整,小数部分会别省掉。

var a = 5.99;
console.log("原值为:" + a);
console.log("向上取整后为:" + Math.floor(a));

运行结果
在这里插入图片描述

round()

可以对一个数进行四舍五入取整

var a = 5.5;  // 6
var b = 5.4;  // 5

console.log("原值: a = " + a +",b = " + b);
console.log("四舍五入后: a = " + Math.round(a) +",b = " + Math.round(b));

运行结果
在这里插入图片描述

random()

可以生成一个 0 ~ 1 之间的随机数(不会出现 0,也不会出现 1)

// 生成 10 个 0~1 之间的随机数
for(var i = 0;i < 9;i++){
	console.log(Math.random());
}

运行结果
在这里插入图片描述

// 生成 0~x  之间的随机数
Math.round(Math.random() * x);

// 生成 x~y 之间的随机数
Math.round(Math.random() * (y - x)) + x; 
max()

可以获取多个数之间的最大值

// 定义一个函数,返回数组中最大的值
function max(arr){
	// 定义一个临时变量,存放最大值
	var max = arr[0]; //假设数组的第一个元素是最大值
	for(var i = 0;i < arr.length;i++){
		if(arr[i] > max){  // 如果 arr[i] 的值大于最大值,则他就是最大最
			max = arr[i];
		}
	}
	return max;  // 返回最大值
};

// 创建一个数组
var arr = [32,44,32,12,80,64];

//调用函数,返回最大值,用 result 接收
var result = max(arr);

console.log("数组中的最大值为:" + result);

运行结果
在这里插入图片描述

min()

可以获取多个数中的最小值

// 定义一个函数,返回数组中最小的值
function max(arr){
	// 定义一个临时变量,存放最小值
	var min = arr[0];  // 假设数组的第一个元素是最小值 
	for(var i = 0;i < arr.length;i++){
		if(arr[i] < min){  
			min = arr[i];
		}
	}
	return min;  // 返回最小值
};

// 创建一个数组
var arr = [32,44,32,12,80,64];

//调用函数,返回最小值,用 result 接收
var result = min(arr);

console.log("数组中的最大值为:" + result);

运行结果
在这里插入图片描述

pow()

pow(x,y) 可以返回 x 的y次方(次幂)

// 输出 2 的三次方
console.log("2 的三次方为:" + Math.pow(2,3));

运行结果
在这里插入图片描述

sqrt()

对一个数进行开方运算

// 36 的开方
console.log("36 的开方为:" + Math.sqrt(36));

运行结果
在这里插入图片描述

包装类

在JS 中为我们提供了三个包装类,通过这三个包装类可以将基本数据类型的数据转换为 对象

  • String() 可以将一个基本数据类型的字符串,转换为对象。
  • Number() 可以将一个基本数据类型的数值,转换为一个 Number 对象
  • Boolean() 可以将一个基本数据类型的 boolean 转换为 Boolean 对象

注意: 在实际应用中不会使用基本数据类型的对象。
如果使用基本数据类型的对象做一些比较的时候,可能就会有一些不可预期的结果。

字符串的属性和方法

length 属性

可以获取字符串的长度

var str = "hello,this is a String.";
var length = str.length;  // 获取字符串的长度,并存放到变量 length 里
console.log("字符串的长度为:" + length);

运行结果
在这里插入图片描述

charAt()

可以返回字符串中指定位置的字符(根据索引获取指定的字符)
索引从 0 开始

var str = "hello,this is a String.";
var result = str.charAt(6);  //  t 
console.log("第 6 个字符为:" + result);

运行结果
在这里插入图片描述

charCodeAt()

获取指定位置字符的字符编码(Unicode 编码)

var str = "hello,this is a String.";
var result = str.charCodeAt(6);  //   116
console.log("第 6 个字符Unicode编码为:" + result);

运行结果
在这里插入图片描述

fromCharCode()

可以根据字符编码获取字符(Unicode)

console.log(String.fromCharCode("116"));

运行结果
在这里插入图片描述

concat()

可以连接两个或多个字符串

var str = "我是第一个字符串";
console.log(str.concat("我是第二个字符串"));

运行结果
在这里插入图片描述

indexOf()

该方法可以检索一个字符串中是否含有指定的内容

  • 如果字符串中含有该内容,则会返回其第一次出现的索引
  • 如果没有找到指定的内容则返回 -1
  • indexof()可以接收 的第二个参数,指定开始查找的位置。
var str = "hello,this is a String.";
console.log(str.indexOf("is"));   // 8

运行结果
在这里插入图片描述

lastIndexOf()

该方法的作用和 indexof()一样,不同的是 indexof是从前往后找,而lastIndexof是从后往前找。
同样也可以指定开始查找的位置。

var str = "hello,this is a String.";
console.log(str.lastIndexOf("is"));   // 11

运行结果
在这里插入图片描述

slice()

可以从字符串中截取指定的内容,不会影响原字符串,而是将截取的内容返回。
参数:

  1. 开始位置的索引(包括开始位置)
  2. 结束位置的索引(不包括结束的位置)
    第二个参数可以省略,如果省略,则会截取后边所有的值。
  3. 也可以传递一个负数作为参数 - 1, 表示倒数第一个
var str = "hello,this is a String.";
var result = str.slice(6,);  // 从第 6 个字符开始截取到最后
console.log(result);

运行结果
在这里插入图片描述

substring()

可以用来截取一个字符串,和slice() 类似
也是有3个参数

  1. 表示开始位置的索引(包括开始位置)
  2. 表示结束位置的索引(不包扩结束位置)
  3. 而且会自动调整参数的位置,如果第二个参数小于第二个,则自动交换位置
    注意: 但是和 slice() 不同的是,这个方法不能传递一个复制作为参数,如果传递了一个负值,则默认使用 0
var str = "hello,this is a String.";
var result = str.substring(6,);  // 从第 6 个字符开始截取到最后
console.log(result);

控制台运行结果
在这里插入图片描述

splite()

可以将一个字符串拆分为数组。
需要一个字符串作为一个参数,将会根据该字符串进行拆分数组。
如果参数是一个 “” 则会将每个字符都拆分为数组中的元素。

var str = "大家好,我是孙悟空";
var arr = str.split("");
console.log(arr.length);  // 输出数组的长度
// 遍历数组
for(var i = 0;i < arr.length;i++){
	console.log(arr[i]);
}

在这里插入图片描述

toUpperCase()toLowerCase()

toUpperCase() 一个字符串转换为大写并返回。
toLowerCase() 一个字符串转换为小写并返回。

var str1 = "ABCDEFG";
var str2 = "abcdefg";
console.log(str1.toLowerCase());
console.log(str2.toUpperCase());

运行结果
在这里插入图片描述

正则表达式

正则表达式用于定义一些字符串的规则。计算机可以根据正则表达式来检查一个字符串是否符合规则,或者将字符串中符合规则的内容提取出来。

创建和使用正则表达式

使用构造方法创建正则表达式的对象
使用 typeof检查正则对象会返回 object

在构造函数中可以传递一个“匹配模式”当做第二个参数,可以是 i,可以是 g

i 表示忽略大小写
g 表示全局匹配模式

语法:
var 变量 = new RegExp("正则表达式","匹配模式");
// 创建一个正则表达式的对象
var reg = new RegExp();
console.log(typeof reg);  //检查一下 数据类型	

在这里插入图片描述
使用字面量创建正则表达式

语法: var 变量  = /正则表达式/匹配模式
// 使用字面量创建一个正则表达式
var reg = /abc/i;

正则表达式的测试方法
test()使用这个方法可以用来检查字符串是否符合正则表达式的规则,如果符合则返回 true 否则返回false

var str = "this is a regExp";
// 创建一个 正则表达式,匹配是否含有字母 a
var reg = /a/;
console.log(reg.test(str));

在这里插入图片描述

var str = "this is a regExp";
// 创建一个 正则表达式,匹配是否含有字母 a
var reg = /ccc/;
console.log(reg.test(str));

在这里插入图片描述

正则表达式的语法

使用|表示或者的意思
[] 里边的内容也是 或的关系
[a-z]表示任意的小写字母
[A-Z]表示任意的大写字母
[A-z]表示任意字母
[^ ]除了
[0-9]表示任意数字

字符串和正则相关的方法

split()

可以将一个字符串拆分为一个数组
方法中可以传递一个正则表达式作为参数,这样方法就会根据正则表达式去拆分字符串。
例如: split(/[A-z]/);
这个方法即使不指定全局匹配,也会全部拆分。

var str = "大家好a,我是b孙悟空C,大家都叫d我E齐天大圣";
var arr = str.split(/[a-z]/i);  // 按照字母拆分字符串,i 表示不区分大小写
console.log(arr.length);
// 遍历数组
for(var i = 0;i < arr.length;i++){
	console.log(arr[i]);
}

运行结果
在这里插入图片描述

search()

可以搜索字符串中是否含有指定内容

  • 如果搜索到指定内容,则会返回第一次出现的索引,如果没有搜索到,则返回-1
  • 可以接受一个正则表达式作为一个参数,然后根据正则表达式来检索字符串。
  • 只会查找第一个,即使设置全局匹配也没有用。
var str = "大家好,我是孙悟空,大家都叫我齐天大圣孙悟空.";
var result = str.search(/孙悟空/);   // 匹配孙悟空
console.log("索引为:" + result);

运行结果
在这里插入图片描述

match()

可以根据正则表达式从一个字符串中将符合条件的 内容提取出来。
默认情况下mathc() 只会找到第一个符合条件的内容,找到以后就停止检索,我们可以设置正则表达式为 全局匹配模式,这样就会匹配到所有的内容。
可以为一个正则表达式设置为多个匹配模式,且顺序无所谓。 (gi / ig)

var str = "1c2b3C4d5E6f7g8H9i";
var result = str.match(/[a-z]/ig);  // 提取所有的字母 , 不区分大小写,全局匹配
console.log("str: " + str);
console.log("result: " + result);

运行结果
在这里插入图片描述

replace()

可以将字符串的指定内容替换为新的内容。
需要两个参数
第一个参数表示被替换的内容,可以接受一个正则表达式
第二个参数表示新的内容
默认只会替换第一个,如果需要全部替换则需要指定 g 全局匹配。

var str = "大家好,我是孙悟空,大家都叫我孙悟空";
var result = str.replace(/孙悟空/g,"唐僧");  // 把孙悟空 替换成 唐僧
console.log("结果为:" + result);

运行结果
在这里插入图片描述

量词

通过量词可以设置一个内容出现的次数,量词只对前边的一个内容起作用

/a/出现一次
/a{3}/ {n}正好出现 n 次

{m,n} 出现 m 到 n 次
{m,} m次以上

+ 至少一个,相当于{1,}
* 0个或多个,相当于{0,}
? 0个或1个,相当于{0,1}

^ 表示开头 (^a表示以a开头)
$ 表示结尾 (a$表示以a结尾)
如果在一个字符串中同时使用 ^ $则要求字符串完全符合正则表达式。

.表示任意字符
在正则表达式中使用/表示转义字符

\.表示 .
\\ 表示 \
注意:使用构造函数时,由于参数是一个字符串,而 \ 是字符串的转义字符,如果要使用 \ 则需要使用 \

\w 表示任意字母数字和_ (相当于[A-z0-9_])
\W 表示任意除了字母数字和_ (相当于 [A-z0-9_])
\s 表示空格
\S 除了空格
\b 单词边界 (独立的单词)
\B 除了单词边界
\d 表示任意数字 (相当于 [0-9])
\D 除了数字 (相当于[^0-9])

猜你喜欢

转载自blog.csdn.net/actionActivity/article/details/89813585
今日推荐