谈谈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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
vue组件间的参数传递实例详解
Apr 26 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 Javascript
Vue中keep-alive的两种应用方式
Jul 15 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 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
深入php list()函数的详解
2013/06/05 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
axios基本入门用法教程
2017/03/25 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
Python删除windows垃圾文件的方法
2015/07/14 Python
python导入时小括号大作用
2017/01/10 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
详解Python的三种可变参数
2019/05/08 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
高中生学习生活的自我评价
2013/10/09 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
出纳岗位职责范本
2015/03/31 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书