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也可以循环数组 ...
随机推荐
- python 冷知识（装13 指南）
python 冷知识(装13 指南) list1 += list2 和 list1 = list1 + list2 的区别 alpha = [1, 2, 3] beta = alpha # alpha ...
- java-jsp特殊字符处理
str = str.replaceAll("'", "''").replaceAll("\"", ""&quo ...
- HTML（五）列表，区块，布局，表单和输入
HTML 列表 无序列表 Coffee Tea Milk 默认是圆点,也可以 圆圈 正方形 有序列表 Coffee Tea Milk Coffee Tea Milk 默认是用数字排序 大写字母 小写字 ...
- 关于斐波那契数列的一些恒等式 模板 牛客OI测试赛 A 斐波拉契
牛客A 斐波拉契 链接:https://www.nowcoder.com/acm/contest/181/A来源:牛客网 设f[i]表示斐波那契数论的第i项 f[1]=1,f[2] =1,f[i] = ...
- JOBDU 1108 堆栈的使用
之所以把这道题目贴出来的原因,是因为真的有几个地方要注意的 题目1108:堆栈的使用 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:10763 解决:3119 题目描述: 堆栈是一种基本的 ...
- Leetcode之动态规划（DP）专题-详解983. 最低票价（Minimum Cost For Tickets）
Leetcode之动态规划(DP)专题-983. 最低票价(Minimum Cost For Tickets) 在一个火车旅行很受欢迎的国度,你提前一年计划了一些火车旅行.在接下来的一年里,你要旅行的 ...
- 基于WFST的语音识别解码器
学习语音识别有些时间了.老板要求我们基于Kaldi搭一个语音识别系统,在设备上通过MIC讲话,连着设备的PC的console上就能基本实时显示出讲话的内容.由于我们都是小白,刚开始可以要求低些,就用传 ...
- 在docker上编译openjdk8
以前曾经试过在VMware上安装linux,再在linux上编译openjdk8,但是每次都不顺利,例如linux环境,预装依赖软件,openjdk源码的选择等环境都会遇到问题,一旦失败再重新开始挺费 ...
- go 学习笔记之无心插柳柳成荫的接口和无为而治的空接口
如果你还了解编程概念中的接口概念,那么我建议你最好还是先阅读上一篇文章.详情请点击 go 学习笔记之万万没想到宠物店竟然催生出面向接口编程? ,否则的话,请自动忽略上文,继续探索 Go 语言的接口有什 ...
- 【Spring】 AOP Base
1. AOP概述 2. AOP的术语: 3. AOP底层原理 4. Spring 中的AOP 4.1 概述 4.2 分类 4.3 Spring的传统AOP 针对所有方法的增强:(不带有切点的切面) 带 ...