谈谈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 相关文章推荐
FCK调用方法..
Dec 21 Javascript
jQuery 前的按键判断代码
Mar 19 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
angularJS中router的使用指南
Feb 09 Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
vue开发中遇到的问题总结
Apr 07 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的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
python使用scrapy解析js示例
2014/01/23 Python
python正则表达式中的括号匹配问题
2014/12/14 Python
python实现简单图片物体标注工具
2019/03/18 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
python视频按帧截取图片工具
2019/07/23 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
2016高考寄语集锦
2015/12/04 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android