数组新增方法

  • map（可以理解为是映射，以一定规则修改数组每一项并返回全新数组）
  • reduce（可以理解为是汇总，一堆出来一个）
  • filter（可以理解为过滤，筛选的意思，以一定规则拿到符合的项并返回新数组）
  • forEach（感觉和for循环是一个作用）

map示例

示例代码如下：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>map</title>

</head>

<body>

  <script>

    var arr = [1,2,3,4];

    var resultArr = arr.map(function(item){

      return item*2

    });

    console.log(arr,resultArr);

  </script>

</body>

</html>

测试地址

reduce示例

示例代码如下：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>reduce</title>

</head>

<body>

  <script>

    /*

    *注:reduce默认有三个参数，第一个参数是每一次求值的结果值(初始等于数组第一项)，

    *第二个参数是下一项要计算的项，第三个值为第二个参数在数组中的索引

    */

    var arr = [60,20,31,54];

    //求数组各项和

    var result = arr.reduce(function(temp,next,index){

      return temp+next;

    });

    //求平均值

    var result0 = arr.reduce(function(temp,next,index){

      if(index < arr.length-1){

        return temp + next;

      }else{

        return (temp+next) / arr.length;

      }

    })

    console.log(arr,result,result0);

  </script>

</body>

</html>

测试地址

filter示例

示例代码如下：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>filter</title>

</head>

<body>

  <script>

    /*

    *注：根据函数的返回值的真假来决定当前项需不需要放入要返回的新数组中

    *itme就是数组的每一项的值，如果return为空则把当前item放入返回的数组中

    */

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

    //取出数组中的偶数项

    var resultArr = arr.filter(function(item){

      return item % 2 === 0;

    })

    console.log(arr,resultArr);

  </script>

</body>

</html>

测试地址

forEach示例

示例代码如下：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>forEach</title>

</head>

<body>

  <script>

    /*

    *对数组执行遍历，其中三个参数依次为当前遍历到的项，当前项的索引，和被遍历的数组本身

    */

    var arr = [1,2,3,4];

    arr.forEach(function(item,index,arr){

      console.log(item,index,arr);

    })

  </script>

</body>

</html>

ES6之数组的更多相关文章

  1. ES6定型数组

    前面的话 定型数组是一种用于处理数值类型(正如其名,不是所有类型)数据的专用数组,最早是在WebGL中使用的,WebGL是OpenGL ES 2.0的移植版,在Web 页面中通过 <canvas ...

  2. 分别使用ES5和ES6进行数组去重以及注意事项

    ES6,ES5数组去重 使用Es6进行数组去重 var arr = [false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN]; ...

  3. ES6对数组的扩展(简要总结)

    文章目录 数组的扩展(ES6) 1. 扩展运算符 2. Array.from 3. Array.of() 4. copyWithin() 5. find() 和 findIndex() 6. fill ...

  4. ES6之数组扩展方法【一】（相当好用）

    form 转化为真正的数组 先说一下使用场景,在Js中,我们要经常操作DOM,比如获取全部页面的input标签,并且找到类型为button的元素,然后给这个按钮注册一个点击事件,我们可能会这样操作: ...

  5. ES6(五) 数组扩展

    Array.of方法用于将一组值,转换为数组.  Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES ...

  6. 关于ES6的数组字符串方法

    注:ES6的一些新属性会显示语法错误,不过不会影响效果,在Languages里面也可以调: let:用来定义变量 特点:只能在代码块里面使用,let拥有块级作用域;并且let不允许重复声明;比如: v ...

  7. ES6中数组的新方法

    数组的扩展 1.1扩展运算符 1.1.1:... 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. <body> < ...

  8. ES6 二进制数组

    二进制数组(ArrayBuffer对象.TypedArray视图和DataView视图)是JavaScript操作二进制数据的一个接口.这些对象早就存在,属于独立的规格(2011年2月发布),ES6将 ...

  9. ES6，数组遍历

    ES6提供了entries(),keys(),values()方法返回数组的遍历器,对于遍历器(Iterator)可以使用for...of进行便利,也可是使用entries()返回的遍历器Iterat ...

  10. ES6（数组）

    ES6数组新增特性 1. 空数组 2.将伪数组转换成真正的数组 将 p 标签集合转换成真正数组 类似于map的用法,转换数组同时还在遍历. 3.填充数组(将所有数组换成一个值) 1代表起始位置,3代表 ...

随机推荐

  1. Spring Boot入门，源码解析

    目录 1.Spring Boot简介 2.微服务 3.Spring Boot HelloWorld 3.1 创建一个Maven工程 3.2 导入依赖Spring Boot相关的依赖 3.3 编写一个主 ...

  2. 理解Clip Path

    http://www.w3cplus.com/css3/using-making-sense-of-clip-path.html http://www.cnblogs.com/coco1s/p/602 ...

  3. SpringCloud-config分布式配置

    为什么要统一管理微服务配置? 随着微服务不断的增多,每个微服务都有自己对应的配置文件.在研发过程中有测试环境.UAT环境.生产环境,因此每个微服务又对应至少三个不同环境的配置文件.这么多的配置文件,如 ...

  4. App网络测试

    弱网测试作为健壮性测试的重要部分,对于移动端测试必不可少. 什么样的网络属于弱网? 小于或等于2G速率的都属于弱网,且随着5G的到来,3G网络速率的降低,未来3G也会逐渐划入弱网的行列. 对于弱网的数 ...

  5. Java虚拟机栈--栈帧

    栈帧的内部结构 每个栈帧中存储着 1.局部变量表(Local Variables) 2.操作数栈(Operand Stack)(或表达式栈) 3.动态链接(Dynamic Linking)(或执行&q ...

  6. Docker实战（6）: 导出docker镜像离线包

    前言 离线环境安装Docker 镜像,我已知两种情况,以下操作我将采用在可访问外网的机器上通过镜像迁移的方式来给离线环境安装. 环境:服务器node1可访问外网.服务器node2无法访问外网 两台机器 ...

  7. .NET Core开源导入导出库 Magicodes.IE 2.3发布

    在2.3这一版本的更新中,我们迎来了众多的使用者.贡献者,在这个里程碑中我们也添加并修复了一些功能.对于新特点的功能我将在下面进行详细的描述,当然也欢迎更多的人可以加入进来,再或者也很期待大家来提is ...

  8. 从零搭建Spring Boot脚手架（7）：Elasticsearch应该独立服务

    1. Spring Data Elasticsearch Spring Data Elasticsearch是Spring Data项目的子项目,提供了Elasticsearch与Spring的集成. ...

  9. spring cloud微服务快速教程之（十四）spring cloud feign使用okhttp3--以及feign调用参数丢失的说明

    0-前言 spring cloud feign 默认使用httpclient,需要okhttp3的可以进行切换 当然,其实两者性能目前差别不大,差别较大的是很早之前的版本,所以,喜欢哪个自己选择: 1 ...

  10. 论文阅读 SNAPSHOT ENSEMBLES

    引入 1. 随机梯度下降的特点 随机梯度下降法(Stochastic Gradient Descent)作为深度学习中主流使用的最优化方法, 有以下的优点: 躲避和逃离假的鞍点和局部极小点的能力 这篇 ...