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. Python库的安装与查看

    安装库:    Step1:  win+r键打开此页面,并输入cmd     Step2 :键入cmd并点击确定    Step3 :键入语句:“ pip install 库名 “ 回车即可 这样库就 ...

  2. java读源码 之 queue源码分析（PriorityQueue，附图）

    今天要介绍的是基础容器类(为了与并发容器类区分开来而命名的名字)中的另一个成员--PriorityQueue,它的大名叫做优先级队列,想必即使没有用过也该有所耳闻吧,什么?没..没听过?emmm... ...

  3. 【Spark】这一篇或许能让你大概了解如何通过JavaAPI实现DataFrame的相关操作

    文章目录 需求概述 步骤 一.创建Maven工程并导包 二.选用第一种方法:利用反射机制配合样例类构建DataFrame 开发代码 选用第二种方法:通过StrucType配合Row构建DataFram ...

  4. qt获取指定目录下符合条件的文件路径

    1)设置名称过滤器 QDir * dir = new QDir(路径); QStringList filter; Filter << QStringLiteral(“筛选的文件条件,如.x ...

  5. 译文：在GraalVM中部署运行Spring Boot应用

    GraalVM是一种高性能的多语言虚拟机,用于运行以JavaScript等基于LLVM的各种语言编写的应用程序.对于Java应用也可作为通常JVM的替代,它更具有性能优势.GraalVM带来的一个有趣 ...

  6. 数据库连接池Druid的介绍，配置分析对比总结

    Druid的简介 Druid首先是一个数据库连接池.Druid是目前最好的数据库连接池,在功能.性能.扩展性方面,都超过其他数据库连接池,包括DBCP.C3P0.BoneCP.Proxool.JBos ...

  7. AndroidStudio3.6升级后的坑-apk打包

    前段时间尝试了最新版的AndroidStudio3.6,整体来说gradle调试和自带的虚拟机相比较历史版本有了更香的体验. 刚好有个新项目,就直接使用最新版了,这次新版的升级除了保持原有的界面风格, ...

  8. Fragment 嵌套Fragment注意事项

    最近项目新功能需要在垂直方方向可以循环滚动,并且水平方向也可以水平循环滚动,并且可以定位到指定item上.很自然的想到了ViewPager和 VerticalViewPager来解决项目需求,UI的大 ...

  9. 2018-06-26 jq选择器

    0.选择器的目的就是为了方便快速找到元素从而操作元素! 1.基本选择器 *  -> 所有标签 #id ->id选择器 .class -> 类选择器 h1,h2 -> 组合选择器 ...

  10. 黑马程序员_毕向东_Java基础视频教程——位运算符（随笔）

    位运算符 左移和右移 左移 左移越移越大. 往左移几位就相当于这个数乘于2的几次方 3 << 2 --> 3 * 2^2 = 3 * 4 = 12 3 << 3 --&g ...