专栏首页OECOMJavaScript中Array数组的几种方法

JavaScript中Array数组的几种方法

2017-02-18 03:33:38

涉及到数组的问题,以前基本上我们都是采用for循环的方法来进行遍历,后来在ES5中新增了几种方法来方便我们遍历。这几种方法分别为:forEach(js v1.6) ,map(js V1.6),filter (js v1.6),some(js V1.6),every(js V1.6),indexOf(js V1.6),lastIndexOf(js V1.6),reduce(js V1.8),rceRight(js V1.8)。

对于让人失望很多次的IE6-IE8浏览器,如果你想兼容的话,可以通过Array原型扩展实现以上全部功能。

// 对于古董浏览器,如IE6-IE8

if (typeof Array.prototype.forEach != "function") {
  Array.prototype.forEach = function () {
    /* 实现 */
  };
}

下面详细介绍一下各方法的用处。

forEach()

forEach是Array新方法中最基本的一个,就是遍历,循环。例如下面这个例子

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]

上面的这两个例子里可以看出,forEach方法中的function回调支持3个参数,第1个是遍历的数组内容;第2个是对应的数组索引,第3个是数组本身。

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]

当然这个方法可以替代for循环遍历数组元素,进行数据操作

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]

every()和some()

every和some均是对数据进行筛选,不同的是every是对所有元素进行筛选,必须该数组都符合要求才返回true,否则返回false。而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

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"

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  从顺序第二个往前

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 通过nodejs主动向百度搜索引擎提交链接

    在百度站长工具中有一中方式向百度搜索引擎提交链接的方式,就是主动推送,这个方式应该和发布文章合并到一起,当文章生成保存到数据库之后,即文章发布成功,应该自动生成...

    无邪Z
  • HTML5自定义属性对象Dataset

    在HTML5中,我们经常使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放,例如我们在一个button上添加id

    无邪Z
  • HTML的声明标签

    我们在书写网页的时,很少关注HTML的声明标签。同时,很多设计师和开发者都不知道什么是DOCTYPE,DOCTYPE有什么用。DOCTYPE是document ...

    无邪Z
  • ABAP和Java里关于DEFAULT(默认)机制的一些语言特性

    由此可见新语法比较简洁,能少写3行代码。但是这样有一个缺陷,在新语法下如果it_data内表内不存在object_ext的值为cl_crm_prodil_bo_...

    Jerry Wang
  • 解构赋值,你不能不懂!

    思梦php
  • 解构赋值,你不能不懂!

    相信大家不难从上述的几段代码案例总结出来解构赋值的规律,我总结到如下几点: 1、解构主体为数组或者对象。 2、解构源必须具备Iterator接口或者经过转换之后...

    思梦php
  • uni-app学习(二)

    老梁
  • ES6(三):变量的解构赋值

    解构赋值语法是一个Javascript表达式,这使得可以将值从数组或属性从对象提取到不同的变量中,文中主要讲数组的解构赋值、对象的解构赋值、字符串的解构赋值、数...

    从入门到进错门
  • ThinkPHP5 集成使用 Layui 穿梭框(transfer)控件

    泥豆芽儿 MT
  • js删除数组对象中符合条件的数据

    FreeTimeWorker

扫码关注云+社区

领取腾讯云代金券