谈谈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实现Enter键跳转及控件获得焦点
Aug 12 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
vue+echarts实现多条折线图
Mar 21 Vue.js
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中rename函数用法分析
2014/11/15 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
laravel学习教程之关联模型
2016/07/30 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
jquery对table做排序操作的实例演示
2017/08/10 jQuery
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
python使用append合并两个数组的方法
2015/04/28 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
银河香水:Galaxy Perfume
2019/03/25 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
简短的公司员工自我评价分享
2013/11/13 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
敬老院标语
2014/06/27 职场文书
美容院员工规章制度
2015/08/05 职场文书
讨论nginx location 顺序问题
2022/05/30 Servers