超详细的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实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
Javascript Objects详解
Sep 04 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 Javascript
js中Object.create实例用法详解
Oct 05 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转义Json里的特殊字符的函数
2015/06/08 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
python中字符串前面加r的作用
2015/06/04 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
Python自定义主从分布式架构实例分析
2016/09/19 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
销售业务实习自我鉴定
2013/09/23 职场文书
助人为乐表扬信范文
2014/01/14 职场文书
迎元旦广播稿
2014/02/22 职场文书
入党自荐书范文
2014/03/09 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
MySQL日期时间函数知识汇总
2022/03/17 MySQL