谈谈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 delete 引用类型对象
Nov 01 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
TypeScript具有的几个不同特质
Apr 07 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 Javascript
layui表格数据重载
Jul 27 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
VUE项目初建和常见问题总结
Sep 12 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
用 php 编写的日历
2006/10/09 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
js 实现 input type="file" 文件上传示例代码
2013/08/07 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
js获取域名的方法
2015/01/27 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
Python跳出循环语句continue与break的区别
2014/08/25 Python
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
python标记语句块使用方法总结
2019/08/05 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
python识别验证码图片实例详解
2020/02/17 Python
python两个list[]相加的实现方法
2020/09/23 Python
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
一套Delphi的笔试题二
2013/05/11 面试题
网游商务专员求职信
2013/10/15 职场文书
1亿有多大教学反思
2014/05/01 职场文书
团队精神口号
2014/06/06 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis