map函数的使用技巧

biaoxiaoduan 发布于2019-08-21 11:45 / 2550人阅读

摘要：的数组对象中有很多有用的方法，的函数在某些方面非常的方便强大。函数的使用例子求数组中每个元素的平方根的值为的值仍为应用下面代码展示了如何去遍历用得到的动态对象集合。

js的Array数组对象中有很多有用的方法，js的map函数在某些方面非常的方便强大。

</>复制代码 
map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

</>复制代码 
let numbers = [1, 5, 10, 15];
let roots = numbers.map((x) => {
    return x * 2;
});
let roots = numbers.map( x =>  x * 2);
// roots is now [2, 10, 20, 30]
// numbers is still [1, 5, 10, 15]
let numbers = [1, 4, 9];
// let roots = numbers.map(Math.sqrt);
let roots = numbers.map(function(x){
    return Math.sqrt(x);
});
// roots is now [1, 2, 3]
// numbers is still [1, 4, 9]

map函数的使用例子 求数组中每个元素的平方根

</>复制代码 
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
/* roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9] */

querySelectorAll 应用

下面代码展示了如何去遍历用 querySelectorAll 得到的动态对象集合。在这里，我们获得了文档里所有选中的选项，并将其打印：

</>复制代码 
var elems = document.querySelectorAll("select option:checked");
var values = Array.prototype.map.call(elems, function(obj) {
  return obj.value;
});

反转字符串

</>复制代码 
var str = "12345";
Array.prototype.map.call(str, function(x) {
  return x;
}).reverse().join(""); 
// Output: "54321"
// Bonus: use "===" to test if original string was a palindrome

兼容旧环境

</>复制代码 
// 实现 ECMA-262, Edition 5, 15.4.4.19
// 参考: http://es5.github.com/#x15.4.4.19
if (!Array.prototype.map) {
  Array.prototype.map = function(callback, thisArg) {
    var T, A, k;
    if (this == null) {
      throw new TypeError(" this is null or not defined");
    }
    // 1. 将O赋值为调用map方法的数组.
    var O = Object(this);
    // 2.将len赋值为数组O的长度.
    var len = O.length >>> 0;
    // 3.如果callback不是函数,则抛出TypeError异常.
    if (Object.prototype.toString.call(callback) != "[object Function]") {
      throw new TypeError(callback + " is not a function");
    }
    // 4. 如果参数thisArg有值,则将T赋值为thisArg;否则T为undefined.
    if (thisArg) {
      T = thisArg;
    }
    // 5. 创建新数组A,长度为原数组O长度len
    A = new Array(len);
    // 6. 将k赋值为0
    k = 0;
    // 7. 当 k < len 时,执行循环.
    while(k < len) {
      var kValue, mappedValue;
      //遍历O,k为原数组索引
      if (k in O) {
        //kValue为索引k对应的值.
        kValue = O[ k ];
        // 执行callback,this指向T,参数有三个.分别是kValue:值,k:索引,O:原数组.
        mappedValue = callback.call(T, kValue, k, O);
        // 返回值添加到新数组A中.
        A[ k ] = mappedValue;
      }
      // k自增1
      k++;
    }
    // 8. 返回新数组A
    return A;
  };      
}

GPU云服务器云服务器 map集合的使用 map函数 json map函数函数使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87082.html

JS函数式编程（初级）

摘要：函数式编程函数式，可能并不是那么难。在学习函数式编程之初，首先要知道在这一技能叶子中包含有多少个相关词，其次要知道它和我们是否从未有过遇见。 JS函数式编程函数式，可能并不是那么难。在学习JS函数式编程之初，首先要知道在这一技能叶子中包含有多少个相关词，其次要知道它和我们是否从未有过遇见。一等公民、纯函数、柯里化、代码组合、pointfree、命令式与申明式、 Hindley...

jk_v1 2019-08-21 16:16 评论0 收藏0
【响应式编程的思维艺术】（3）flatMap背后的代数理论Monad

摘要：本文是响应式编程第二章序列的深入研究这篇文章的学习笔记。函数科里化的基本应用，也是函数式编程中运算管道构建的基本方法。四资料参考函数式编程指南本文是Rxjs 响应式编程-第二章：序列的深入研究这篇文章的学习笔记。示例代码托管在：http://www.github.com/dashnowords/blogs 更多博文：《大史住在大前端》目录 showImg(https://segme...

MorePainMoreGain 2019-08-23 18:32 评论0 收藏0
学习ES6笔记──工作中常用到的ES6语法

摘要：但是有了尾调用优化之后，递归函数的性能有了提升。常被用来检查对象中是否存在某个键名，集合常被用来获取已存的信息。循环解构对象本身不支持迭代，但是我们可以自己添加一个生成器，返回一个，的迭代器，然后使用循环解构和。一、let和const 在JavaScript中咱们以前主要用关键var来定义变量，ES6之后，新增了定义变量的两个关键字，分别是let和const。对于变量来说，在ES5中...

curried 2019-08-26 12:16 评论0 收藏0
函数式编程中局部应用（Partial Application）和局部套用（Currying）的区别

摘要：真正留给我们要实现的仅仅是返回另外一部分用于局部应用的一元函数罢了。总结各用一句话做个小结吧局部应用是一种转换技巧，通过预先传入一个或多个参数来把多元函数转变为更少一些元的函数甚或是一元函数。局部应用（Partial Application，也译作偏应用或部分应用）和局部套用（ Currying，也译作柯里化），是函数式编程范式中很常用的技巧。本文着重于阐述它们的...

AaronYuan 2019-08-21 10:21 评论0 收藏0
JavaScript 函数式编程（三）

摘要：函数式编程一般约定，函子有一个方法，用来生成新的容器。是实现了函数并遵守一些特定规则的容器类型。定义二若为广群，且运算还满足结合律，即任意，有，则称为半群。 slide 地址四、Talk is cheap！Show me the ... MONEY! 以下内容主要参考自 Professor Frisby Introduces Composable Functional JavaScr...

whjin 2019-08-23 10:58 评论0 收藏0