超详细的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中valueOf函数与toString方法深入理解
Dec 02 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
原生js实现随机点餐效果
Dec 10 Javascript
JavaScript数组去重实现方法小结
Jan 17 Javascript
JavaScript布尔运算符原理使用解析
May 06 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
php强制更新图片缓存的方法
2015/02/11 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
JavaScript 10件让人费解的事情
2010/02/15 Javascript
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
Python语言描述KNN算法与Kd树
2017/12/13 Python
微信跳一跳游戏python脚本
2020/04/01 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
大专毕业生简历的自我评价
2013/10/20 职场文书
怎样写好自荐信和推荐信
2013/12/26 职场文书
税务会计岗位职责
2014/02/18 职场文书
暑期培训班策划方案
2014/08/26 职场文书
单位租房协议书样本
2014/10/30 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
拙作再改《我的收音机情缘》
2022/04/05 无线电
Java存储没有重复元素的数组
2022/04/29 Java/Android