JS中基础api的使用

最新推荐文章于 2024-04-19 12:01:59 发布
最新推荐文章于 2024-04-19 12:01:59 发布
阅读量1.6k 收藏 3
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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获取数据的三种方法（2022.7.25）
I have a dream, here my dreams come true!
07-25 4万+
js调用后台API进行http请求的三种方法（get-post)
js如何调用api接口数据,javascript调用api接口
chatgpt001的博客
11-30 6999
随着云计算分布式微服务技术的发展，现有网络项目大都基于前后端分离的技术手段实施，一方面是便于缓解后台服务器的压力，充分利用各台服务节点的计算和存储资源，尽可能地提高服务器性能；另一方面可提高服务的可靠性、容灾能力，以便在某服务节点上服务器甚至节点崩溃的情况下得以对该服务快速有效地进行替换或恢复，表现为极强的修复能力（注：先进制造技术的发展和充足的材料供应能力使得时间、价格方面的维修成本不断高于替换成本，让废旧品及时得到回收利用再生产，从而减少繁琐的维修过程，以便缩短维修时间，即能换不修原则）。在Web。
JavaScript 对象所有API解析【2024版】
最新发布
2401_84097436的博客
04-19 842
后记总结一下这三次面试下来我的经验是：一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！多刷面经！
js简单API的使用
ab_15的博客
03-21 279
// 1、处理一下数组： // var arr=["userName=admin","password=123456","sex=男","address=武汉"] // 转化为：输出结果 // （1） update from table(userName='admin',password='123456',sex='男',address='武汉') 两种方法： 第一种：简单的拆分 //创建字母变量、数字变量、新变量 var w...
在SpringBoot中Java调用JS，实现即配即用API
weixin_38390086的博客
07-03 1922
但是java语言有个特性，必须进行编译，然后才能执行，但是javascript脚本能直接执行，所以我们的每个流程通过js实现核心逻辑，并将js配置到数据库，即可实现即配即用的能力。这样我就可以通过FlowBean的配置在这4个流程中进行调用，并且流程可重复执行，只要配置不一样就会获取不一样的结果。数据校验一般都是给定值，给定校验规则，如果符合要求则校验通过，否在校验不通过抛出异常。以上4个实现对应4个流程，每个流程依赖config配置，我们再定义一个流程配置对象。不知各位元芳怎么看？
JS数组API
SY_and_J的博客
03-21 234
1、concat 合并数组，有返回值的，返回的是一个合并之后的新数组，对原数组没有影响 2、push 向数组的尾部添加项,有返回值,返回的是添加项之后的数组长度，会改变原数组，如果想同时添加的多个项，用逗号隔开即可 3、pop 删除数组中的最后一个,有返回值，返回的是删除的项，会改变原数组 4、unshift 向数组的头部添加 返回的是添加之后数组的长度，会改变原数组 5、shift 删除数组中的第一个 返回的是删除的项，改变原数组 6、toString 将数组转换为字符串,不会改变原
JS人脸识别(face-api)
02-01
面部检测是face-api.js的基础功能，它能够识别图像或视频流中的人脸位置。library使用SSD（Single Shot MultiBox Detector）模型进行实时面部检测。SSD是一种高效的物体检测算法，能在单一图像中检测多个目标并输出...
ArcGIS API for Javascript 开发基础教程中文版
11-02
这个基础教程中文版为初学者提供了全面的学习资源，帮助他们快速掌握在Web环境中使用ArcGIS API进行地图开发的基本技能。 **1. ArcGIS API的核心概念** - **地图对象(Map)**：ArcGIS API中的核心对象，用于存储和...
ThreeJS-Notes-doc中文api.zip
11-01
ThreeJS 是一个基于WebGL的JavaScript库，用于在Web浏览器中创建3D图形。这个"ThreeJS-Notes-doc中文api.zip"压缩包包含了ThreeJS的中文API文档，对于学习和理解ThreeJS的开发者来说，是一份非常有价值的资源。Three...
javascript API 中文离线手册(chm版)
05-18
JavaScript API 中文离线手册是前端开发者的重要参考资料，它涵盖了JavaScript这门广泛使用的开发语言的各个方面，包括ECMAScript标准、DOM操作、BOM（浏览器对象模型）以及各种JavaScript库和框架的API。...
ArcGIS API for JavaScript 4.22版 API+SDK
03-10
ArcGIS API for JavaScript用于构建高性能的...ArcGIS API for JavaScript整个体系构建与Dojo基础之上，而Dojo是一个JavaScript实现的开源工具包，其基本语法、使用方法大家可以参考Dojo官方网站的相关说明和示例代码。
js调用百度翻译api实例代码
11-07
js调用百度翻译api实例代码
vfp 调用接口取数据_历史上的今天 API 接口调用与请求方法，免费数据接口
weixin_40004081的博客
12-14 611
历史上的今天 API 接口，可以显示所有的历史上的今天的著名事件，也可以选择输入一条信息，每次刷新网页都会带来一个新的信息，只需要输入下方的请求地址即可。可以直接调用该接口，除此之外也可以调用本 API 接口生成属于自己的 API 接口。# 历史上的今天API请求方式 #Method: GET/POST# 请求地址 #https://api.ooopn.com/history/api.php# 请...
JavaScript 调用 Windows Win32 API
tan_kaishuai的专栏
08-22 6036
JavaScript中调用WindowsWin32 API 首先需要下载通用库：win32exts for JavaScript： https://github.com/tankaishuai/win32exts_for_JavaScript 将win32exts_dll.dll 放入 搜索目录目录下注册即可。仅有此一个文件。 Regsvr32 /s win32exts_d...
如何用js调用百度地图api接口
热门推荐
qq_42181069的博客
05-25 1万+
首先，依然是将效果图给大家看一下： 操作步骤： 1、先百度搜索百度地图api 2、登录进去，找到javascript API，下载下来 3、然后点击控制台，点应用，新建一个应用，然后就会有一个api 4、在javascript页面有很多功能，大家可以根据自己的需求选择，这里我选取的就是地图上那个红点，然后还有就是默认的坐标是北京的经纬度，大家可以自己...
js调用百度地图API
你猜的博客
03-16 6915
javacript 百度地图API
js原始类型调用api时的过程
oXiangZuoZuo12345的博客
04-18 155
js原始类型调用api时的过程时 原始类型本身不具备有任何功能，举例子 var n = 345.455；（n是原始类型） n.toFixed(2) = 345.46; 首先用tpyeOf 判断n的类型，是number， 引擎会创建Number包装类型对象，然后 new Number(n).toFixed(2)=345.46,接着释放 new Number(n) ...
HTML5+app开发学习之使用JS调用原生API篇
cug-jdc的博客
11-03 2859
概述 Native.js技术，简称NJS，是一种将手机操作系统的原生对象转义，映射为JS对象，在JS里编写原生代码的技术。 如果说Node.js把js扩展到服务器世界，那么Native.js则把js扩展到手机App的原生世界。 HTML/JS/Css全部语法只有7万多，而原生语法有几十万，Native.js大幅提升了HTML5的能力。 NJS突破了浏览器的功能限制，也不再需要像Hybrid那样由原生语言开发插件才能补足浏览器欠缺的功能。 NJS编写的代码，最终需要在HBuilder里打包发行为App安装包
JS中常用的API（Array）
qq_52931701的博客
08-25 228
JS中常用的API（Array）小整理 new Set() 数据去重 const arr = [3,4,1,5,7,6,8,4,2,9,5,6,8] let a = new Set(arr) console.log(a);//3,4,1,5,7,6,8,2,9 sort() 对数组元素进行排序 const arr = [3,4,4,5,4,6,5,7] console.log(arr.sort((a,b)=> a-b))//[3, 4, 4, 4, 5, 5, 6, 7] console.lo
Node.js v10中文API参考手册
Node.js是基于Chrome V8引擎的JavaScript运行环境，它允许开发者在服务器端使用JavaScript进行开发。这个中文API文档是针对v10版本的，提供了丰富的信息，便于国内开发者理解和使用Node.js的核心功能。 1. **assert...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值