谈谈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 相关文章推荐
JAVASCRIPT  THIS详解 面向对象
Mar 25 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
iview中Select 选择器多选校验方法
Mar 15 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
基于vue实现简易打地鼠游戏
Aug 21 Javascript
夯基础之手撕javascript继承详解
Nov 09 Javascript
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
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
php批量删除操作代码分享
2017/02/26 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
js中运算符&& 和 || 的使用记录
2014/08/21 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
通过shell+python实现企业微信预警
2019/03/07 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
python numpy实现rolling滚动案例
2020/06/08 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
Python过滤序列元素的方法
2020/07/31 Python
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
秋季婚礼证婚词
2014/01/11 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
yy生日主持词
2014/03/20 职场文书
银行授权委托书样本
2014/10/13 职场文书
婚姻出轨保证书
2015/05/08 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
python opencv旋转图片的使用方法
2021/06/04 Python