昨天我们有提到说for-of和forEach可以用来处理数组,但其实还有很多方法可以更快速及精简代码的达到你要的效果。

话不多说,我们赶紧来看吧!

Array.prototype.map()

会回传一个新数组,其值为原数组每一个值经回呼函式运算后的回传值。故新数组长度会与原数组相同。

要注意的是,如果没有回传值,会预设回传undefined。

var arr = [1,2,3,4,5,6,7,8,9];

var arrMap = arr.map((item,index,array)=>{

return item * index

})

console.log(arrMap);//[0,2,6,12,20,30,42,56,72]

map最常拿来与for和for-in作比较,有人认为我用原本的循环就可以达成了,为何还要用map呢?

那我们来比较一下两者吧:

var arr = [1,2,3,4,5,6,7,8,9];

var arrMap = arr.map((item,index,array)=>{

return item * index

})

var arrFor = [];

for(let i = 0;i < arr.length;i++){

arrFor.push(arr[i]*i)

}

虽然意思都是一样,但是今天别人看到你写for时需要思考说,这个for是在干嘛?有改动什么东西吗?

但如果是map别人一看就知道说,这是对原数组作操作并回传一个新的(cctsol)。

Array.prototype.filter()

会回传一个数组,其值为原数组每一个值经回呼函式运算后回传为true的值,故长度不一定等于原数组。

var arr = [1,2,3,4,5,6,7,8,9];

var arrFilter = arr.filter((item,index,array)=>{

return item%2 === 0;

});

console.log(arrFilter);//[2,4,6,8]

通常用于条件过滤,所以才叫做filter(过滤)。

像是过滤出不重复的数组:

var arr = ['Jason','Turtle','Chris','Jason','Kai','Chris','Henry','Kai'];

var uniquePerson = arr.filter((item,index,array)=>{

return array.indexOf(item)=== index;

});

console.log(uniquePerson);//[“Jason”,“Turtle”,“Chris”,“Kai”,“Henry”]

Array.prototype.find()

会回传第一个满足函式条件的值,否则回传undefined。

var arr = ['Jason','Turtle','Chris','Jason','Kai','Chris','Henry','Kai'];

var findPerson = arr.find((item,index,array)=>{

return item === 'Chris';

});

console.log(findPerson);

Array.prototype.every()

会回传数组是否每一个值都满足函式的条件。

var arr = [{

name:“Jason”,

age: 29

},

{

name:“Chris”,

age: 31

},

{

name:“Kai”,

age: 24

},

{

name:“Henry”,

age: 24

}

];

var checkAge = arr.every((item,index,array)=>{

return item.age > 10;

});

console.log(checkAge);//true

var test = arr.every((item,index,array)=>{

return item.age < 30;

});

console.log(test);//false

Array.prototype.some()

跟every用法很像,差别在于只要部分符合及回传true。

var arr = [{

name:“Jason”,

age: 29

},

{

name:“Chris”,

age: 31

},

{

name:“Kai”,

age: 24

},

{

name:“Henry”,

age: 24

}

];

var test = arr.some((item,index,array)=>{

return item.age < 30;

});

console.log(test);//true

Array.prototype.reduce()

会将数组内每一个值经回呼函式运算后回传单一个值。

这个方法很特别的是每一次呼叫可以跟前一个回传值作再次运算并回传。

accumulator用来累积回呼函式回传值的累加器,是上一次呼叫后,所回传的累加数值。

currentValue是当前数组的值

currentIndex当前数组值的索引(可选)

array原本的数组(可选)

var arr = [1,2,3,4,5,6,7,8,9,10];

var sum = arr.reduce((accumulator,item)=>{

return accumulator + item;

});

console.log(sum);

在这边要注意到reduce有个很特别的参数initialValue初始值,若没有提供初始值,原数组的第一个元素将会被当作初始的累加器。

var arr = [1,2,3,4,5,6,7,8,9,10];

var sum = arr.reduce((accumulator,item)=>{

console.count(accumulator,item);

return accumulator + item;

},0);

console.log(sum);

可以跟上一个例子作比较,会发现没有提供initialValue,会少运算一次喔(aichi-kaigo)!

以上是今天的数组常见处理方法,下次要对数组作操作时不要一开始就用for,试着用这先简单明了的方法吧!

转载于:https://www.cnblogs.com/lannyQ-Q/p/9964679.html

学JS的心路历程 -数组常见处理方法相关推荐

  1. 学JS的心路历程 -物件与原型(二)

    昨天有提到说Object.setPrototypeOf可以指定一个物件为另一个物件的原型,但有想过到底这个原型,也就是[[Prototype]]最终会到何处吗? 答案是Object.prototype ...

  2. 学JS的心路历程 -函式(三)this

    this是什么,取决于被呼叫的呼叫地点. 昨天有提到说,呼叫函式时候会传递隐含参数:arguments和this并讲解了arguments,今天我们就来探讨this吧! 什么是this 我们都会呼叫函 ...

  3. 学JS的心路历程Day28 - PixiJS -基础(二)

    材质暂存(texture cache) 昨天有说到,图片要放入stage前,需要先把图片转成Sprite的特殊图片物件. 但是我们也可以先将图片放进材质暂存(texture cache). 什么是「材 ...

  4. 学JS的心路历程 -非同步执行

    JS是单线程的语言,也就是说同一时间只会执行一行程序,所以如果一段程序执行过久就会造成阻塞(blocking)的现象,必须等到它结束后才能执行下一段程序. 举个例子来说,如果我们今天要买便当,但是老板 ...

  5. 学JS的心路历程-Promise(一)

    今天在进入Promise代码之前,我们先来用个例子来解释Promise是什么. 未来值 假设我们今天来到快餐店,点了一个汉堡,付钱给店员. 点了餐点并付费,可以理解为我们发送了一个请求,希望得到一个回 ...

  6. 学JS的心路历程-函式(五)箭头函式

    箭头函式arrow function 为了能够以更简短的方式建立函式,ES6变推出了箭头函式. 用说明的可能会不太懂,我们先拿之前的数组排序例子来看: var arr = [2,1,6,12,3,77 ...

  7. JS声明二维数组常见办法

    JS声明二维数组常见办法 目录 文章目录 前言 `new Array`和`fill` `fill`灵活插入 `for`笨办法 `Array.from` 前言 目前论坛常见的办法代码质量奇差,因此针对这 ...

  8. 浅谈数组常见遍历方法

    本文主要介绍数组常见遍历方法:forEach.map.filter.find.every.some.reduce,它们有个共同点:不会改变原始数组. 接下来都是使用底下的基础数组来实现一些方法: 累加 ...

  9. JS Array.slice 截取数组的实现方法

    这篇文章主要介绍了JS Array.slice 截取数组的实现方法,因为我们需要控制一下长度,需要的朋友可以参考下 slice定义和用法 slice() 方法可从已有的数组中返回选定的元素. 语法 a ...

最新文章

  1. [转]中国CIO的空前机会和空前责任
  2. LeetCode 1122. 数组的相对排序
  3. ajax onerror code,Ajax请求'onError'处理程序
  4. MongoDB基础(3.6安装及多实例)
  5. 信息学奥赛一本通(2025:【例4.11】体操队)
  6. ionic云开发系列二之调用webservice
  7. P3924 康娜的线段树
  8. linux内核启动后键盘不能用,编译linux-0.11内核后键盘不对的问题解决方法,比如/变成了-...
  9. python插入排序
  10. 过来人给Java初学者的建议!
  11. 文章发送到多平台软件:融媒宝
  12. java实现人民币金额大写
  13. html版权登记怎么打,版权符号怎么输入_Html版权符号怎么打
  14. 便捷开票二维码应用简介
  15. CentOS 7.6基于lvm2快照备份恢复MariaDB
  16. ENSP实验八——单区域OSPF的基本配置
  17. 萌新-以ijcai19为模板的latex排版总结
  18. 【Python】【C语言】P3353 在你窗外闪耀的星星
  19. Python:enumerate函数
  20. HDU 6217 BBP Formula (数学)

热门文章

  1. hive mysql 远程_ubuntu中为hive配置远程MYSQL database
  2. pandas 选择行和列
  3. java的connect和http_java发起HttpURLConnection和HttpsURLConnection请求 | 学步园
  4. java double 位运算_JAVA位运算等运算符总结
  5. java开发用amd处理器_HBase1.x实战:协处理器Java开发实例--ObserverCoprocessor
  6. Javascript获取select下拉框选中的的值以及索引
  7. endnote转化成纯文本后_如何用Endnote分分钟搞定参考文献
  8. Postman最被低估的功能,自动化接口测试效率简直无敌
  9. android游戏boss坐标,热血江湖手游boss刷新点坐标 boss刷新时间 _图文攻略_高分攻略_百度攻略...
  10. mysql参数文件选项组_my.cnf文件关于组选项的总结