昨天我们有提到说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,试着用这先简单明了的方法吧!

学JS的心路历程 -数组常见处理方法的更多相关文章

  1. 学JS的心路历程-for of和for in

    我们在刚入门JS时候,说到要跑出数组的每个值肯定都是这样子: var arr = [1,2,3,4,5,6]: for(let i = 0:i < arr.length:i++){ consol ...

  2. 学JS的心路历程-正规表达式Regular Expression

    今天我们来看正规表达式,在谈到为什么需要多学这个之前,先来看个示例. 假设需要判断输入字串是否含有“apple”: var text=“A apple a day keeps the doctor a ...

  3. 学JS的心路历程Day26 - PixiJS -入坑

    后来知道也可以透过canvas让网页动起来! 而PixiJS是使用WebGL在canvas上绘制内容与制作动态 且同时有下列特色: 支持多点触控 掩码与混合模式 可外加WebGL滤镜 多装置支持 等等 ...

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

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

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

    今天我们来说then一些特殊情况以及Promise.all()与Promise.race(). 我们都知道函式作为参数传入时,可以参照的方式传入,也能传入时执行拿回传值作使用: function us ...

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

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

  7. 学JS的心路历程-函式(二)arguments

    参数(argument)与函式参数(parameter) 在讨论函式时,很多人都会把这两个搞混,我自己也不例外. 虽然讲错别人也听得懂,但是我们还是要搞清楚这两个的定义到底是什么! 参数是当我们呼叫函 ...

  8. 学JS的心路历程 - JS应用

    各家电商网站都推出了各种活动和现今优惠券,当时在逛PTT时看到了有篇文章,提供代码教大家用JS的方式抢票,看了一下后发现好像很多人好奇这是怎么做的,于是就想说想一篇文章来讲解一下. 我们先来看一下折价 ...

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

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

随机推荐

  1. scrapy框架之日志等级和请求传参-cookie-代理

    一.Scrapy的日志等级 - 在使用scrapy crawl spiderFileName运行程序时,在终端里打印输出的就是scrapy的日志信息. - 日志信息的种类: ERROR : 一般错误 ...

  2. Cloudera HUE大数据可视化分析

    下载版本 cdh版本 http://archive-primary.cloudera.com/cdh5/cdh/5/ 我们下载这个 这个是我下载好的 我们解压一下 下载需要的系统包 yum insta ...

  3. Flume数据采集准备

    , flume的官网:http://flume.apache.org/ flume的下载地址:http://flume.apache.org/download.html 这里我们用的是apache版本 ...

  4. Apached+resin服务搭建

    一.前言 Resin是CAUCHO公司的产品,是一个非常流行的支持servlets 和jsp的引擎,速度非常快.对servlet和JSP提供了良好的支持,性能也比较优良,resin自身采用JAVA语言 ...

  5. python- do_excel

    # @File : class_01_do_excel.py # coding=gbk #pip install openpyxl #新建.xlsx,一定要右键新建 from openpyxl imp ...

  6. rem 布局的闪现问题

    <script type="text/javascript"> var sizeRate = document.documentElement.clientWidth/ ...

  7. MySQL 全局锁、表锁以及行锁

    1. 系统版本 MySQL 5.7.25 ubuntu 16.04 2. 全局锁 全局锁即对整个数据库实例加锁,使得整个库处于只读状态,会阻塞DML和DDL语句.使用如下命令(简称FTWRL)可为数据 ...

  8. 20165205 预习作业三 Linux安装及学习

    Linux安装及学习 安装Ubuntu 1)安装版本 在安装VirtualBox时选择了VirtualBox 5.2.6 platform package 安装Ubuntu时选择了Ubuntu 16. ...

  9. 《算法》第二章部分程序 part 4

    ▶ 书中第二章部分程序,加上自己补充的代码,包括优先队列和索引优先队列 ● 优先队列 package package01; import java.util.Comparator; import ja ...

  10. yarn application -kill application_id yarn kill 超时任务脚本

    需求:kill 掉yarn上超时的任务,实现不同队列不同超时时间的kill机制,并带有任务名的白名单功能 此为python脚本,可配置crontab使用 # _*_ coding=utf-8 _*_ ...