超详细的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 相关文章推荐
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
Jun 26 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
微信小程序实现弹出菜单
Jul 19 Javascript
记React connect的几种写法(小结)
Sep 18 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
微信小程序合法域名配置方法
May 06 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
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
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
web 页面分页打印的实现
2009/06/22 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
爬山算法简介和Python实现实例
2014/04/26 Python
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
python列表的常用操作方法小结
2016/05/21 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
python生成九宫格图片
2018/11/19 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
写好求职信第一句话的技巧
2013/10/26 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
欢度春节标语
2014/07/01 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
初级职称评定工作总结
2015/08/13 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python