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. C. Jury Marks 思维

    C. Jury Marks 这个题目虽然是只有1600,但是还是挺思维的. 有点难想. 应该可以比较快的推出的是这个肯定和前缀和有关, x x+a1 x+a1+a2 x+a1+a2+a3... x+s ...

  2. node能做的性能优化

    开发中,我们就离不开性能优化,那么在使用node开发的时候,我们可以使用那些代码来优化性能呢 一.释放内存 当node运行检测到错误的时候,释放掉内存 http.get(str,(res)=>{ ...

  3. 按照这些优化技巧来写 SQL，连公司 DBA 也鼓掌称赞！

    原文链接:按照这些优化技巧来写 SQL,连公司 DBA 也鼓掌称赞! 刚毕业的我们,都以为使用 MySQL 是非常的简单的,无非都是照着 [select from where group by ord ...

  4. 【HBase】Java实现过滤器查询

    目录 概述 代码实现 rowKey过滤器RowFilter 列族过滤器FamilyFilter 列过滤器QualifierFilter 列值过滤器ValueFilter 专用过滤器 单列值过滤器 Si ...

  5. [hdu3572]最大流(dinic)

    题意:有m台机器,n个任务,每个任务需要在第si~ei天之间,且需要pi天才能完成,每台机器每天只能做一个任务,不同机器每天不能做相同任务,判断所有任务是否可以做完. 思路: 把影响答案的对象提取出来 ...

  6. Zkeys：低门槛、易操作的智能云管理系统

    ZKEYS系统是一个功能强大的智能化管理系统,目前国内最大的IDC业务管理系统之一.功能模块涵盖用户中心系统.财务系统.工单系统.备案系统和云服务器.服务托管器.虚拟主机等产品的弹性在线购买及及时开通 ...

  7. 今天玩一下python得邮件解析吧，查看邮件内容小儿科，我们下载邮件的附件

    直男,直接上代码. 自己看打印的内容 主要功能如下: #如果邮件内容存在链接则返回链接,若不存在则直接下载邮件附件 import imapclient,re import pyzmail #提取邮件里 ...

  8. js理论-函数中的Arguments对象

    详情参考:https://github.com/mqyqingfeng/Blog/issues/14 如果: arguments和实参的关系,以及arguments的属性 附上代码和注解 functi ...

  9. 05JAVA基础方法

    一.格式 函数有返回值 public static 返回类型 方法名(参数类型 形参1,参数类型 形参2){ 函数体; return 返回值;//返回值必须是定义的返回类型 } 函数没有有返回值 pu ...

  10. CentOS7.2 安装 MongoDB 3.4

    服务器版本 CentOS7.2 MongoDB版本 3.4 1/ 下载所需资源 阿里镜像地址 http://mirrors.aliyun.com/mongodb/yum/redhat/7/mongod ...