谈谈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 相关文章推荐
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
Javascript 类型转换方法
Oct 24 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
js创建对象的方法汇总
Jan 07 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
脚本收藏iframe
2006/07/21 Javascript
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
MSN消息提示类
2006/09/05 Javascript
发现的以前不知道的函数
2006/09/19 Javascript
点击文章内容处弹出页面代码
2009/10/01 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
nodejs教程之入门
2014/11/21 NodeJs
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
跟老齐学Python之for循环语句
2014/10/02 Python
Python定时器实例代码
2017/11/01 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
东方红海科技面试题软件测试方面
2012/02/08 面试题
中国梦的演讲稿
2014/01/08 职场文书
检察官就职演讲稿
2014/01/13 职场文书
学习礼仪心得体会
2014/09/01 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python