Javascript学习之Map和Filter函数实现方法详解

本文和大家分享的主要是JavaScript的Map和Filter函数的实现相关内容及其工作原理,一起来看看吧,希望对大家学习javascript有所帮助。

Array.map

Array.map通过对输入的数组中每一个元素进行变换,返回由变换后的元素按序组成的新数组。原始数组的值不会被修改。假设我们相对一个数组中的每一个元素乘以3,使用for循环可以这样写。

for循环

var originalArr = [1, 2, 3, 4, 5];var newArr = [];for(var i = 0; i < originalArr.length; i++) {

newArr[i] = originalArr[i] * 3;

}console.log(newArr); // -> [3, 6, 9, 12, 15]

接下来我们将这个for循环抽象成一个函数。

multiplyByThree函数

var originalArr = [1, 2, 3, 4, 5];function multiplyByThree(arr) {

var newArr = [];

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

newArr[i] = arr[i] * 3;

}

return newArr;

}var arrTransformed = multiplyByThree(originalArr);console.log(arrTransformed); // -> [3, 6, 9, 12, 15]

现在我们继续深化这个抽象思路,将multiplyByThree中对每一个元素乘以3部分抽象为一个新的函数。

var originalArr = [1, 2, 3, 4, 5];function timesThree(item) {

return item * 3;

}function multiplyByThree(arr) {

var newArr = [];

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

newArr[i] = timesThree(arr[i]);

}

return newArr;

}var arrTransformed = multiplyByThree(originalArr);console.log(arrTransformed); // -> [3, 6, 9, 12, 15]

这样有什么好处呢?设想如果我们想对每一个元素乘以5,或则10,我们还要把整个for循环写一遍吗!

如果我们对timesThree函数稍作修改,就可以轻松的复用很多代码。

multiply函数

我们将:

function multiplyByThree(arr) {

var newArr = [];

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

newArr[i] = timesThree(arr[i]);

}

return newArr;

}

重构为:

function multiply(arr, multiplyFunction) {

var newArr = [];

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

newArr[i] = multiplyFunction(arr[i]);

}

return newArr;

}

我们将multiplyByThree重命名为multiply,并增加了一个参数。该参数是一个函数,定义了数组元素的变换规则。通过定义一个timesThree函数来达到实现对每一个数组元素乘以3的目的。

var originalArr = [1, 2, 3, 4, 5];function timesThree(item) {

return item * 3;

}var arrTimesThree = multiply(originalArr, timesThree);console.log(arrTimesThree); // -> [3, 6, 9, 12, 15]

有何优点呢?我们可以很简单定义任何变换:

var originalArr = [1, 2, 3, 4, 5];function timesFive(item) {

return item * 5;

}var arrTimesFive = multiply(originalArr, timesFive);console.log(arrTimesFive); // -> [5, 10, 15, 20, 25]

Map

我们进一步抽象:

function multiply(arr, multiplyFunction) {

var newArr = [];

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

newArr[i] = multiplyFunction(arr[i]);

}

return newArr;

}

将multiply改为map, multiplyFunction改为transform:

function map(arr, transform) {

var newArr = [];

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

newArr[i] = transform(arr[i]);

}

return newArr;

}

我们可以将任何对单个元素操作的函数传入map函数。比如,我们将所有字符都变换成大写:

function makeUpperCase(str) {

return str.toUpperCase();

}var arr = [’abc’, ’def’, ’ghi’];var ARR = map(arr, makeUpperCase);console.log(ARR); // -> [’ABC’, ’DEF, ’GHI’]

Array.map

我们定义的map函数和原生的Array.map还是有区别的:数组不再需要作为第一个参数传入,而是在点(.)的左侧。如果使用我们定义的map函数,如下:

function func(item) {

return item * 3;

}var arr = [1, 2, 3];var newArr = map(arr, func);console.log(newArr); // -> [3, 6, 9]

将其改写为使用Array.map函数的形式:

function func(item) {

return item * 3;

}var arr = [1, 2, 3];var newArr = arr.map(func);console.log(newArr); // -> [3, 6, 9]

Arrary.map参数解析

除了变换函数外,Array.map还可以接收其它两个参数: 数组索引(index), 原始的数组。

function logItem(item) {

console.log(item);

}function logAll(item, index, arr) {

console.log(item, index, arr);

}

var arr = [’abc’, ’def’, ’ghi’];

arr.map(logItem); // -> ’abc’, ’def’, ’ghi’

arr.map(logAll); // -> ’abc’, 0, [’abc’, ’def’, ’ghi’]

// -> ’def’, 1, [’abc’, ’def’, ’ghi’]

// -> ’ghi’, 2, [’abc’, ’def’, ’ghi’]

因此,你可以再变换函数中使用索引和原始的数组。比如:你想要将一个列表变为带序号的列表,则需要使用索引(index)参数:

function multiplyByIndex(item, index) {

return (index + 1) + ’. ’ + item;

}var arr = [’bananas’, ’tomatoes’, ’pasta’, ’protein shakes’];var mappedArr = arr.map(multiplyByIndex);console.log(mappedArr); // ->

// ["1. bananas", "2. tomatoes", "3. pasta", "4. protein shakes"]

因此,我们自己实现的map函数也应该支持这两个参数:

function map(arr, transform) {

var newArr = [];

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

newArr[i] = transform(arr[i], i, arr);

}

return newArr;

}

当然,Array.map函数还有一些错误检查和执行优化的代码,我们定义的map只编码了核心功能。

Array.filter

Array.filter将数组中不满足条件的元素过滤,我们可以用for循环加上Array.push来实现。

for-loop

下面这段JS代码将所有大于5的元素筛选出来:

var arr = [2, 4, 6, 8, 10];var filteredArr = [];for(var i = 0; i < arr.length; i++) {

if(arr[i] > 5) {

filteredArr.push(arr[i]);

}

}console.log(filteredArr); // -> [6, 8, 10]

我们可以抽象这段代码,定义为一个函数:

function filterLessThanFive(arr) {

var filteredArr = [];

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

if(arr[i] > 5){

filteredArr.push(arr[i]);

}

}

return filteredArr;

}var arr1 = [2, 4, 6, 8, 10];var arr1Filtered = filterLessThanFive(arr1);console.log(arr1Filtered); // -> [6, 8, 10]

进一步抽象,将过滤条件抽出来:

function isGreaterThan5(item) {

return item > 5;

}function filterLessThanFive(arr) {

var filteredArr = [];

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

if(isGreaterThan5(arr[i])) {

filteredArr.push(arr[i]);

}

}

return filteredArr;

}var originalArr = [2, 4, 6, 8, 10];var newArr = filterLessThanFive(originalArr);console.log(newArr); // -> [6, 8, 10]

将过滤条件函数作为参数传入:

function filterBelow(arr, greaterThan) {

var filteredArr = [];

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

if(greaterThan(arr[i])) {

filteredArr.push(arr[i]);

}

}

return filteredArr;

}var originalArr = [2, 4, 6, 8, 10];

大功告成!我们可以使用如下代码来取出所有大于5的元素:

function isGreaterThan5(item) {

return item > 5;

}var newArr = filterBelow(originalArr, isGreaterThan5);console.log(newArr); // -> [6, 8, 10];

Array.filter

我们将filterBelow重命名为filter, greaterThan重命名为testFunction:

function filter(arr, testFunction) {

var filteredArr = [];

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

if(testFunction(arr[i])) {

filteredArr.push(arr[i]);

}

}

return filteredArr;

}

这就是一个基本的Array.filter函数了!

var arr = [’abc’, ’def’, ’ghijkl’, ’mnopuv’];function longerThanThree(str) {

return str.length > 3;

}var newArr1 = filter(arr, longerThanThree);var newArr2 = arr.filter(longerThanThree);console.log(newArr1); // -> [’ghijkl’, ’mnopuv’]console.log(newArr2); // -> [’ghijkl’, ’mnopuv’]

同样,Array.filter也有索引(index)和原始数组这两个额外参数。

function func(item, index, arr) {

console.log(item, index, arr);

}

var arr = [’abc’, ’def’, ’ghi’];

arr.filter(func); // -> ’abc’, 0, [’abc’, ’def’, ’ghi’]

// -> ’def’, 1, [’abc’, ’def’, ’ghi’]

// -> ’ghi’, 2, [’abc’, ’def’, ’ghi’]

来源:SegmentFault

时间: 2025-01-05 16:33:01

Javascript学习之Map和Filter函数实现方法详解的相关文章

JavaScript学习总结(三)BOM和DOM详解

转自:http://segmentfault.com/a/1190000000654274 DOM介绍 D(文档)可以理解为整个Web加载的网页文档,O(对象)可以理解为类似window对象只来的东西,可以调用属性和方法,这里我们说的是document对象,M(模型)可以理解为网页文档的树形结构,DOM树由节点构成 节点种类:元素节点.文本节点和属性节点 DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API).DOM代表着被加载到浏览器窗口里的当前网页:浏览器向我们提供了当前网

Linux学习之命令行获取公网IP方法详解

本文和大家分享的主要是主要是linux命令行获取公网IP相关内容,一起来看看吧,希望对大家学习linux有所帮助. curl ipinfo.io $ curl ipinfo.io { "ip": "36.10.25.4", "city": "Hangzhou", "region": "Zhejiang", "country": "CN", &quo

python hasattr() getattr() setattr() 函数使用方法详解

hasattr(object, name) 函数: 判断一个对象里面是否有name属性或者name方法,返回bool值,有name属性返回True,否则返回False. 注意: name要用括号括起来. class function_demo(): name = 'demo' def run(self): return "hello function" functiondemo = function_demo() res = hasattr(functiondemo, 'name')

Python的hasattr() getattr() setattr() 函数使用方法详解

最近用到对用户信息进行判断,看到这个方法的详解,感觉比较好,所以拿过来,让自己可以时常看看 hasattr(object, name)判断一个对象里面是否有name属性或者name方法,返回BOOL值,有name特性返回True, 否则返回False.需要注意的是name要用括号括起来 getattr(object, name[,default])获取对象object的属性或者方法,如果存在打印出来,如果不存在,打印出默认值,默认值可选.需要注意的是,如果是返回的对象的方法,返回的是方法的内存地

Python的反射机制、hasattr() getattr() setattr() 函数使用方法详解

hasattr(object, name)判断一个对象里面是否有name属性或者name方法,返回BOOL值,有name特性返回True, 否则返回False.需要注意的是name要用括号括起来 1 >>> class test(): 2 ... name="xiaohua" 3 ... def run(self): 4 ... return "HelloWord" 5 ... 6 >>> t=test() 7 >>&

python学习笔记8--面向对象--属性和方法详解

属性: 公有属性  (属于类,每个类一份) 普通属性  (属于对象,每个对象一份) 私有属性    (属于对象,跟普通属性相似,只是不能通过对象直接访问) 方法:(按作用) 构造方法 析构函数 方法:(按类型) 普通方法 私有方法(方法前面加两个下划线) 静态方法 类方法 属性方法 静态方法 @staticmethod静态方法,通过类直接调用,不需要创建对象,不会隐式传递self 类方法 @classmethod类方法,方法中的self是类本身,调用方法时传的值也必须是类的公有属性,就是说类方法

python的 map和filter函数

一, map     #基本的map运用都可以用解析去替代,复杂的仍然需要定义函数,利用map去做 map(函数, 序列) 将序列的各项经过函数处理, 然后返回到一个新列表中. #itertools.imap() >>> s['a', 'b', 'c', 'd'] >>> exp1 = map(ord, s)      #s 也可以是字符串, 元组, 字典>>> exp1[97, 98, 99, 100] 序列的个数根据前面的函数而定, ord()一次

【转】深入学习JavaScript: apply call方法 详解(转)

Js apply方法详解 原文:http://blog.csdn.net/myhahaxiao/article/details/6952321 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家分享..  如有什么不对的或者说法不明确的地方希望读者多多提一些意见,以便共同提高.. 主要我是要解决一下几个问题: 1.        apply和cal

jQuery filter函数使用方法

利用filter函数可以从wrapper set中过滤符合条件的DOM元素. 如果有一个内容如下的html文件,要获取类为external的<a>元素,使用filter可以很easy地搞定. <a href="#" class="external">link</a> <a href="#" class="external">link</a> <a href=&q