JS 数组常用函数（数组合并、数组转字符串、顺序反转、范围选择、排序、插入数据、删除数据）

已于 2022-08-24 10:50:55 修改
阅读量485 收藏 2
点赞数
分类专栏： HTML / JS / PHP 文章标签： javascript 原型模式 开发语言
于 2020-09-05 11:34:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012206617/article/details/108416629
版权

创建数组

var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";

数组属性

属性描述
constructor返回创建数组对象的原型函数。
length设置或返回数组元素的个数。
prototype允许你向数组对象添加属性或方法。

Array 对象方法

方法描述
concat()连接两个或更多的数组，并返回结果。
copyWithin()从数组的指定位置拷贝元素到数组的另一个指定位置中。
entries()返回数组的可迭代对象。
every()检测数值元素的每个元素是否都符合条件。
fill()使用一个固定值来填充数组。
filter()检测数值元素，并返回符合条件所有元素的数组。
find()返回符合传入测试（函数）条件的数组元素。
findIndex()返回符合传入测试（函数）条件的数组元素索引。
forEach()数组每个元素都执行一次回调函数。
from()通过给定的对象中创建一个数组。
includes()判断一个数组是否包含一个指定的值。
indexOf()搜索数组中的元素，并返回它所在的位置。
isArray()判断对象是否为数组。
join()把数组的所有元素放入一个字符串。
keys()返回数组的可迭代对象，包含原始数组的键(key)。
lastIndexOf()搜索数组中的元素，并返回它最后出现的位置。
map()通过指定函数处理数组的每个元素，并返回处理后的数组。
pop()删除数组的最后一个元素并返回删除的元素。
push()向数组的末尾添加一个或更多元素，并返回新的长度。
reduce()将数组元素计算为一个值（从左到右）。
reduceRight()将数组元素计算为一个值（从右到左）。
reverse()反转数组的元素顺序。
shift()删除并返回数组的第一个元素。
slice()选取数组的一部分，并返回一个新数组。
some()检测数组元素中是否有元素符合指定条件。
sort()对数组的元素进行排序。
splice()从数组中添加或删除元素。
toString()把数组转换为字符串，并返回结果。
unshift()向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()返回数组对象的原始值。

数组prototype的利用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body>

<p id="demo">单击按钮创建一个数组,调用 ucase（）方法, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<script>
Array.prototype.myUcase=function(){
	for (i=0;i<this.length;i++){
		this[i]=this[i].toUpperCase();
	}
}
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.myUcase();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

合并两个数组 - concat()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body>
	
<script>
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = hege.concat(stale);
document.write(children);
</script>
	
</body>
</html>

合并三个数组 - concat()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body>

<script>
var parents = ["Jani", "Tove"];
var brothers = ["Stale", "Kai Jim", "Borge"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(brothers, children);
document.write(family);
</script>

</body>
</html>

用数组的元素组成字符串 - join()（数组转字符串）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body>

<p id="demo">点击按钮将数组作为字符串输出。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	var x=document.getElementById("demo");
	x.innerHTML=fruits.join();
}
</script>

</body>
</html>

删除数组的最后一个元素 - pop()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body>

<p id="demo">单击按钮删除数组的最后一个元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.pop();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

 数组的末尾添加新的元素 - push()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body>

<p id="demo">单击按钮给数组添加新的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.push("Kiwi")
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

将一个数组中的元素的顺序反转排序 - reverse()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body>

<p id="demo">单击按钮将数组反转排序。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.reverse();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

删除数组的第一个元素 - shift()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body>

<p id="demo">单击按钮删除数组的第一个元素。</p>
<p id="demo2"></p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	var delell = fruits.shift();
	var x=document.getElementById("demo");
	x.innerHTML= '删除后数组为：' +  fruits;
	document.getElementById("demo2").innerHTML= '删除的元素是：' +  delell;
}
</script>

</body>
</html>

从一个数组中选择元素 - slice()（范围选择）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body>

<p id="demo">点击按钮截取数组下标 1 到 2 的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
	var citrus = fruits.slice(1,3);
	var x=document.getElementById("demo");
	x.innerHTML=citrus;
}
</script>

</body>
</html>

数组排序（按字母顺序升序）- sort()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body>

<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.sort();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

数字排序（按数字顺序升序）- sort()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body>

<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var points = [40,100,1,5,25,10];
	points.sort(function(a,b){return a-b});
	var x=document.getElementById("demo");
	x.innerHTML=points;
}
</script>

</body>
</html>

数字排序（按数字顺序降序）- sort()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body>

<p id="demo">单击按钮降序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var points = [40,100,1,5,25,10];
	points.sort(function(a,b){return b-a});
	var x=document.getElementById("demo");
	x.innerHTML=points;
}
</script>

</body>
</html>

在数组的第2位置添加一个元素 - splice()（插入数据）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body>

<p id="demo">点击按钮向数组添加元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.splice(2,0,"Lemon","Kiwi");
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

转换数组到字符串 -toString()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body>

<p id="demo">点击按钮将数组转为字符串并返回。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	var str = fruits.toString();
	var x=document.getElementById("demo");
	x.innerHTML= str;
}
</script>

</body>
</html>

在数组的开头添加新元素 - unshift()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body>

<p id="demo">单击按钮在数组中插入元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.unshift("Lemon","Pineapple");
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>
<p><b>注意:</b> unshift()方法不能用于 Internet Explorer 8 之前的版本，插入的值将被返回成<em> undefined </em>。</p>

</body>
</html>

墨痕诉清风
关注
专栏目录
【Js】数组(包括es6)方法大集合
m0_57135756的博客
04-07 3138
文章目录数组方法（包括es6）1、arr.push()2、arr.pop()3、arr.shift()4、arr.unshift()5、arr.splice(i,n)6、arr.slice(start,end)7、arr.concat()8、arr.join()9、arr.sort()10、arr.reverse()11、arr.forEach(callback)12、arr.map(callback)13、arr.filter(callback)14、arr.every(callback)15、arr.s
js判断数组中是否存在某个元素（四种方法）
热门推荐
蜗牛~~
10-26 13万+
法一：利用indexOf 不存在返回-1，存在返回第一次出现的索引 // js检查数组中是否包含某个元素 // 法一 indexOf var arr = [100,20,50,58,6,69,36,45,78,66,45] if(arr.indexOf(66)==-1){ console.log("不存在") }else{ console.log("存在,索引是：",arr.indexOf(6.
第十课--Array（数组） 对象与Boolean（布尔） 对象
阅读之后，对你有帮助，那就点个赞再走吧
09-16 1041
1.Array（数组） 对象 var arr = new Array(); arr[0] = 1; arr[1] = 1; arr[2] = 1; console.log(arr) arr['a'] = 1; arr['b'] = 1; arr['c'] = 1; 数组属性 属性 描述 constructor 返回创建数组对象的原型函数。 length 设...
JS数组是否包含某个元素
最新发布
勤修方可得道成仙
05-21 1345
最简单且最直接的方法来检查数组是否包含某个元素。在JavaScript中，有多种方法可以检查一个数组是否包含某个元素。方法是ES6中引入的一个新方法，用于判断数组是否包含某个元素，并返回布尔值。方法返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回-1。如果你的代码需要在较旧的JavaScript环境中运行，那么可以使用。
js 数组包含
diannianyong4129的博客
11-19 363
function(arr,element){ return new RegExp('(^|,)'+element.toString()+'(,|$)').test(arr.toString()); } 转载于:https://www.cnblogs.com/zhudongchang/p/4978452.html
js数组常见操作及数组与字符串相互转化实例详解
10-23
- `arrayObj.sort()`：默认按字符串顺序排序数组元素，可通过比较函数自定义排序规则。 8. **数组元素的字符串化** - `arrayObj.join(separator)`：将数组元素连接成字符串，元素间用separator分隔。 - `...
JS数组(Array)处理函数整理
10-25
这里我们着重讨论JavaScript数组的一些常见处理函数，这些函数可以帮助我们高效地操作和管理数组中的数据。 1. `concat()`：此函数用于连接两个或多个数组，并返回一个新的数组。它不会改变原始数组。例如，`arr....
JavaScript数组常用方法
12-12
JavaScript数组是编程中非常基础且重要的数据结构，用于存储一系列有序的数据。在JavaScript中，有多种方法用于操作和处理数组，这些方法可以帮助我们更高效地管理数据。以下是一些常用的JavaScript数组方法及其详解...
谈谈JavaScript数组常用方法总结
10-20
本文将深入探讨JavaScript数组的一些常用方法，帮助开发者更好地理解和应用这些方法。 1. **增加数据** - `push()` 方法用于向数组末尾添加一个或多个元素，并返回新的数组长度。例如： ```javascript var arr =...
js数组的包含方法
dianyinlong4979的博客
04-17 318
if (typeof Array.indexOf !== 'function') { Array.prototype.indexOf = function (args) { var index = -1; for (var i = 0, l = this.length; i < l; i++) { ...
JS实现判断数组是否包含某个元素示例
12-11
本文实例讲述了JS实现判断数组是否包含某个元素。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> [removed] Array.prototype.S = String.fromCharCode(2); Array.prototype.in_array = function (e) { var r = new RegExp(this.S + e + this.S); return
JS - 判断数组是否包含某个元素
技术共享，共同进步！
01-27 509
js判断数组是否包含某个元素 // 判断数组是否包含某个元素 Array.prototype.contains = function (val) { for (var i =0; i < this.length; i++) { if (this[i] == val) { return true; } } return false; }; var arr = [1, 2, 3, 4, "a"] var res = arr.
js判断【数组】中是否包含某个元素的方法
一抹茶-CSDN的博客
04-20 4321
1.indexOf方法 let arr = [2,3,4]; let res = arr.indexOf(2) // 验证是否包含：2 console.log(res) // 结果：0 let res2 = arr.indexOf(3) // 验证是否包含：3 console.log(res2) // 结果：1 let res3 = arr.indexOf(4) // 验证是否包含：4 console.log(res3) // 结果：2 let res4 = arr.indexOf(5) // 验证
js 判断数组是否包含某元素
一个有思想的新时代农民工的博客
11-16 2734
方法1、query或者zepto $.inArray(value,array)$.inArray(value,array) 可能产生的一个引用类型的问题，所以用的时候要注意 比如：var testarr=[{"a":"0"},{"b":"1"},{"c":"2"}]; alert($.inArray({"a":"0"},testarr)); //总是返回-1正常写法：var obj={'m':
js-数组-包含-1.1
caishu1995的博客
04-02 737
今天发现了一个js的包含的函数。是我之前没好好学么，怎么感觉第一次见？ 在ES6中，有includes。这个单词应该不陌生。用法就更简单了 <!DOCTYPE html> <html> <head> <title>包含</title> </head> <body> <input id...
JS 常用数组总结
zhoujingx的博客
03-07 361
数组（Array） - 数组也是个对象 - 她和我们普通对象类似，也是用来存储游戏欸值的 - 不同的是普通对象是使用字符串作为属性名的 - 数组是使用数字来作为索引来操作对象的 - 索引是从0开始开始的整数 -数组的存储性能 比普通对象瑶好 再开发中 经常使用数组来存储一些数据 */ // var obj = new...
编写js扩展方法实现判断一个数组中是否包含某个元素
code旅行者的专栏
03-11 7067
在C#语法中判断集合是否包含某个元素可以使用Contains方法，但是类似的问题在javascript中要怎么处理呢，js中没有Contains方法。 我们可以利用js的原型扩展来封装一个我们自己的Contains方法。 js代码：           $(function () {             Array.prototype.contains = functio
【JS】数组详解
owo_ovo的博客
03-29 1136
js数组详解以及分类
js 判断数组中是否包含某个元素（转载）
firstcode666的博客
11-16 2469
来源：https://www.cnblogs.com/yunshangwuyou/p/10539090.html 方法一：array.indexOf(item,start)：元素在数组中的位置,如果没与搜索到则返回 -1。 参数 描述 item 必须。查找的元素。 start 可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。 如省略该参数，则将从字符串的首字符开始检索。 ..
JavaScript数据操作：字符串、数组与对象方法解析
"这篇文档是关于数据操作的基础知识整理，主要涵盖了字符串操作和数组操作，同时也涉及到了对象的属性处理。这些内容在编程，特别是使用Vue框架和数据库操作时经常用到。" 在编程中，字符串是基础的数据类型之一，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

墨痕诉清风

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值