超详细的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 相关文章推荐
JS操作JSON要领详细总结
Aug 25 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 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
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
用Python中的字典来处理索引统计的方法
2015/05/05 Python
python爬虫爬取网页表格数据
2018/03/07 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
Linux下python3.7.0安装教程
2018/07/30 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
python多进程重复加载的解决方式
2019/12/13 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
综合素质的自我鉴定
2013/10/07 职场文书
优秀演讲稿范文
2013/12/29 职场文书
工程业务员岗位职责
2013/12/31 职场文书
追悼会子女答谢词
2014/01/28 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
《胡杨》教学反思
2014/02/16 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
合作意向书范本
2014/03/31 职场文书
医院营销工作计划
2015/01/16 职场文书
辅导员学期工作总结
2015/08/14 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android