JS中基础api的使用

最新推荐文章于 2024-07-26 11:41:15 发布

Haikin Tei

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量1.6k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_42683507/article/details/117807237

版权

在JS编程中，我们经常会对于一些数据进行处理，比如对数字内数字的长度进行改变，切割，分开字符串等等。
这些工作基础JS中包含了一些API 可以给大家进行相关的操作。

1、“ .concat() ” 合并数组
此方法将两个不同的数组进行合并，保持原有的数组不变，返回一个新的数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>API</title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var arr_one=[10,20,30];
		var arr_two=[40,50,60];
		var first=arr_one.concat(arr_two);
		var second=arr_two.concat(arr_one);
		var third=arr_one.concat(arr_one);
		console.log('arr_one的值：'+arr_one);
		console.log('arr_two的值：'+arr_two);
		console.log('first的值：'+first);
		console.log('second的值：'+second);
		console.log('third的值：'+third);
	</script>
</html>

输出如下：
在这里插入图片描述
输出情况分析：
使用完 .concat（）后原来的两个函数没有变化，新定义一个变量后输出合并后的数组，相同的数组可以合并，但是数组不能和变量合并。

2、“ .typeof() ” 查询变量类型
这个API用于查询当前的数据类型是什么状态。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>API</title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var arr=[10,20,30];
		var arr_string=['a','b','c'];
		var num=12;
		var string='string';
		var ber=true;
		var obj={k:15};
		var nul=null;
		var aki=undefined;
		console.log('arr的数据类型是：'+typeof(arr));
		console.log('arr_string的数据类型是：'+typeof(arr_string));
		console.log('num的数据类型是：'+typeof(num));
		console.log('string的数据类型是：'+typeof(string));
		console.log('ber的数据类型是：'+typeof(ber));
		console.log('obj的数据类型是：'+typeof(obj));
		console.log('nul的数据类型是：'+typeof(nul));
		console.log('aki的数据类型是：'+typeof(aki));
	</script>
</html>

输出结果如下：
在这里插入图片描述
输出分析：
这里的输出可以当做是对于数据类型的理解，ES5中包含的类型都在这里了。

3、“ .join() ” 把数组中的所有元素放入一个字符串
把数组中的所有元素放入一个字符串，最后形成的字符串可以再进行处理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>API</title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var arr=[10,20,30,40,50];
		var str=arr.join('');
		var str_1=arr.join('$');
		console.log('str的值：'+str);
		console.log('str_1的值：'+str_1);
	</script>
</html>

输出如下：

在这里插入图片描述

输出分析：
.join（）方法一般情况就直接转为字符串了，如果在括号内填写相关符号的话，那意思就是根据相关的符号进行分隔。

4、“ .push() ” 数组末尾添加新的元素
在数组后面添加新的元素，单个元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>API</title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var arr=[10,20,30,40,50];
		var x=100;
		var num=arr.push(x);
		console.log('arr的原数组：'+arr);
		console.log('num的值：'+num);
	</script>
</html>

输出如下：
在这里插入图片描述
输出分析：
.push（）方法原本的数组将会有所改变，会生成添加后的新数组，此外返回值为该新数组的长度。

5、“ .unshift() ” 数组头部添加新的元素
数组开头添加的方法unshift()。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>API</title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var arr=[10,20,30,40,50];
		var x=100;
		var num=arr.unshift(x);
		console.log('arr的原数组：'+arr);
		console.log('num的值：'+num);
	</script>
</html>

输出如下：
在这里插入图片描述
输出分析：
.unshift（）方法原本的数组将会有所改变，会生成添加后的新数组，此外返回值为该新数组的长度。

6、“ .pop() ” 数组尾部删除元素

在数组的末尾删除一个元素。数组会有变化，返回值为删除的那个值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>API</title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var arr=[10,20,30,40,50];
		var num=arr.pop();
		console.log('arr的原数组：'+arr);
		console.log('num的返回值：'+num);
	</script>
</html>

输出如下：
在这里插入图片描述
7、“ .shift() ” 数组头部删除元素

在数组的头部删除一个元素。数组会有变化，返回值为删除的那个值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>API</title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var arr=[10,20,30,40,50];
		var num=arr.shift();
		console.log('arr的原数组：'+arr);
		console.log('num的返回值：'+num);
	</script>
</html>

输出如下：
在这里插入图片描述
8、“ .splice() ” 增删改插任意一个元素在任意的位置

splice功能十分的强大，能够处理多种操作，下面我们来看下基本的位置和语法。
arr.splice(需要操作元素索引值，需要删除的数量，需要新添加的元素，……)。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>API</title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//删除操作
		var arr=[10,20,30,40,50,60,70,80,90];//原数组
		var del=arr.splice(2,1);//删除
		console.log('arr的原数组删除后情况：'+arr);
		console.log('del返回的值：'+del);
		
		//增加操作
		var arr=[10,20,30,40,50,60,70,80,90];
		var add=arr.splice(3,0,1,2,3);
		console.log('arr的原数组增加后情况：'+arr);
		console.log('add返回的值：'+add);
		
		//修改操作
		var arr=[10,20,30,40,50,60,70,80,90];
		var fix=arr.splice(2,1,5);
		console.log('arr的原数组修改后情况：'+arr);
		console.log('fix返回的值：'+fix);
	</script>
</html>

输出结果：
在这里插入图片描述

8、“ .reverse() ” 数组元素顺序倒置

这个方法可以将数组中的元素倒置过来。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>API</title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var arr=[10,20,30,40,50,60,70,80,90];
		var rev=arr.reverse();
		console.log('arr原数组的值：'+arr);
		console.log('rev的值：'+rev);
		console.log(arr);
		console.log(rev);
	</script>
</html>

输出情况：
在这里插入图片描述
9、“ .indexOf() ” 判断数组中是否含有指定的元素
这个方法如果含有相关的话，会返回第一四出现时的索引值，如果没有会返回-1 这个方法也经常被用来处理数组去重。
lastIndexOf()返回最后一次出现的索引值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>API</title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var arr=[10,20,20,40,50,60,70,70,90];
		var fin=arr.indexOf(20);
		var unfin=arr.indexOf(100);
		var lastfin=arr.lastIndexOf(70)
		console.log('找到的第一个元素的下标：'+fin);
		console.log('找不到的元素下标：'+unfin);
		console.log('找到的最后一次出现的值的下标：'+lastfin);
	</script>
</html>

在这里插入图片描述

Haikin Tei

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS中基础api的使用

在JS编程中，我们经常会对于一些数据进行处理，比如对数字内数字的长度进行改变，切割，分开字符串等等。这些工作基础JS中包含了一些API 可以给大家进行相关的操作。1、“ .concat() ” 合并数组此方法将两个不同的数组进行合并，保持原有的数组不变，返回一个新的数组<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>API</title>
复制链接

扫一扫