谈谈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 相关文章推荐
event.srcElement 用法笔记e.target
Dec 18 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
jQuery链使用指南
Jan 20 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
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
Look And Say 序列php实现代码
2011/05/22 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
学习jquery之一
2007/04/27 Javascript
Extjs学习笔记之七 布局
2010/01/08 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
python中异常捕获方法详解
2017/03/03 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
Python实现句子翻译功能
2017/11/14 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
python程序控制NAO机器人行走
2019/04/29 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
Python OpenCV实现视频分帧
2019/06/01 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
大学生军训广播稿
2014/01/24 职场文书
餐饮采购员岗位职责
2014/03/15 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
医者仁心观后感
2015/06/17 职场文书
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript
css3 选择器
2022/05/11 HTML / CSS