JavaScript学习总结之数组常用的方法和属性
先点赞后关注，防止会迷路
寄语：没有一个冬天不会过去，没有一个春天不会到来。
前言数组常用的属性和方法常用属性返回数组的大小常用方法栈方法队列方法重排序方法操作方法转换方法迭代方法归并方法总结结尾
前言
在javascript中，数组是一种非常重要的数据类型，我们时常会和它打交道，最近在开发项目中频繁的使用到数组，但是自己对数组的众多方法已经是非常模糊了，为了方便自己以后能够更好的使用数组中的属性和方法，在此记录一下。
数组常用的属性和方法
常用属性
返回数组的大小
- 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>
常用方法
栈方法
- Array.push()：向数组的结尾添加元素
- Array.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>
队列方法
- Array.shift()：将元素移除数组
- Array.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>
重排序方法
- Array.sort()：将数组进行排序
- Array.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>
操作方法
Array.slice()：返回数组的一部分
Array.splice()：插入，删除或替换数组中的元素
Array.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>
tips：
- 使用slice()方法，如果传入一个参数，则从开始下标到截取到数组的结尾，如果传入两个参数，则从开始下标到结束下标
- 使用splice()方法，插入的项是从移除的下标那项开始添加
转换方法
- Array.toString()：将数组转换为一个字符串
- Array.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>
迭代方法
- Array.some()：对数组中的每一项运行给定函数，如果该函数对任一项返回true,则返回true
- Array.filter()：对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组
- Array.map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组
- Array.forEach()：对数组中的每一项运行给定函数，这个方法没有返回值
- Array.every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回ture,则返回true
<!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>
tips:
在这些方法中，最相似的是every()和some()，它们都有用于查询数组中的项是否满足某个条件，对于every()来说，传入的函数必须对每一项都返回true,这个方法才会返回true,否则，它就会返回false，而some()方法只要传入的函数对数组中的某一项返回true,它就会返回true。
归并方法
- Array.reduce()：迭代数组的所有项，然后构建一个最终返回的值，从数组的第一项开始，遍历数组的每一项到最后
- Array.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>
tips：
使用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中,数组是一种非常重要的数据类型,我们时常会和它打交道,最近在开发项目中频繁的使用到数组,但是自己对数组的众多方法已经是非常模糊了,为了方便自己以后能够更好的使用数组中的属 ...
- JavaScript（es6）数组常用的方法
常用方法 1.forEach() var data = [1,2,3,4,5]; var sum = 0;//求和 data.forEach((item)=>{sum+=item}) //给原数 ...
- JavaScript学习笔记之数组（二）
JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...
- JS 数组常用的方法
数组常用的方法: x.toString()方法:任何对象都有toString方法. 将任何对象转为字符串. 一般不主动调用,系统在需要时自动调用 x.valueOf()方法:同toStr ...
- Java程序猿的JavaScript学习笔记（9—— jQuery工具方法）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- JavaScript学习笔记：数组reduce()和reduceRight()方法
很多时候需要累加数组项的得到一个值(比如说求和).如果你碰到一个类似的问题,你想到的方法是什么呢?会不会和我一样,想到的就是使用for或while循环,对数组进行迭代,依次将他们的值加起来.比如: v ...
- javascript中数组常用的方法
在JavaScript中,数组可以使用Array构造函数来创建,或使用[]快速创建,这也是首选的方法.数组是继承自Object的原型,并且他对typeof没有特殊的返回值,他只返回'object'. ...
- JavaScript学习笔记之 数组方法一 堆栈 和队列
数组的方法 以及 堆栈的操作的方法 JavaScript是一种弱类型语言,不像其它程序语言需要严格定义数据类型.在JavaScript中数组可以任意修改变动,这样也就出现了一个问题,如果边遍历数组边操 ...
- JavaScript学习：取数组中最大值和最小值
在实际业务中有的时候要取出数组中的最大值或最小值.但在数组中并没有提供arr.max()和arr.min()这样的方法.那么是不是可以通过别的方式实现类似这样的方法呢?那么今天我们就来整理取出数组中最 ...
随机推荐
- PAT甲级——1005.SpellItRight(20分)
Given a non-negative integer N, your task is to compute the sum of all the digits of N, and output e ...
- tc/traffic control 网络控制工具
第一个例子 增加延时 tc qdsic add dev enp0s3 root netem delay 200ms qdisc : queuing discipline, 当内核需要发送包到某个接口时 ...
- [转]Apache漏洞利用与安全加固实例分析
1.2 Apache文件解析特性 Apache对于文件名的解析是从后往前解析的,直到遇见一个它认识的文件类型为止.因此,如果web目录下存在以类似webshell.php.test这样格式命名的文件, ...
- java中BigDecimal的四舍五入小记
static class test{ public static void main(String[] args) { BigDecimal b=new BigDecimal(45); BigDeci ...
- WebService客户端生成方法
1.使用JDK的wsimport.exe产生客户端代码 打开cmd命令框,输入如下格式命令: 格式:wsimport -s "src目录" -p "生成类所在包名&quo ...
- 玩转SpringBoot用好条件相关注解，开启自...
官方提供的常用条件注解 因为Spring的核心是基于bean的,所以这些条件注解主要是影响bean的注册. 因为注册的bean不同了,最后对外呈现的行为就不同了.不就是自动配置了. 一.最常用的应该是 ...
- @echo off 批处理
一个批处理文件 @echo off ipconfig /all @pause -------------------------------- @echo off 是什么意思 就是说关闭回显@echo ...
- 1005 继续(3n+1)猜想 (25 分)
题目:链接 卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程中遇到的每一个数.例如对 n=3 ...
- MOOC（7）- case依赖、读取json配置文件进行多个接口请求-读取json封装成类（13）
把读取json数据的函数封装成类 # -*- coding: utf-8 -*- # @Time : 2020/2/12 16:44 # @File : do_json_13.py # @Author ...
- UFT基本操作
1.打开界面F6快捷录制 2.选择web或者C/S架构软件 3.以C/S为例,点击添加找到相应的地址 4.点击左键添加断点 5.切换视图,初级模式或者代码模式 6.新增步骤 7.点击“手指”图标获取元 ...