数组新增方法

  • 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. 转载 深入理解Nginx及使用Nginx实现负载均衡

    转载:https://developer.51cto.com/art/202001/609322.htm 正向代理是代理客户端,也就是客户端能真正接触到的,比如访问外网时需要使用VPN软件,在这个软件 ...

  2. Tomcat源码分析（下载、启动）

    1.下载Tomcat源代码: https://tomcat.apache.org/download-80.cgi 2. 解压以及创建必要目录和配置 解压.新建catalina-home目录,同时将目录 ...

  3. 【Flutter 实战】菜单（Menu）功能

    老孟导读:今天介绍下Flutter中的菜单功能. PopupMenuButton 使用PopupMenuButton,点击时弹出菜单,用法如下: PopupMenuButton<String&g ...

  4. White Bird(AOJ 2308)

    原题如下: Angry Birds is a mobile game of a big craze all over the world. You were convinced that it was ...

  5. django之安装和项目创建

    dos界面下安装django 自动下载和安装:cmd:pip3 install  django 手动安装: 1.登录django官网下载django 2.下载地址:https://www.django ...

  6. 我的Python自学之路-003 字符串的知识

    '''字符串是以引号或者单引号括起来的任意文本,例如"123","asdfjk",'adfa'引号或者单引号,只是一种表示方法,并不是字符串的一部分如果字符串本 ...

  7. java虚拟机5 字节码

    java字节码本质是java程序的格式化表示,便于机器处理.所以他是java程序的另一种表示,java程序包含的信息他都包含并且更加结构化. java虚拟机字节码格式: magic 魔数,标识该文件是 ...

  8. dubbo学习（四）配置dubbo 注解方式配置

    provider(生产者) service注解暴露服务 /** * 用户管理实现类 */ @Service //用的dubbo的注解,表明这是一个分布式服务 @Component //注册为sprin ...

  9. Oracle学习（十）Oracle定时任务

    一.Oracle定时任务基础 简介 oracle job 是应用在数据库层面,用来定时执行存储过程或者 SQL 语句的定时器. 查询 --当前库中运行的 job SELECT t.* FROM dba ...

  10. is_mobile()判断手机移动设备

    is_mobile()判断手机移动设备.md is_mobile()判断手机移动设备 制作响应式主题时会根据不同的设备推送不同的内容,是基于移动设备网络带宽压力,避免全局接收pc端内容. functi ...