谈谈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中的apply()方法和call()方法使用介绍
Jul 25 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
uni-app使用countdown插件实现倒计时
Nov 01 Javascript
基于Cesium绘制抛物弧线
Nov 18 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
php中日期加减法运算实现代码
2011/12/08 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
flask框架视图函数用法示例
2018/07/19 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
医生实习工作总结的自我评价
2013/09/27 职场文书
给学校的建议书
2014/03/12 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
工程款催款函
2015/06/24 职场文书
python 详解turtle画爱心代码
2022/02/15 Python
Java数组详细介绍及相关工具类
2022/04/14 Java/Android