数组新增方法

  • 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. 单应用模式 - Layuiadmin单页版放入TP6.0的部署方案

    thinkphp6.0.3单应用模式.layuiadmin1.4.0单页版,不需要tp的视图驱动 1. 复制 src.start 两个文件夹 2. 粘贴到 thinkphp 的 public 目录下 ...

  2. js垃圾回收和内存泄漏

    js垃圾回收和内存泄漏 js垃圾回收 Js具有自动垃圾回收机制.垃圾收集器会按照固定的时间间隔周期性的执行. 1.标记清除(常用) 工作原理:是当变量进入环境时,将这个变量标记为"进入环境& ...

  3. Python 3 列表

    列表:是可变的序列,也是一种可以存储各种数据类型的集合,用中括号([])表示列表的开始和结束,元素之间用逗号(,)分隔.列表中每个元素提供一个对应的下标. 1.列表的基本格式表示: 2.列表的不同数据 ...

  4. [程序员代码面试指南]递归和动态规划-最小编辑代价(DP)

    问题描述 输入 原字符串StrOrg,目标字符串StrTarget,插入.删除.替换的编辑代价ic,dc,rc.输出将原字符串编辑成目标字符串的最小代价. 解题思路 状态表示 dp[i][j]表示把s ...

  5. 使用阿里云OSS的服务端签名后直传功能

    网站一般都会有上传功能,而对象存储服务oss是一个很好的选择.可以快速的搭建起自己的上传文件功能. 该文章以使用阿里云的OSS功能为例,记录如何在客户端使用阿里云的对象存储服务. 服务端签名后直传 背 ...

  6. MySQL行构造器

    子查询返回多列的办法 主要用途,项目中初版使用子查询返回一列用来限制主表,项目新版本中,表关联建改为多列时建议使用

  7. Axios源码深度剖析

    Axios源码深度剖析 - XHR篇 axios 是一个基于 Promise 的http请求库,可以用在浏览器和node.js中,目前在github上有 42K 的star数 分析axios - 目录 ...

  8. Java内部类使用场景和作用

    一.Java内部类的分类 Java内部类一般包括四种:成员内部类.局部内部类.匿名内部类和静态内部类 大多数业务需求,不使用内部类都可以解决,那为什么Java还要设计内部类呢. 二.内部类的使用场景 ...

  9. JVM-概述和内存区域

    目录 JVM的优势 Java的跨平台性 JVM跨语言 举个例子 JVM整体结构 运行时数据区 方法区(Method Area) 1. 什么是方法区(Method Area)? 2.方法区(Method ...

  10. 安装Windows10操作系统 - 初学者系列 - 学习者系列文章

    今天无事,就将安装操作系统的几种方式进行了总结( https://www.cnblogs.com/lzhdim/p/13719725.html ).这篇博文主要是对安装windows10操作系统的过程 ...