美文网首页
js Array.map(),Array.reduce()和Ar

js Array.map(),Array.reduce()和Ar

作者: 张凯斯 | 来源:发表于2018-06-04 17:45 被阅读0次

map

定义:对数组中的每个元素进行处理,得到新的数组;

特点:不改变原数组;

举例说明,比如我们有一个函数f(x)=x的平方,要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上,就可以用map实现如下:

由于map()方法定义在JavaScript的Array中,我们调用Array的map()方法,传入我们自己的函数,就得到了一个新的Array作为结果:

function pow(x) {

    return x * x;

}

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

arr.map(pow);// [1, 4, 9, 16, 25, 36, 49, 64, 81]

map()传入的参数是pow,即函数对象本身。

map()作为高阶函数,事实上它把运算规则抽象了,因此,我们不但可以计算简单的f(x)=x2,还可以计算任意复杂的函数,比如,把Array的所有数字转为字符串:

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

arr.map(String);// ['1', '2', '3', '4', '5', '6', '7', '8', '9']

只需要一行代码。

reduce

再看reduce的用法。Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是:

[x1, x2, x3, x4].reduce( f(x,y) ) //相当于 f(f(f(x1, x2), x3), x4)

比方说对一个Array求和,就可以用reduce实现:

var arr = [1,3,5,7,9];

arr.reduce(function(x, y) {

    return x + y;

});// 25

练习:利用reduce()求积:

function product(arr) {

    return arr.reduce(function (x,y) {

        return parseInt(x)*parseInt(y);

    });

}

// 测试:

if (product([1, 2, 3, 4]) === 24 && product([0, 1, 2]) === 0 && product([99, 88, 77, 66]) === 44274384) {

    alert('测试通过!');

}else {

    alert('测试失败!');

}

filter

var ages = [32, 33, 16, 40];

function checkAdult(age) {

 return age >= 18;

}

function myFunction() {

    document.getElementById("demo").innerHTML = ages.filter(checkAdult);

}

相关文章

  • js Array.map(),Array.reduce()和Ar

    map 定义:对数组中的每个元素进行处理,得到新的数组; 特点:不改变原数组; 举例说明,比如我们有一个函数f(x...

  • Array.prototype.map

    使用 array.map(callback(value,index,array)) 将array映射成另外一个ar...

  • JS 中的 Array对象

    layout: posttitle: JS 中的 Array对象tag: 前端开发 今天, 让我们和 JS的 Ar...

  • WebAR开发指南(1)---使用AR.js实现第一个WebAR

    关于AR.js AR.js是一个轻量级的增强现实类JavaScript库,支持基于标记和位置的增强现实。开发人员可...

  • JavaScript数组的简化

    JavaScript中数组的常用操作之数组的简化 Array.reduce() 方法 Array.reduce(c...

  • AR.js Marker Training

    https://jeromeetienne.github.io/AR.js/three.js/examples/m...

  • 2018-04-10

    Array.reduce()的便捷用法兼具map和filter的双重用法

  • reduce

    array.reduce(function(total, currentValue, currentIndex, ...

  • JS Array.reduce 理解与使用

    这个 reduce 函数,说起来其实也挺简单的,但是要实用起来有时候还是感觉有些困难这是我自己的一些理解方式,分享...

  • parseInt

    先来看一个函数 为什么?我们来看看array.map函数的参数:array.map(currentValue, i...

网友评论

      本文标题:js Array.map(),Array.reduce()和Ar

      本文链接:https://www.haomeiwen.com/subject/cplqxftx.html