整理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
  • 11711

JS中数组的常用方法(包含es6扩展)

1、 join() 功能:将数组中所有元素都转化为字符串并连接在一起。 输入: 分隔符,默认为逗号 输出:分隔符分割的字符串 举例: var a = [1,2,3]; a.join();...
  • wlwanglu
  • wlwanglu
  • 2016年08月22日 17:16
  • 2151

自学-ES6篇-数组的扩展

1、Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构S...
  • wh814071912
  • wh814071912
  • 2016年10月06日 22:48
  • 3630

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

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

ES6数组新增的几个方法

关于数组中forEach() 、map()、filter()、reduce()、some()、every()的总结1、forEach()var arr = [1,2,3,4]; arr.forEach...
  • tang15886395749
  • tang15886395749
  • 2017年03月24日 13:38
  • 1866

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

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

es6 map,set与数组和对象的比较(十)

map,set,array对比: map,set.object对比: map成本低,set如果在使用过程中没有对数据做一份引用的话,就要通过forEach删除,优先使用map,如果对数据结构要求存储...
  • chenna1102cn
  • chenna1102cn
  • 2017年07月10日 17:53
  • 176

es6 Array数组对象新增方法 Array.of()

Array.of方法用于将一组值,转换为数组。Array.of总是返回参数值组成的数组。如果没有参数,就返回一个空数组。 Array.of基本上可以用来替代Array()或new Array(),并...
  • qq_30100043
  • qq_30100043
  • 2016年11月18日 16:40
  • 2106

ES6学习——新加API:Array

这篇文章我们逐一看看数组中新添加的API。 1)Array.of ( ...items ) 静态方法,把items转成数组,可以代替Array构造函数。 var a = Array( 3 ); ...
  • kittyjie
  • kittyjie
  • 2016年02月03日 14:09
  • 583

es6数组(Array)对象

push, pop, shift, unshift // 测试中,带'?'的参数是可选的 var arr = ['a', 'b']; // 测试时arr原始值都是['a', 'b'],以下操...
  • u014711094
  • u014711094
  • 2018年01月06日 18:39
  • 38
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:整理ES6中常用的几个数组API
举报原因:
原因补充:

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