超详细的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 相关文章推荐
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
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
解析wamp5下虚拟机配置文档
2013/06/27 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
PHP错误机制知识汇总
2016/03/24 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
基于node.js的快速开发透明代理
2010/12/25 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
python的几种开发工具介绍
2007/03/07 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
python处理“
2019/06/10 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
Python实现异步IO的示例
2020/11/05 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
努比亚手机官网:nubia
2016/10/06 全球购物
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
日语翻译个人求职的自我评价
2013/10/14 职场文书
工程承诺书怎么写
2014/05/24 职场文书
小学生读书活动总结
2014/06/30 职场文书
重阳节标语大全
2014/10/07 职场文书
综合素质自我评价评语
2015/03/06 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
遗嘱格式范本
2015/08/07 职场文书