整理ES6中常用的几个数组API

原创 2016年08月29日 21:47:37

开始学习es6时,对于数组的几个常用的API不是很清楚,经过一段时间的学习,不敢说已经非常熟悉,学习是一个漫长的过程,整理一下在使用这些API过程中的一些心得体会。

no.1  map

map函数可以看成一种映射函数,而且是一一映射,几个萝卜几个坑。


array.map(function(参数){

....

函数体

......

})

es6提出了箭头函数,所以也可以写成:

array.map((参数)=>{

....

函数体

......

})


例子:[1.2.3].map((x)=>{

return x+1;

})                      //[2,3,4]


map适合用于对一个数组的每一个元素做一个相同的操作时,例如:每一个元素加上某一个值或者减去某一个值,这个时候map函数就该上场了。

no.2  filter

filter函数可以看成是一个过滤函数,就像一个筛子,筛去不符合条件的元素。


filter函数和map很相似,但它们之间有不同之处,起初在这两个函数之间犯了很多迷糊。filter与map的区别之一:filter函数需要返回一个true或者false,如果是true,才会返回这个元素,如果是false,则不返回。而map没有这一过程。

array.filter(function (参数){

...

函数体

...

})

或者:

array.filter((参数)=>{

...

函数体

...

})


例子:[1.2.3].filter((x)=>{

return x%2===0;

})                      //[2]


fliter函数适合用于筛选一个数组中满足某一条件的元素,但要注意的是,fliter函数只是筛选功能,它不能对数组中的元素做其他操作,换句话说,就是不能改变数组的元素。

no.3 reduce

reduce函数可以理解成一个迭代函数。

array.reduce(function (previous,current,index,array){

...

函数体

...

},[initialValue])

也可以写成:

array.reduce( (previous,current,index,array)=>{

...

函数体

...

},[initialValue])

例子:

[1,2,3,4].reduce((previous,current)=>{

return previous+current;

})     //10

我觉得reduce函数的特殊之处就在于它的回调函数,四个参数分别代表:之前值,当前值,索引值,数组本身。这里的previous值取决于[initialValue],如果[initialValue]指定时,则作为previous的初始值,也可以为空数组[],如果缺省的话,则将数组的第一个元素作为previous的初始值,下一次循环时,之前值就是上一次的当前值,而当前值会变成下一个索引所对应的元素,依次类推。

no.4 find

find函数的即查找函数。

array.find((参数)=>{

...

函数体(查找条件)

...

})


例子:

[1,2,3,4].find((value)=>{

return value>2;

})              //3

要注意的是find函数在查找时,一旦数组中的某一个元素符合查找条件,则立即返回。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

ES6---数组array新增方法

let与const命令是es6标准最基础也是最常见的命令符 ,在es5的js标准中,定义变量只能使用var命令符,var命令 符只能进行全局与函数作用域的变量定义,es6新增的let则改变了这一现状。...
  • Wbiokr
  • Wbiokr
  • 2017年03月25日 19:29
  • 7607

es6 数组实例的 find() 和 findIndex()

数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回u...

es6 数组实例的 entries() , keys() 和 values()

ES6 提供三个新的方法 —— entries(),keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历,唯一的区别是keys()是对键名的...

js删除数组里的某个元素

A-A+ 前端博客•2014-05-27•前端开发代码•JavaScript | javascript代码•2190View0 首先可以给JS的数组对象定义一个函数,用于查找指定的元素...

ES6学习笔记(四)--数值与数组

数值的扩展Number.isFinite(), Number.isNaN()与传统的全局方法isFinite()和isNaN()的区别在于,传统方法先调用Number()将非数值的值转为数值,再进行判...
  • SirM2z
  • SirM2z
  • 2016年06月01日 17:15
  • 4418

ECMAScript6(ES6)标准之数组Array扩展方法

ES6对于数组又扩展了很多方法 包括静态方法和原型链上添加的方法 让我们可以更方便的操作数组静态方法Array.from()这个方法可以将 类数组对象(有length属性的对象)和可遍历对象(E...

关于es6的一些常用关键字以及set与数组的操作

因为一个数组取差集的需求,搜索答案中顺便学习了下es6的新语法,自己总结了下,感觉很有意义,希望对您有所帮助。首先介绍下let,与var类似,但用let声明的变量的作用域只是外层块,而不是整个外层函数...
  • momDIY
  • momDIY
  • 2017年04月26日 16:32
  • 1064

ES6之数组(array)

Array.of()函数 将一组值,转换成数组。 Array.of(1,2,3,4,5); //结果:[1,2,3,4,5]Array.from( )函数 可以将类似数组的对象或者可遍历的对象...

es6 新增的map和foreach

ES5中新增的Array方法详细说明 引用地址:http://www.zhangxinxu.com/wordpress/?p=3220 一、前言-索引 ES5中新增的不少东西,了解之对我们写...

es6 javascript的map数据结构的实例的属性和操作方法、遍历方法

(1) size 属性 size属性返回 Map 结构的成员总数。 let map = new Map(); map.set('foo', true); map.set('bar', false); ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:整理ES6中常用的几个数组API
举报原因:
原因补充:

(最多只允许输入30个字)