1.map

1.1 个人理解

  • 映射 一个对一个 例如：[45,57,138]与[{name:'blue',level:0},{name:'zhangsan',level:99},{name:'lisi',level:100}] [45,67,99]与['不及格','不及格','及格']

1.2 代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>map数组</title>

    <script>

        let score = [12, 88, 59, 99];

        // let result = score.map((item) => {

        //     if (item > 60) {

        //         return '及格'

        //     } else {

        //         return '不及格'

        //     }

        // });

        // 简写

        let result = score.map(item => item > 60 ? '及格' : '不及格');

        alert(score);

        alert(result);

    </script>

</head>

<body>

</body>

</html>

2.reduce

2.1 个人理解

  • 汇总 一堆只出来一个 例如：算个总数[12,8,4]->24 算个平均数[12,8,4]->8

2.2 代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>reduce数组</title>

    <script>

        let score = [1, 3, 6, 9];

        // 求和

        let result = score.reduce((tmp, item, index) => {

            // 前言：//第一次时tmp,item,index分别为1,3,1,按此类推

            console.log("第" + index + "次计算后返回结果:" + tmp);

            // tmp:每次计算后返回结果，依次为1,3,6 没有10,10作为最终输出

            console.log("当前的值" + item);

            // item:当前的值，依次为3,6,9

            console.log("当前值的下标" + index);

            // index:当前值的下标，依次为1,2,3  从1开始，而非0

            return tmp + item;

        });

        // 两次效果相同

        // let result = score.reduce((tmp, item) => {

        //     return tmp + item;

        // });

        alert(result);

        // 算平均数

        let scoreone = [1, 3, 6, 14];

        let resultone = scoreone.reduce((tmp, item, index) => {

            // 不是最后一次

            if (index != scoreone.length - 1) {

                console.log(index)

                return tmp + item;

            } else {

                // 最后一次

                return (tmp + item) / scoreone.length;

            }

        });

        alert(resultone);

    </script>

</head>

<body>

</body>

</html>

2.3 分析图

3.fliter 过滤器

3.1 个人理解

  • 选择自己需要的

3.2 代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>filter过滤器</title>

    <script>

        let score = [12, 88, 59, 99];

        // let result = score.filter((item) => {

        //     alert(item % 3 == 0);

        //     if (item % 3 == 0) {

        //         return true;

        //     } else {

        //         return false;

        //     }

        // });

        // 简写

        let result = score.filter(item => item % 3 == 0 ? true : false);

        alert(result);

        let arr = [{

            title: '男士衬衫',

            price: 75

        }, {

            title: '衬衫',

            price: 65000

        }, {

            title: '男士',

            price: 2250

        }];

        let resultone = arr.filter(item => item.price > 1000 ? true : false);

        console.log(resultone);

        // console.log(resultone[0].title);

    </script>

</head>

<body>

</body>

</html>

4.forEach 循环(迭代)

4.1 个人理解

  • 参数就是下标和值，然后使用即可

4.2 代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>forEach迭代循环</title>

    <script>

        let score = [12, 88, 59, 99];

        score.forEach((item, index) => {

            alert(index + ":" + item);

        });

    </script>

</head>

<body>

</body>

</html>

ES6-常用四种数组的更多相关文章

  1. xml常用四种解析方式优缺点的分析×××××

    xml常用四种解析方式优缺点的分析 博客分类: xml   最近用得到xml的解析方式,于是就翻了翻自己的笔记同时从网上查找了资料,自己在前人的基础上总结了下,贴出来大家分享下. 首先介绍一下xml语 ...

  2. jmeter常用四种断言

    jmeter常用四种断言 一.Response Assertion(响应断言)二.Size Assertion(数据包字节大小断言)三.Duration Assertion(持续时间断言)四.bean ...

  3. 创建DateFrame的常用四种方式

    import pandas as pd %pylab 一.使用numpy创建 df = pd.DataFrame(np.arange(16).reshape((4,4)), index=list('a ...

  4. Map遍历四种常用方法

    Map常用四种遍历方式 一: Map<String,String> map = new HashMap<String,String>(); for(String key:map ...

  5. AS3清空数组的四种方法

    第一种最简单的方法是: var arr:Array = ["a", "b", "c", "d", "e&quo ...

  6. C#中四种常用集合的运用(非常重要)

    C#中4个常用的集合 1.ArrayList ArrayList类似于数组,有人也称它为数组列表.ArrayList可以动态维护,而数组的容量是固定的. 它的索引会根据程序的扩展而重新进行分配和调整. ...

  7. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  8. SQL中常用模糊查询的四种匹配模式&&正则表达式

    执行数据库查询时,有完整查询和模糊查询之分.一般模糊语句如下:SELECT 字段 FROM 表 WHERE 某字段 Like 条件 其中关于条件,SQL提供了四种匹配模式:1.%:表示任意0个或多个字 ...

  9. java正则表达式四种常用的处理方式是怎么样呢《匹配、分割、代替、获取》

    java 正则表达式高级篇,介绍四种常用的处理方式:匹配.分割.替代.获取,具体内容如下package test; import java.util.regex.Matcher; import jav ...

随机推荐

  1. 数据结构之递归Demo（走迷宫）（八皇后）（汉诺塔）

    递归 顾名思义,递归就是递归就是递归就是递归就是递归......就是递归 Google递归:

  2. 单调队列+二分 G - Queue 小阳买水果

    B. Queue 这个题目会做的很偶然,突然想到的,因为我们要求离这只海象的最远的比他年轻的海象,这个年轻的海象可以用单调栈维护. 就是从前往后遍历一遍,单调栈里面存年龄从小往大的海象,这个为什么这么 ...

  3. 用最基本的遍历来实现判断字符串 a 是否被包含在字符串 b 中，并返回第一次出现的位置（找不到返回 -1）

    用最基本的遍历来实现判断字符串 a 是否被包含在字符串 b 中,并返回第一次出现的位置(找不到返回 -1) 例子: a='12';b='1234567'; // 返回 0 a='47';b='1234 ...

  4. SSM家庭财务管理系统

    包含[项目源码+论文]:http://mp.toutiao.com/preview_article/?pgc_id=6805534721838154254

  5. 一分钟明白MySQL聚簇索引和非聚簇索引

    MySQL的InnoDB索引数据结构是B+树,主键索引叶子节点的值存储的就是MySQL的数据行,普通索引的叶子节点的值存储的是主键值,这是了解聚簇索引和非聚簇索引的前提 什么是聚簇索引? 很简单记住一 ...

  6. Java 多线程启动为什么调用 start() 方法而不是 run() 方法？

    多线程在工作中多多少少会用到,我们知道启动多线程调用的是 start() 方法,而不是 run() 方法,你知道原因吗? 在探讨这个问题之前,我们先来了解一些多线程的基础知识~ 线程的状态 Java ...

  7. NetCore项目实战篇06---服务注册与发现之consul

    至此,我们的解决方案中新建了三个项目,网关(Zhengwei.Gateway).认证中心(Zhengwei.Identity)和用户资源API(Zhengwei.Use.Api).当要访问用户API的 ...

  8. python --字符串学习

    一 转义字符 借用一个特殊的方法表示一系列不方便写出的内容,比如回车键,换行符,退格键 借助反斜杠字符,一旦出现反斜杠,则反斜杠后面一个或者几个字符表示已经不是原来的意思了 在字符串中,一旦出现了斜杠 ...

  9. python100例 21-30

    021 猴子吃桃 题目:猴子吃桃问题:猴子第一天摘下若干个桃子,当即吃了一半,还不瘾,又多吃了一个第二天早上又将剩下的桃子吃掉一半,又多吃了一个.以后每天早上都吃了前一天剩下的一半零一个.到第10天早 ...

  10. SpringMVC 自定义全局PropertyEditor

    <mvc:annotation-driven></mvc:annotation-driven>注入了@Controller与@RequestMapping需要的注解类 < ...