谈谈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 相关文章推荐
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
JS定时器实例详细分析
Oct 11 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
详解vite2.0配置学习(typescript版本)
Feb 25 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入门源程序
2006/10/09 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
php 常用的系统函数
2017/02/07 PHP
javascript中的array数组使用技巧
2010/01/31 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
Python列表切片操作实例总结
2019/02/19 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
党建示范点实施方案
2014/03/12 职场文书
家长对学生的评语
2014/04/18 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
劳资员岗位职责
2015/02/13 职场文书
简历中自我评价范文
2015/03/11 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
读书笔记格式
2015/07/02 职场文书
python 进阶学习之python装饰器小结
2021/09/04 Python
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript