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. 记忆化搜索 E - Loppinha, the boy who likes sopinha Gym - 101875E

    E - Loppinha, the boy who likes sopinha Gym - 101875E 这个题目是一个dp,这个应该很容易看出来,但是对于状态的定义其实有点难去想, 看了题解dp[ ...

  2. HTTP头部信息和错误代码详解-《HTTP权威指南》

    最近在调试 前后端分离的请求测试,遇到了一个405错误, 无法接受,于是开始了人肉搜索405. 最后 还是HTTP头部信息里的Accept:application/json 这个Accept 导致的, ...

  3. 关于 k210 的 micropython 添加 ussl 模块，实现 https 访问支持的那些事。

    起因 事情已经过去快一周了吧,继上次修复 maixpy k210 的 esp8285 at 通信后,突然遇到泽畔大大问,要不要做 ussl 的支持? 评估了一下各方的实现,想了一下自己也刚好在做网络层 ...

  4. STM32 IAP 升级官方资料汇总

    整理了一下SMT32标准外设库进行IAP升级的官方demo: 标准库版本 STM32F10xxx in-application programming using the USART (AN2557) ...

  5. db连接池

    目前常用的连接池有: DBCP:org.apache.commons.dbcp.BasicDataSource dataSource: 要连接的 datasource (通常我们不会定义在 serve ...

  6. [BC冠军赛(online)]小结

    A Movie 题意:给你n个区间,判断能否选出3个不相交的区间. 思路:令f(i)表示能否选出两个不相交区间并且以区间i为右区间的值,g(i)表示能否选出两个不相交区间并且以区间i为左区间的值,如果 ...

  7. 800+Java后端经典面试题，希望你找到自己理想的Offer呀~

    前言 在茫茫的互联网海洋中寻寻觅觅,我收藏了800+道Java经典面试题,分享给你们.建议大家收藏起来,在茶余饭后拿出来读一读,以备未雨绸缪之需.另外,面试题答案的话,我打算后面慢慢完善在github ...

  8. Python-实现sign签名接口校

    前言 在之前的随笔中,我们已经学过了如何使用使用JMeter和Postman实现sign签名接口校验的接口测试,今天我们来学习一下如何写Python脚本实现签名接口的接口测试. 签名接口: 地址: h ...

  9. js 控制窗口跳转

    使用iframe 或者使用子窗口时,session 失效时是浏览器地址转换 相关js代码:if(top!=self){ if(top.location != self.location) top.lo ...

  10. zsy后台管理系统-架构设计

    Zsy框架总体架构设计 1.Mysql数据库,存储所有表的数据. 2.Zsy-基础项目(Zsy-Model,Zsy-Dao,Zsy-Service,Zsy-Web),基于SSM框架.项目功能包含基本的 ...