超详细的javascript数组方法汇总


Posted in Javascript onNovember 21, 2015

一、数组的常用方法
1:join();

将数组转为字符串显示。不输入参数,默认以逗号连接;输入参数,则以参数连接。

var arr=[1,2,3];
console.log(arr.join());  // 1,2,3;
console.log(arr.join("_")); // 1_2_3;
console.log(arr);      // [1,2,3];

原数组不变。

2:reverse();

将数组逆序排列,原数组被修改。

var arr=[1,2,3];
var arr2=arr.reverse();
console.log(arr2); // [3,2,1];
console.log(arr);  // [3,2,1];

3:sort();

默认按升序排列数组项,调用每个数组项的toString()方法,然后比较得到的字符串,从字符串首位开始比较。

var arr=[2,12,14,21,5];
console.log(arr.sort());  //[12, 14, 2, 21, 5];

也可以传入一个比较函数作为参数。如果第一个参数应该在前,则比较函数返回一个小于0的值;反之第一个参数在后,这比较函数返回一个大于0的值;如果顺序无关紧要,则比较函数返回0;

var arr=[2,12,14,21,5];
console.log(arr.sort(function(a,b){return a-b}));   // [2,5,12,14,21]; 

var arr1=[2,12,14,21,5];
console.log(arr1.sort(function(a,b){return b-a}));  // [21,14,12,5,2];

4:concat();

数组合并,原数组不变。

var arr=[1,2,3];
console.log(arr.concat(4,5));      // [1, 2, 3, 4, 5];
console.log(arr.concat([4,5],6));    // [1, 2, 3, 4, 5, 6];
console.log(arr.concat([[4,5],6]));   // [1, 2, 3, [4, 5],6];
console.log(arr);            // [1, 2, 3];

5:slice();

返回部分数组,包含第一个参数所对应的数组项,但不包含第二个参数对应的数组项。如果传入的参数小于0,则从后往前数,最后一项为-1。如果只传入一个参数,则返回的数组包含起始位置到数组结尾的所有元素。原数组不变。

var arr=[1,2,3,4,5];
console.log(arr.slice(1,3));   // [2,3];
console.log(arr.slice(1));    // [2,3,4,5];
console.log(arr.slice(1,-1));  // [2,3,4];
console.log(arr);        // [1,2,3,4,5];

6:splice();

数组拼接:

1).删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数);

2).插入-向数组指定位置插入任意项元素。三个参数,第一个参数(其实位置),第二个参数(0),第三个参数(插入的项);

3).替换-向数组指定位置插入任意项元素,同时删除任意数量的项,三个参数。第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项);

splice()返回一个由删除元素组成的数组,或者如果没有删除元素就返回一个空数组。原数组被修改。

var arr=[1,2,3,4,5,6];
console.log(arr.splice(2));  
  // [3,4,5,6];
console.log(arr);    



 // [1,2];
console.log(arr.splice(2,0,3,4,5,6));  // [];
console.log(arr); 





  // [1,2,3,4,5,6];
console.log(arr.splice(2,2));


 // [3,4];
console.log(arr);






// [1,2,5,6];

7:push()和pop()方法,unshift()和shift()方法;

push()和pop() 栈方法,后进先出。原数组都发生改变。

push()方法在数组的尾部添加一个或多个元素,并返回数组新的长度。

pop()方法删除数组的最后一个元素,减小数组的长度并返回删除的值。

unshift()和shift()队列方法,先进先出。原数组都发生改变。

unshift()方法在数组的头部添加一个或多个元素,并改变已存在元素的索引,然后返回数组新的长度。

shift()方法删除数组的第一个元素并将其返回,并改变已存在元素的索引。

var arr=[1,2,3];
console.log(arr.push(4));//4;
console.log(arr);


 //[1,2,3,4];
console.log(arr.pop());
 //4;
console.log(arr);


 //[1,2,3];
console.log(arr.unshift(0)); //4;
console.log(arr);


 //[0,1,2,3];
console.log(arr.shift());  //0;
console.log(arr);


 //[1,2,3];

8:forEach();

forEach()里第一个参数为该集合里的元素,第二个参数为集合里的索引,第三个参数为集合本身。

超详细的javascript数组方法汇总

9:map();

map()对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组,原数组未被修改。

超详细的javascript数组方法汇总

10:every()

对数组的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。

超详细的javascript数组方法汇总

11:some()

对数组的每一项运行给定函数,如果该函数对任一项返回true,则返回true。

超详细的javascript数组方法汇总

12:filter()

对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。

超详细的javascript数组方法汇总

13:reduce()和reduceRight();
两个方法都会迭代数组的所有项,然后构建一个最终返回的值。其中reduce()方法从数组的第一项开始,逐个遍历到最后。而reduceRight()则从数组的最后一项开始,向前遍历到第一项。数组未被修改。

 超详细的javascript数组方法汇总

二、扩展方法
1:数组去重

function unique(array){
  return array.filter(function(item,index){
    return array.indexOf(item)==index;
  })
};
var arr=[1,2,3,3,4,2,1,5];
console.log(unique(arr));
//[1,2,3,4,5];

function unique(arr){
  var arr2=[arr[0]],
    len=arr.length;
  if(!len){
    return;
  }
  for(var i=0;i<len;i++){
    arr2.join(" ").indexOf(arr[i])<0?arr2.push(arr[i]):"";
  }
  return arr2;
}
var arr=[1,2,3,3,4,2,1,5];
console.log(uniq(arr)); 
//[1,2,3,4,5]

2:去掉数组中的空元素

function deleteNullInArray(array){
  return array.filter(function(item){
    return item!=null;
  }) 
}
var arr=[1,2,null,,,5];
console.log(deleteNullInArray(arr));//[1,2,5];
Javascript 相关文章推荐
[原创]站长必须要知道的javascript广告代码
May 30 Javascript
JavaScript 常用函数
Dec 30 Javascript
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
时间戳转换为时间 年月日时间的JS函数
Aug 19 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 Javascript
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
javascript实现动态统计图开发实例
Nov 21 #Javascript
js实现索引图片切换效果
Nov 21 #Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 #Javascript
javascript实现Email邮件显示与删除功能
Nov 21 #Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 #Javascript
Jquery ajax基础教程
Nov 20 #Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 #Javascript
You might like
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
PHP abstract与interface之间的区别
2013/11/11 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
理解javascript正则表达式
2016/03/08 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
python中的内置函数getattr()介绍及示例
2014/07/20 Python
Python中的自省(反射)详解
2015/06/02 Python
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
Python实现的矩阵类实例
2017/08/22 Python
django反向解析和正向解析的方式
2018/06/05 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
python多进程并行代码实例
2019/09/30 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
Python datetime 如何处理时区信息
2020/09/02 Python
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
Linux内核产生并发的原因
2012/07/13 面试题
个人公开承诺书
2014/03/28 职场文书
劳资协议书范本
2014/04/23 职场文书
银行求职信怎么写
2014/05/26 职场文书
乳制品整治工作方案
2014/05/29 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
实习单位证明范例
2014/11/17 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers