标签： javascript es6

数组新增方法

  • 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之函数

    标签: es6 javascript 箭头函数 ES6为了书写方便引入了函数的全新简写方式-箭头函数 <!DOCTYPE html> <html> <head> & ...

  2. 粗看ES6之面向对象写法

    标签: es6 在es6以前,js没有类的概念,虽然有构造函数原型的方式用来做面向对向开发,但是对于书法并不是十分友好,而且对于继承实现也不是十分友好. es6引入class constructor ...

  3. 粗看ES6之JSON

    标签: es6 ES6新增JSON特性不是特别多,只是针对JSON某些情况下的写法上有一些优化: 当key值和value值对应变量名相同时 json对像中的方法书写 示例代码如下: <!DOCT ...

  4. 粗看ES6之字符串

    标签: javascript es6 字符串新增特性 新增二个方法 - startsWith/endsWith 字符串模板 - 反单引号的应用 startsWith 判断字符串以是否以某某开头,返回一 ...

  5. 粗看ES6之解构赋值

    标签: javascript es6 什么是解构赋值? 示例如下: <!DOCTYPE html> <html> <head> <meta charset=& ...

  6. 粗看ES6之变量

    标签: javascript var定义变量面临的问题 可以重复定义 无法限制变量不可修改 无块级作用域 ES6变量定义升级 新增let定义变量 新增const定义常量 let特性 有块级作用域 不可 ...

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

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

  8. ES6定型数组

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

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

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

随机推荐

  1. 【bzoj2818】: Gcd 数论-欧拉函数

    [bzoj2818]: Gcd 考虑素数p<=n gcd(xp,yp)=p 当 gcd(x,y)=1 xp,yp<=n满足条件 p对答案的贡献: 预处理前缀和就好了 /* http://w ...

  2. loj #2023. 「AHOI / HNOI2017」抛硬币

    #2023. 「AHOI / HNOI2017」抛硬币   题目描述 小 A 和小 B 是一对好朋友,他们经常一起愉快的玩耍.最近小 B 沉迷于**师手游,天天刷本,根本无心搞学习.但是已经入坑了几个 ...

  3. loj#6435. 「PKUSC2018」星际穿越（倍增）

    题面 传送门 题解 我们先想想,在这个很特殊的图里该怎么走最短路 先设几个量,\(a_i\)表示\([a_i,i-1]\)之间的点都和\(i\)有边(即题中的\(l_i\)),\(l\)表示当前在计算 ...

  4. 装饰器设计模式初探及Java中实际应用举例

    本篇随笔主要介绍用Java实现简单的装饰器设计模式: 先来看一下装饰器设计模式的类图:  从图中可以看到,我们可以装饰Component接口的任何实现类,而这些实现类也包括了装饰器本身,装饰器本身也可 ...

  5. (Python OpenGL)【5】平移 PyOpenGL

    (Python OpenGL) 原文:http://ogldev.atspace.co.uk/www/tutorial06/tutorial06.html  (英文) 下面是我翻译过来的: 背景 在本 ...

  6. object都有string

    object都有tostringString item=spinner.getSelectedItem().toString();String item01=String.valueOf(spinne ...

  7. FPGA基础学习(2) -- FIFO IP核(Quartus)

    ALTERA在LPM(library of parameterized mudules)库中提供了参数可配置的单时钟FIFO(SCFIFO)和双时钟FIFO(DCFIFO).FIFO主要应用在需要数据 ...

  8. react 中文文档案例三 （开关按钮）

    开关按钮制作   import React from 'react'; import ReactDOM from 'react-dom'; class Toggle extends React.Com ...

  9. js 时间日期大小对比

    var oDate1 = new Date(); var oDate2 = new Date("2019/01/07 10:00:00"); if (oDate1.getTime( ...

  10. P2903 [USACO08MAR]麻烦的干草打包机The Loathesome Hay Baler

    传送门 题目问的是从出发点一直跑到终点的一条链上所有齿轮的速度和 其他的不用考虑 直接搜就好了 注意求的是绝对值之和,不是和的绝对值,所以不用考虑方向问题 注意 N<=1050 数组不要只开10 ...