谈谈JavaScript数组常用方法总结


Posted in Javascript onJanuary 24, 2017

在JavaScript中,我们需要时常对数组进行操作,现在特将常用方法总结如下:

1.增加数据

在JavaScript为数组增加数据主要分为两种方式。

 从数组末尾增加内容:push方法

从数组的前端增加内容:unshift方法

这两种方法的返回值都是数组的长度

var arr=[1,2,3]; 
//从末尾增加 
arr.push(4); 
console.log(arr);//[1,2,3,4] 
 
//从前端增加 
arr.unshift(0); 
console.log(arr);//[0,1,2,3,4]

2.删除数据

和增加数据一样,删除数据和主要分为两种方式。

从数组末尾增加内容:pop方法

从数组的前端增加内容:shift方法

这两种方法的返回值都是删除的数据

var arr=[1,2,3]; 
//从末尾删除 
arr.pop(); 
console.log(arr);//[1,2] 
 
//从前端删除 
arr.unshift(); 
console.log(arr);//[2]

3.从指定位置删除和增加数据

splice(startIndex,deleteCount,addValue1,addValue2...):从数组的startIndex位置开始,删除deleteCount个数据,然后在插入addValue1,addValue2等,返回值是被删除的数组所组成的数组。

var arr=[1,2,3,4,5]; 
var deleteArr=arr.splice(1,2,8,9); 
 
console.log(deleteArr);//[2,3] 
console.log(arr);//[1,8,9,4,5]

从上面所知,数组的删除方法返回的都是被删除的内容,增加的方法返回的都是数组改变后的长度。

4.反序数组

reverse():将数组内容逆序。

var arr=[1,2,3]; 
arr.reverse(); 
console.log(arr);//[3,2,1]

5.将数组内容组成一个有特定分隔符的字符串

join(seperator):将数组内容组成一个字符串,内容以seperator分隔

var arr=[1,2,3]; 
arr.join(','); 
console.log(arr);//1,2,3

6.合并两个数组

concat():合并数组并返回一个新的数组,不影响原有数组。

var arr1=[1,2,3]; 
var arr2=[4,5,6]; 
 
var newArr=arr1.concat(arr2); 
 
console.log(arr1);//[1,2,3] 
console.log(arr2);//[4,5,6] 
console.log(newArr);//[1,2,3,4,5,6]

7.数组排序

sort():默认将数组进行数字或字母进行升序排序,但也可以自定义降序排序

var arr=[3,5,1]; 
 
arr.sort(); 
 
console.log(arr);//[1,3,5]; 
 
//指定降序 
var arr1=[4,2,7]; 
arr1.sort(function(a,b){ 
  return b-a; 
}) 
console.log(arr1);//[7,4,2]

8.截取子数组

slice(startIndex,endIndex):截取数组中从startIndex到endIndex之间的内容,不包括endIndex所在位置的内容组成一个新的数组

var arr=[1,2,3,4,5,6]; 
 
var newArr=arr.slice(1,3); 
 
console.log(arr);//[1,2,3,4,5,6] 
console.log(newArr);//[2,3]

 9.判断给定数据在数组中的位置

indexOf(data):该方法返回data在该数组中所在的第一个元素位置,如果没有找到就返回-1

var arr=[1,2,3]; 
 
var loc=arr.indexOf(1); 
console.log(loc);//0 
 
var newLoc=arr.indexOf(4); 
console.log(newLoc);//-1

10.迭代器

数组的迭代器方法很多。

a.普通的遍历数组:forEach(function(value,index,arr){}),其中index是索引,value是值,arr就是数组本身

var arr=[1,2,3]; 
 
//index是索引,value是值 
arr.forEach(function(value,index,arr){ 
   console.log(''index:"+index+" "+"value:"+value) 
})

b.过滤数组:filter(),根据过滤条件过滤数组,但不会改变原有数组

var arr=[1,2,3,4]; 
 
//返回数组中大于2的内容 
var newArr=arr.filter(function(item){ 
  return item>2; 
}) 
 
console.log(arr);//[1,2,3,4] 
console.log(newArr);//[3,4]

c.映射数组:map(),对数组每个元素进行一定映射后,返回一个新数组,不会改变原有数组

var arr=[1,2,3,4]; 
 
//将数组每个值扩大一倍 
var newArr=arr.map(function(item){ 
  return item*2; 
}); 
 
console.log(arr);//[1,2,3,4] 
console.log(newArr);//[2,4,6,8]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DOM精简教程
Oct 03 Javascript
Javascript实现的分页函数
Feb 07 Javascript
一个判断email合法性的函数[非正则]
Dec 09 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
jquery实现简单每周轮换的日历
Sep 10 jQuery
js实现日历的简单算法
Jan 24 #Javascript
JSON键值对序列化和反序列化解析
Jan 24 #Javascript
js自制图片放大镜功能
Jan 24 #Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 #Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 #Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 #Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 #Javascript
You might like
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
八大排序算法的Python实现
2021/01/28 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
ASP.NET中的身份验证有那些
2012/07/13 面试题
大学生学习2014全国两会心得体会
2014/03/13 职场文书
学生期末评语大全
2014/04/30 职场文书
教师教学评估方案
2014/05/09 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
升职感谢信
2015/01/22 职场文书
个人党性锻炼总结
2015/03/05 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
工作经历证明范本
2015/06/15 职场文书
初三语文教学反思
2016/03/03 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
关于Redis的主从复制及哨兵问题
2022/06/16 Redis