谈谈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 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
My Desktop :) 桌面式代码
Dec 29 Javascript
用javascript作一个通用向导说明
Aug 30 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
九种原生js动画效果
Nov 11 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
Nov 06 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 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 Hash算法:Times33算法代码实例
2015/05/13 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
javascript实现的网页局布刷新效果
2008/12/01 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
bootstrap中的 form表单属性role="form"的作用详解
2017/01/20 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
讲解Python中的标识运算符
2015/05/14 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
Flask框架配置与调试操作示例
2018/07/23 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
python SVD压缩图像的实现代码
2019/11/05 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
从python读取sql的实例方法
2020/07/21 Python
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
中间件分为哪几类
2016/09/18 面试题
毕业求职自荐信格式是什么
2013/11/19 职场文书
亲情作文之母爱
2019/09/25 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
Python图片验证码降噪和8邻域降噪
2021/08/30 Python