javascript中数组常用的方法和属性
前言
在javascript中，数组是一种非常重要的数据类型，我们时常会和它打交道，最近在开发项目中频繁的使用到数组，但是自己对数组的众多方法已经是非常模糊了，为了方便自己以后能够更好的使用数组中的属性和方法，在此记录一下。
数组常用的属性和方法
常用属性
Array.length:返回数组的大小
常用方法
Array.pop():删除并返回数组的最后一个元素
Array.push():向数组的结尾添加元素
Array.shift():将元素移除数组
Array.unshift():向数组头部添加元素
Array.join():将数组元素连接起来以构成一个字符串
Array.concat():连接数组
Array.reverse():将数组进行反转
Array.sort():将数组进行排序
Array.slice():返回数组的一部分
Array.splice():插入，删除或替换数组中的元素
Array.toString():将数组转换为一个字符串
Array.map():对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组
Array.forEach():对数组中的每一项运行给定函数，这个方法没有返回值
Array.filter():对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组
Array.some():对数组中的每一项运行给定函数，如果该函数对任一项返回true,则返回true
Array.every():对数组中的每一项运行给定函数，如果该函数对每一项都返回ture,则返回true
Array.isArray():判断是否是数组
Array.reduce():迭代数组的所有项，然后构建一个最终返回的值，从数组的第一项开始，遍历数组的每一项到最后
Array.reduceRight():迭代数组的所有项，然后构建一个最终返回的值，从数组的最后一项开始，向前遍历到第一项
实例讲解
为了方便大家的理解和使用，我会将这些方法进行分类讲解和分析
(1):Array.length属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//1：数组的定义
var colors0=new Array(); //创建数组
var colors1=new Array(20); //创建数组并指定长度
var colors2=new Array('red','blue','green');//定义数组并赋值
var colors3=[];//字面量定义空数组
console.log(colors0.length);//0
console.log(colors1.length);//20
console.log(colors2.length);//3
//2：数组的访问和修改
console.log(colors2[0]);//访问数组 red
colors2[1]='小明'; //修改数组下标中的值
console.log(colors2[1]);
//3.遍历数组
for(var i=0;i<colors2.length;i++){
console.log(colors2[i]);//red,小明，green
} </script>
</body>
</html>
(2):栈方法push()和pop()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组中的栈方法</title>
</head>
<body>
<script type="text/javascript">
var colors=new Array(); //创建数组
var count=colors.push('red','green')//向数组的结尾添加元素
console.log(colors); //red,green
count=colors.push('black');
console.log(colors); //red,green,black
var item=colors.pop();//移除数组的最后一项
console.log(item); //black </script>
</body>
</html>
(3):队列方法shift()和unshift()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组中的队列方法</title>
</head>
<body>
<script type="text/javascript">
var colors=new Array();//创建数组
var count=colors.push('red','green'); //推入两项
console.log(count);//2
count=colors.push('black'); //推入另一项
console.log(count);//3
var item=colors.shift();//取得第一项
console.log(item); //red
console.log(colors.length);//2 var color=new Array(); //创建数组
var c=color.unshift('red','green');//推入两项
console.log(c);//2
c=color.unshift('black');
console.log(c);//3
var i=color.pop();
console.log(i);//green
console.log(color.length);//2
</script>
</body>
</html>
(4):重排序方法sort()和reverse()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组中的重排序方法</title>
</head>
<body>
<script type="text/javascript">
//reverse()方法和sort()方法
//1：测试reverse()方法
var values1=[1,2,3,4,5];
values1.reverse(); //将数组进行反转
console.log(values1);//5,4,3,2,1 //2：测试sort()方法
var values2=[0,1,5,10,15];
values2.sort();//将数组进行排序，比较ASCII编码
console.log(values2);//0,1,10,15,5 //3：sort()方法接受函数实现升序
function descArray(a,b){
if(a<b){
return -1;
}else if(a>b){
return 1;
}else{
return 0
}
}
var item=[0,1,3,2,4];
item.sort(descArray);
console.log(item); //0,1,2,3,4 //4：sort()方法接受函数实现降序
function ascArray(a,b){
if(a<b){
return 1;
}else if(a>b){
return -1;
}else{
return 0;
}
}
var items=[10,1,2,4,6,5,7];
items.sort(ascArray);
console.log(items);//10,7,6,5,4,2,1 </script> </body>
</html>
(5):操作方法slice()、splice()、concat()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组中的操作方法</title>
</head>
<body>
<script type="text/javascript">
//1：测试操作方法concat()
var colors1=['red','blue','green'];
var colors2=colors1.concat('yellow',['black','brown']);
console.log(colors1); //red,blue,green
console.log(colors2); //red,blue,green,yellow,black,brown
//2:测试操作方法splice(startIndex,[endIndex]);
var colors3=['red','green','blue','yellow','purple'];
var colors4=colors3.splice(1);
var colors5=colors3.splice(1,4);
console.log(colors4); //green,blue,yellow,purple
console.log(colors5); //green,blue,yellow
//3:测试splice()方法
//(1):测试splice()删除方法
//参数：要删除第一项的位置，删除的项数
var item=['red','blue','green'];
var removed=item.splice(0,1);
console.log(removed);//red
console.log(item);//blue,green
//(2):测试splice()添加方法
//参数：起始位置，0(要删除的项数)，要插入的项
removed=item.splice(1,0,'yellow','orange');
console.log(removed);//返回一个空的数组，因为移除的项为0
console.log(item); //blue,yellow,orange,green
//(3):测试splice()修改方法
//参数：起始位置，删除的项数，插入的任一项
removed=item.splice(1,1,'red','purple');
console.log(removed);//yellow
console.log(item);//blue,red,purple,orange,green
</script>
</body>
</html>
使用slice()方法，如果传入一个参数，则从开始下标到截取到数组的结尾，如果传入两个参数，则从开始下标到结束下标。
使用splice()方法，插入的项是从移除的下标那项开始添加。
(6):转换方法toString()和join()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组中转换方法</title>
</head>
<body>
<script type="text/javascript">
var colors=['red','green','blue'];//创建一个包含三个字符串的数组
//1:测试toString()方法
console.log(colors.toString()); //red,green,blue
//2：测试join()方法
var item=['red','blue','green'];
console.log(item.join('|'));//red|blue|green
console.log(item.join('||'));//red||blue||,green
</script>
</body>
</html>
(7):迭代方法some()、filter()、map()、forEach()、every()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组中的迭代方法</title>
</head>
<body>
<script type="text/javascript">
//迭代方法:every(),filter(),forEach(),map(),some()
//传递参数，数组项的值，数组中的位置，数组对象本身
var numbers=[1,2,3,4,5,4,3,2,1];
//1:测试erery()函数
var everyResult=numbers.every(function(item,index,array){
return item>2;
});
console.log(everyResult);//false
//2:测试some()函数
var someResult=numbers.some(function(item,index,array){
return item>2;
});
console.log(someResult);//true
//3:测试filter()函数
var filterResult=numbers.filter(function(item,index,array){
return item>2;
});
console.log(filterResult);//3,4,5,4,3
//4：测试map()函数
var mapResult=numbers.map(function(item,index,array){
return item*2;
});
console.log(mapResult);//2,4,6,8,10,8,6,4,2
//5：测试forEach()函数
numbers.forEach(function(item,index,array){
//执行某些操作
console.log(item);//1,2,3,4,4,3,2,1
}) </script>
</body>
</html>
在这些方法中，最相似的是every()和some()，它们都有用于查询数组中的项是否满足某个条件，对于every()来说，传入的函数必须对每一项都返回true,这个方法才会返回true,否则，它就会返回false，而some()方法只要传入的函数对数组中的某一项返回true,它就会返回true。
(8):归并方法reduce()和reduceRight()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组中的归并方法</title>
</head>
<body>
<script type="text/javascript">
//归并方法：reduce()和reduceRight()
//传递参数：前一个值，当前值，项的索引，数组对象
var array=[1,2,3,4,5]
//1：测试reduce()方法
var sum1=array.reduce(function(prev,cur,index,array){
return prev+cur;
});
console.log(sum1);//15
//2：测试reduceRight()方法
var sum2=array.reduceRight(function(prev,cur,index,array){
return prev+cur;
});
console.log(sum2);//15
</script>
</body>
</html>
使用reduce()还是reduceRight()，主要取决于要从哪头开始遍历数组。除此之外，它们完全相同。
总结
数组中如此之多的方法，我们并不是每一个都需要记忆，只需找到规律然后对数组中的方法进行分组便可以实现很好的记忆方式。如：Array.pop()和Array.push()，Array.shift()和Array.unshift(),Array.slice()和Array.splice(),Array.some()和Array.every()，Array.reduce()和Array.reduceRight()。
javascript中数组常用的方法和属性的更多相关文章
- javascript中数组常用的方法
在JavaScript中,数组可以使用Array构造函数来创建,或使用[]快速创建,这也是首选的方法.数组是继承自Object的原型,并且他对typeof没有特殊的返回值,他只返回'object'. ...
- javascript中数组Array的方法
一.常用方法(push,pop,unshift,shift,join)push pop栈方法,后进先出var a =[1,2,3];console.log(a.push(40)); //4 返回数组的 ...
- JavaScript学习总结之数组常用的方法和属性
先点赞后关注,防止会迷路寄语:没有一个冬天不会过去,没有一个春天不会到来. 前言数组常用的属性和方法常用属性返回数组的大小常用方法栈方法队列方法重排序方法操作方法转换方法迭代方法归并方法总结结尾 前言 ...
- Javascript中数组的判断方法
摘要: 1.数组检测的方法: 1) typeof . 2) instanceof . 3) constructor . 4) Object.prototype.toString. 5) Array.i ...
- javascript中最常用的方法
平时在工作中时常需要一些方法,下面列举几个最常用的几个方法. 1. indexOf(searchvalue,fromindex) 该方法用于查找一个字符串是否包含了另一个字符串 indexOf() 方 ...
- JS 开发中数组常用的方法
大家有没有想过,js数组为什么会有这么多的方法,没错,就是为了不同场景下处理数据的需要,就像设计模式一样,都是为了能更好的处理当前场景的需要. 首先怎么创建一个数组呢, // 两种方式 // 1,构造 ...
- javascript中数组的concat()方法 - 数组连接
<html> <head> <title>数组的concat()方法</title> <script> /* 数组的concat()方法: ...
- 【前端_js】javascript中数组的map()方法
数组的map()方法用于遍历数组,每遍历一个元素就调用回调方法一次,并将回调函数的返回结果作为新数组的元素,被遍历的数组不会被改变. 语法:let newAarray = arr.map(functi ...
- JavaScript中数组的迭代方法：forEach、map、filter、reduce、every、some、for in、for of
JavaScript中有非常多数组迭代方法,这里基本上吧所有的都介绍全了,我项目中比较喜欢的是forEach. 7.for in (for-in循环实际是为循环对象而设计的,for in也可以循环数组 ...
随机推荐
- eShopOnContainers部署在docker的坑
把eShopOnContainers(.net core 的版本是2.1)下载之后,部署到docker上,查看容器eShopOnContainers的项目都部署上去了. 用http://localho ...
- HDU 4685
题意略. 思路: 本题和POJ1904颇为相似,只是那个最大匹配没有现成的,要我们自己求出来.并且要给每一个单身的王子/公主现找一个虚拟的对象. 这也是合乎情理的,王子每一次换一个公主时,可能会导致某 ...
- vue实现输入框的模糊查询（节流函数的应用场景）
上一篇讲到了javascript的节流函数和防抖函数,那么我们在实际场合中该如何运用呢? 首先,我们来理解一下:节流函数首先是节流,就是节约流量.内存的损耗,旨在提升性能,在高频率频发的事件中才会用到 ...
- Delphi - cxGrid设定字段类型为CheckBox
cxGrid设定字段类型为CheckBox 1:设定OraQuery属性 CachedUpdates设定为True: 双击打开OraQuery,选中Update SQLs页面,Insert.Updat ...
- filter修改post参数
前景:公司项目web渗透测试中提出管理登录时,传输密码不能为明文,需要加密传输,但是迫于系统架构,后端代码不能修改,只能在filter中解密参数. 1.前端加密处理: <script type= ...
- StackOverflow 周报 - 与高关注的问题过过招（Java）
本篇文章是 Stack Overflow 周报的第二周,共收集了 4 道高关注的问题和对应的高赞回答.公众号「渡码」为日更,欢迎关注. DAY1. serialVersionUID 的重要性 关注: ...
- NLP（二十二）使用LSTM进行语言建模以预测最优词
预处理 数据集使用Facebook上的BABI数据集 将文件提取成可训练的数据集,包括:文章 问题 答案 def get_data(infile): stories,questions,answers ...
- 2019杭电多校6 hdu6638 Snowy Smile（二维最大矩阵和 线段树）
http://acm.hdu.edu.cn/showproblem.php?pid=6638 题意:给你一些点的权值,让找一个矩形圈住一部分点,问圈住点的最大权值和 分析:由于是稀疏图,明显要先把x, ...
- 牛客小白月赛6 B 范围 数学
链接:https://www.nowcoder.com/acm/contest/135/B来源:牛客网 题目描述 已知与均为实数,且满足: 给定A,B,求x的取值范围? 由于Apojacsleam的计 ...
- lightoj 1046 - Rider(bfs)
A rider is a fantasy chess piece that can jump like a knight several times in a single move. A rider ...