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也可以循环数组 ...
随机推荐
- Java连载23-for循环练习、while\dowhile详解
一.for循环练习 1.例子:输入九九乘法表 public class d23_{ public static void main(String[] args) { for(int i = 1;i&l ...
- awrcrt更新到2.1（重大更新）
awrcrt更新到了2.1 awrcrt迎来了最近一年的最大一次更新,从2.03直接跳跃了2.1版本.本次更新,给awrcrt带了全面的改变. 最主要的更新内容是什么呢?请看 更新了图表javascr ...
- windows服务autofac注入quartz任务
一.nuget下载相关类库引用 install-package Quartz install-package Autofac install-package Autofac.Configuration ...
- stm32f10x基于freeRTOS的低功耗实现
0. 写在前面 没有太多时间更新,可能偶尔有时间就更新一些. 因为突然有项目用到了stm32f10x系列并且是电池驱动的,所以需要对功耗进行优化,其他CM3核心系列应该也同样适用. 1. 背景 Stm ...
- 【Bit String Reordering UVALive - 6832 】【模拟】
题意分析 题目讲的主要是给你一个01串,然后给你要变成的01串格式,问你要转换成这一格式最少需要移动的步数. 题目不难,但当时并没有AC,3个小时的个人赛1道没AC,归根到底是没有逼自己去想,又想的太 ...
- 获得本机IP和访问服务的端口号(Java)
1. //获取本机ip地址 InetAddress addr = InetAddress.getLocalHost(); String ip=addr.getHostAddress().toStrin ...
- 2019-2020-1 20199322《Linux内核原理与分析》第一周作业
图解sudo deluser name和sudo deluser name --remove -home的区别? 先众所周知地创建一个用户“hanmeimei” 然后给韩梅梅创建一个二级的目录,并且在 ...
- 玩转 SpringBoot 2 快速整合 | Thymeleaf 篇
前言 Thymeleaf是一个适用于Web和独立环境的现代服务器端Java模板引擎. Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板 - 可以在浏览器中正确显示的HTML,也可以用 ...
- JSP静态include和动态include的区别
静态include是指令元素.include指令的语法格式:<%@ include file="filename" %>.include指令的作用是在JSP页面中静态包 ...
- 应用上下文webApplicationContext
一.先说ServletContext javaee标准规定了,servlet容器需要在应用项目启动时,给应用项目初始化一个ServletContext作为公共环境容器存放公共信息.ServletCon ...