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也可以循环数组 ...
随机推荐
- CodeForces 989D
题意略. 思路: 可以看成是所有的云彩照常运动,而月亮在跑.只要两个云彩相交后,在分离前月亮能赶到,就算是符合题意的. 可以知道,两个相隔越远的相向运动地云彩是越有可能符合题意的,因为它们相遇所用时间 ...
- linux命令名 用法及参数 功能注解
命令名 用法及参数 功能注解 1 文件管理 # ls ls -a 列出当前目录下的所有文件,包括以.头的隐含文件 文件管理 # l ...
- NLP（三） 预处理
分词 from nltk.tokenize import LineTokenizer,SpaceTokenizer,TweetTokenizer from nltk import word_token ...
- 洛谷 P1666 前缀单词 题解
题意:给n个单词,如果单词a为单词b的前缀则a,b不能共存,问能共存的集合数(包括空集) 一道dp题,排序后判断,f[i][j]表示i和j是否能共存,f[i][j]=1表示能共存,初始化dp[i]=1 ...
- 在CMD命令行进入和退出Python程序
进入: 直接输入python即可 退出: 方法一:输入exit(),回车 方法二:输入quit(),回车 方法三:CTRL + Z,回车
- centos 6.5 搭建DHCP实验
搭建DHCP服务 安装DHCP服务 挂载光盘:mount /dev/cdrom /qswz 从光盘的安装包中安装DHCP rpm -ivh dhcp-4.1.1-38.P1.el6.centos.i6 ...
- 1张影射过往的图片，如何勾起往事的回忆，.CORE其实可以是这样的吗？
看到某人写了一个流程分析貌似可以披云见日,形似之余好像回忆可以相得益彰 然后我刚刚不小心发布了,当然要准备100字的说明,这个字应该怎么打好呢,不知不觉打了好多字,我好难啊 首先这是正常情况看不到的图 ...
- js获取一个月的天数
在使用其他语言获取每月天数的时候,一般都是存储到一个数组中进行获取,但是如果是二月份的话就需要首先判断是否闰年,再确定是28还是29了. js可以通过Date对象很方便的获取到每月的天数,在初始化Da ...
- 2018阿里-研发工程师JAVA Software Engineer, Java
岗位描述Job Description如果你想了解JAVA开发在阿里巴巴互联网生态系统中无与伦比的应用广度与深度: 如果你对基础技术感兴趣,你可以参与基础软件的设计.开发和维护,如分布式文件系统.缓存 ...
- Linux安装yum install gcc-c++出错：Could not retrieve mirrorlist http://mirrorlist.centos.org/?release=7&arch=x86_64&repo=os&infra=stock error was 14: curl#6 - "Could not resolve host: mirrorlist.centos...
错误如图: 解决办法: 1.修改配置文件 /etc/resolv.conf,该配置文件如下: 2.输入:gedit resolv.conf,修改配置文件内容如下: 3.然后重启: 4.重新进行安装: ...