谈谈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 相关文章推荐
js正确获取元素样式详解
Aug 07 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
小程序实现五星点评效果
Nov 03 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 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
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
php表单处理操作
2017/11/16 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
python实现神经网络感知器算法
2017/12/20 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
产品工艺师的岗位职责
2013/11/15 职场文书
小学生家长评语集锦
2014/01/30 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
遗产继承公证书
2014/04/09 职场文书
大二学年个人总结
2015/03/03 职场文书
决心书格式范文
2015/09/23 职场文书
大学生安全教育心得体会
2016/01/15 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android