javascript Array 数组常用方法


Posted in Javascript onApril 05, 2015

(1)基本的数组方法

1.join()

Array.join()方法将数组中所有元素都转化为字符串并连接在一起,返回最后生成的字符串。可以自己指定分隔的符号,如果不指定,默认使用逗号

var arr = [1,2,3];
console.log(arr.join());//"1,2,3"
console.log(arr.join("-"));//"1-2-3"

var a = new Array(10); //长度为10的空数组 组成下边字符串
console.log(a.join("-"));//"---------"

2.reverse()
Array.reverse()方法将数组中的元素颠倒顺序,返回逆序的数组(返回的数组是其本身,原始数组已经改变了)

var arr = [1,2,3];
arr.reverse();
console.log(arr.join());//"3,2,1"

所以,如果想把一个字符串逆序的话,可以这样

var str = "abcdefg";

console.log(str.split("").reverse().join(""));//"gfedcba" 返回的是新的值
console.log(str); //"abcdefg" 当然了,原始的是不会变的.

3.sort()
Array.sort()方法将数组中的元素排序并返回排序后的数组。

当不带参数时,默认按照顺序排序,也就是从小到大。当然,也可以直接给sort加一个比较函数比较

var arr = [1,4,7];
arr.sort();
console.log(arr); //[1,4,7]

arr.sort(function(a,b){
 return a-b; //从小到大
});
console.log(arr); //[1,4,7]

arr.sort(function(a,b){
 return b-a; //从大到小
});
console.log(arr); //[7,4,1]


var num = new Array('one','three','Six','Five');
num.sort(); //区分大小写排序
console.log(num); // ["Five", "Six", "one", "three"]
num.sort(function(s,t){
 var a = s.toLowerCase();
 var b = t.toLowerCase();
 if(a<b) return -1;
 if(a>b) return 1;
 return 0;
});
console.log(num); // ["Five", "one", "Six", "three"]

4.concat()
Array.concat()方法创建并返回一个新数组,它的元素包括调用concat()的原始数组的元素和concat()的每个参数。

如果这些参数中的任何一个自身是数组,则连接的是数组的元素,而非数组本身。

但要注意,concat()不会递归扁平化数组的数组。concat()也不会修改调用的数组。

var arr = [1,2,3];
console.log(arr.concat(4,5)); // [1, 2, 3, 4, 5]
console.log(arr);       // [1, 2, 3]
console.log(arr.concat([4,5])); // [1, 2, 3, 4, 5]
console.log(arr.concat([4,5],[6,7])); // [1, 2, 3, 4, 5,6,7]
console.log(arr.concat([4,[5,[6,7]]])); // [1, 2, 3, 4, [5, [6, 7]]]
console.log(arr.concat(4,[5,[6,7]])); // [1, 2, 3, 4, 5,[6,7]]

5.slice()
Array.slice()方法返回指定数组的一个片段或子数组。它的两个参数分别指定了片段开始和结束的位置(a,b)。返回的是从a开始到b的不包括b的数组元素。
如果只有一个参数(a).则代表从a到数组结尾的元素。
如果参数中出现负数(-a). 则表示相对于数组中最后一个元素相距a的位置。比如(-3)代表倒数第三个元素到末尾。出现负数就先换算出来,然后按照范围规则找出来
他也是返回新的数组,不会修改原始数组

var arr = [1,2,3,4,5];
console.log(arr.slice(0,3)); // [1, 2, 3]
console.log(arr); // [1, 2, 3, 4, 5]
console.log(arr.slice(3));//[4, 5]
console.log(arr.slice(-3));// [3, 4, 5]
console.log(arr.slice(-3,-1));// [3, 4]
console.log(arr.slice(2,-1));// [3, 4]

6. splice()
Array.splice()方法是在数组中插入或者删除元素的通用方法。它会修改原始数组的值,并返回一个新的数组序列

splice()的第一个参数指定了插入或删除的起始位置,第二个参数指定了应该从数组中删除的元素的个数。第二个参数省略则默认删到末尾。

var arr = [1,2,3,4,5,6,7,8];
console.log(arr.splice(4)); //[5, 6, 7, 8]
console.log(arr); // [1, 2, 3, 4]
console.log(arr.splice(1,2));// [2, 3]
console.log(arr); // [1, 4]

splice()的前两个参数指定了需要删除的数组元素。紧随其后的任意个数的参数指定了需要插入到数组中的元素,并从第一个参数代表的位置开始插入。

不同于上边的concat(),splice()是直接把数组插进去,比如下面的[1,2]

var arr = [1,2,3,4,5];
console.log(arr.splice(2,0,'a','b')); // []
console.log(arr); // [1, 2, "a", "b", 3, 4, 5]
console.log(arr.splice(2,1,[1,2],3));// ["a"]
console.log(arr); // [1, 2, [1, 2], 3, "b", 3, 4, 5]

7.push() pop() unshift() shift()
把这些方法看成栈操作就行:前两者正常的栈操作,后两者是反向的栈操作
push()和unshift()往数组中从后面、前面添加元素,并返回新数组的长度
pop()和shift()删除数组中最后、最前的元素,并返回删除的元素

var arr = [];

console.log(arr.push(1,2,3));//3
console.log(arr);//[1, 2, 3]

console.log(arr.pop());// 3
console.log(arr);//[1,2]

console.log(arr.push([4,5]));//3
console.log(arr);// [1, 2, [4, 5]]
var arr = [];

console.log(arr.unshift(1,2,3));//3
console.log(arr);//[1, 2, 3]

console.log(arr.shift());// 1
console.log(arr);// [2, 3]

console.log(arr.unshift([4,5]));//3
console.log(arr);//[[4, 5], 2, 3]

(2)ECMAScript5中的数组方法

这一类数组方法大多数有统一大致的规则。它们都不会修改原始数组。
大多数方法的第一个参数接收一个函数,并且对数组的每个元素(或一些元素)调用一次该函数。

如果是稀疏数组,对不存在的元素不调用传递的函数;

在大多数情况下,调用的这个函数一般使用三个参数:数组元素、元素的索引、数组本身。通常后两个参数也不需要填写进去。
除了这里第一个参数(函数)之外,还有第二个参数(它是可选的),如果第二个参数存在,则调用的函数将被看做是第二个参数的方法。

也就是说,在调用函数时传递进去的第二个参数作为它的this关键字的值来使用。

1.forEach()

这个方法从头至尾遍历数组,为每个数组调用指定的函数。

var data = [1,2,3,4,5];
var sum = 0;
data.forEach(function(value){ //只使用了第一个参数(函数),调用的函数也只使用了第一个参数数组元素
 sum += value;
});

console.log(sum);//15
console.log(data);// [1, 2, 3, 4, 5]
var data = [1,2,3,4,5];
var sum = 0;
data.forEach(function(value,item,data){ //调用的函数具有了三个参数
  data[item] = value*value; //取平方
});

console.log(data);// [1, 4, 9, 16, 25]

2.map()
这个方法将调用的数组中每个元素传递给指定的函数,并返回一个数组,它包含这个函数的返回值。

var data = [1,2,3,4,5];
var data1 = data.map(function(value){
 return ++ value;
});

console.log(data); // [1, 2, 3, 4, 5]
console.log(data1);// [2, 3, 4, 5, 6]

3.filter()
这个方法返回的数组元素是调用的数组的一个子集。传递的函数是用来逻辑判定的,该函数返回true或false。

如果返回值是true或者能转化为true的值,那么传递给判定函数的元素就是这个子集的成员,它将被添加到一个作为返回值的数组中。

var data = [1,2,3,4,5];
var data1 = data.filter(function(value){
 return value <= 3;
});

var data2 = data.filter(function(value){
 return value > 3;
});

console.log(data); // [1, 2, 3, 4, 5]
console.log(data1);// [1,2,3]
console.log(data2);// [4,5]

4.every()和some()
顾名思义,every()就是数组中所以元素都满足函数指定的条件时 返回true; some()就是某一项满足时就返回 true

var data = [1,2,3,4,5];
var data1 = data.every(function(value){
 return value < 4;
});

var data2 = data.some(function(value){
 return value >4;
});

console.log(data); // [1, 2, 3, 4, 5]
console.log(data1);// false
console.log(data2);// true

5.reduce()和reduceRight()
这两个方法使用指定的函数将数组元素进行组合,生成单个值。

reduce()有两个参数。第一个是执行化简操作的函数,就是说用某种方法把两个值化简为一个值,并返回化简后的值。

第二个参数可选,用来传递给第一个参数函数作为初始值。如果第二个参数没有,则初始值就使用数组的第一个元素值。

var data = [1,2,3,4,5];
var sum = data.reduce(function(a,b){
 return a+b;
});

var sum1 = data.reduce(function(a,b){
 return a+b;
},5);

var min = data.reduce(function(a,b){
 return (a<b)?a:b;
});

console.log(data); // [1, 2, 3, 4, 5]
console.log(sum);// 15
console.log(sum1);// 20
console.log(min);// 1

sum中没有第二个参数,所以初始值为第一个数组元素,第一步1+2=3,第二步3+3=6... 最后得15
sum1中有第二个参数,所以初始值为5,第一步5+1=6,第二步6+2=8... 最后得20

reduceRight()和reduce()差不多,不同的是它按照数组索引从高到低(从右到左)处理数组,而不是正常的从低到高。

var data = ['a','b','c']; 
var str = data.reduce(function(x,y){ //顺序
 return x+y;
});

var str1 = data.reduceRight(function(x,y){ //逆序
 return x+y;
});

console.log(data);// [1, 2, 3]
console.log(str);//"abc"
console.log(str1);//"cba"

6.indexOf()和lastIndexOf()
这个方法搜索整个数组中具有给定值的元素,返回找到的元素的索引(找到了一个就退出了),没有找到则返回-1.

一个从头至尾,一个从尾至头

var data = ['a','b','a','c','a']; 

console.log(data.indexOf('a')); //0
console.log(data.indexOf('d')); //-1
console.log(data.lastIndexOf('a'));//4

console.log(data.lastIndexOf('a',-2));//2 从倒数第二个开始
console.log(data.lastIndexOf('a',1));//0  从顺序第二个往前

7.数组类型 isArray()
判断一个对象是不是数组

console.log(Array.isArray([]));//true
console.log(Array.isArray({}));//false

//模拟上边的
var isArray1 = Function.isArray||function(o){
 return typeof o === "object" &&
  Object.prototype.toString.call(o) === "[object Array]";
};

console.log(isArray1([]));//true
console.log(isArray1({}));//false
Javascript 相关文章推荐
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
AngularJS 工作原理详解
Aug 18 Javascript
D3.js实现雷达图的方法详解
Sep 22 Javascript
浅谈node的事件机制
Oct 09 Javascript
详解基于vue-cli优化的webpack配置
Nov 06 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
详解Element-UI中上传的文件前端处理
Aug 07 Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 Javascript
javascript数据结构与算法之检索算法
Apr 04 #Javascript
使用jquery制作弹出框效果
Apr 03 #Javascript
javascript 实现map集合
Apr 03 #Javascript
jQuery制作简洁的图片轮播效果
Apr 03 #Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 #Javascript
jQuery实现左右切换焦点图
Apr 03 #Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 #Javascript
You might like
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
js异或加解密效果代码
2008/06/25 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
Python的函数嵌套的使用方法
2014/01/24 Python
Python实现将xml导入至excel
2015/11/20 Python
Python算法应用实战之队列详解
2017/02/04 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
护理专业本科生自荐信
2013/10/01 职场文书
演讲主持词
2014/03/18 职场文书
公司贷款承诺书
2014/05/30 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
五年级上册复习计划
2015/01/19 职场文书
秦兵马俑导游词
2015/02/02 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
政审证明范文
2015/06/19 职场文书