谈谈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 相关文章推荐
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
Vue自定义表单内容检查rules实例
Oct 30 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读取csv实现csv文件下载功能
2013/12/18 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
很酷的javascript loading效果代码
2008/06/18 Javascript
javascript document.execCommand() 常用解析
2009/12/14 Javascript
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
js 操作符汇总
2014/11/08 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
js闭包用法实例详解
2016/12/13 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
python-str,list,set间的转换实例
2018/06/27 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
趣味体育活动方案
2014/02/08 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
防灾减灾标语
2014/10/07 职场文书
医生个人年终总结
2015/02/28 职场文书
如何在Python项目中引入日志
2021/05/31 Python
python turtle绘图命令及案例
2021/11/23 Python