数组新增方法

  • 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. SSH框架下页面跳转入门篇

    一.完成目标,因为WEB-INF下面的界面不能通过输入地址的方式直接访问,所以需要在后台定义一个方法跳转过去. 步骤1:.创建普通类继承ActionSupport类,并定义一个方法返回需要跳转的路径 ...

  2. Python 面试题 字符串 删除多少个字符使得出现做多的字符数量大于等于字符串长度的一半.

    str1 = input() num = {} for i in set(str1): num[i]=str1.count(i) max_value = max(num.values()) n=abs ...

  3. 安卓自动化测试工具Monkey简单使用

    一.首先安装adb 地址:http://www.downza.cn/soft/219906.html安装到D盘下,安装的过程中自己注意下不要安装上全家桶.找到这个压缩包:解压到当前文件夹: 二.将ad ...

  4. Mybatis注解开发案例（入门）

    1.创建maven工程,配置pom.xml 文件. 2.创建实体类 3.创建dao接口 4.创建主配置文件SqlMapConfig.xml 5.在SqlMapConfig.xml中导入外部配置文件jd ...

  5. SSM框架中，事务无法回滚的原因和解决

    原因: 由ServletContextListener加载spring配置文件产生的是父容器,springMVC产生的是子容器,子容器对Controller进行扫描装配时装配了@Service注解的实 ...

  6. sql中的join

    首先准备数据 有以下数据,三张表:role(角色表).hero(英雄表).skill(技能表),我们以英雄联盟的数据做示例 一个hero对应一个role(我们这里暂定) 一个role可以对应多个her ...

  7. 处理IOS浏览器在input或者textarea获取焦点后底部留一块灰色空白区域的bug

    document.body.addEventListener('focusout',function() { window.scrollTo(0,0) },false);

  8. iOS多线程之超实用理论+demo演示（可下载）

    目录 背景简介 GCD.OperationQueue 对比 核心理念 区别 GCD 队列 串行队列(Serial Queues) 并发队列(Concurrent Queues) 串行.并发队列对比图 ...

  9. 工作10年后，再看String s = new String("xyz") 创建了几个对象？

    这个问题相信每个学习java的同学都不陌生,作为一个经典的面试题,到现在工作这么多年了我真是认为挺操蛋的一个问题,在网上到现在你仍然可以看见很多讨论这个问题的人,其中不乏工作很多年的人都有争论,我认为 ...

  10. nacos快速安装

    一 什么是 Nacos 服务注册中心和配置中心. 二 使用 下载和启动 使用有两种方式 1.自己下载源码编译 2.下载编译好的压缩包 我比较懒选择了第二种方式. 最新稳定版本 下载地址:https:/ ...