react笔记之数组得方法-天翼云

react笔记之数组得方法

2024-06-12 09:26:30 阅读次数：21

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>数组的方法</title>
    <script>

        const arr = [1, 2, 3, 4, 5];

        /*
        *   map()
        *       - 可以根据原有数组返回一个新数组
        *       - 需要一个回调函数作为参数，回调函数的返回值会成为新数组中的元素
        *       - 回调函数中有三个参数：
        *           第一个参数：当前元素
        *           第二个参数：当前元素的索引
        *           第三个参数：当前数组
        *
        *   filter()
        *       - 可以从一个数组中获得符和条件的元素
        *       - 会根据回调函数的结果来决定是否保留元素，true保留，false不保留
        *
        *   find()
        *       - 可以从一个数组中获得符和条件的第一个元素
        *
        *   reduce()
        *       - 可以用来合并数组中的元素
        *       - 需要两个参数：
        *           回调函数（指定运算规则）
        *               四个参数：
        *                   prev 上一次运算结果
        *                   curr 当前值
        *                   index 当前索引
        *                   arr 当前数组
        *           初始值
        *               - 用来指定第一次运算时prev，如果不指定则直接从第二个元素开始计算
        * */
        let result = arr.map((item) => {
            return item + 2;
        });

        result = arr.map((item, index, array) => {
            return item + 2;
        });

        // console.log(result);

        const arr2 = ['孙悟空', '猪八戒', '沙和尚'];
        /*
        *   <li>孙悟空</li>
        *   <li>猪八戒</li>
        *   <li>沙和尚</li>
        * */

        result = arr2.map(item => "<li>" + item + "</li>");


        result = arr.filter(item => item % 2 === 0);
        result = arr.find(item => item % 2 === 0);


        result = arr.reduce((prev, curr, index) => {
            console.log(index, prev, curr);
            return prev + curr
        },0);
        console.log(result);


    </script>
</head>
<body>

</body>
</html>

活动

应用商城

合作伙伴

开发者

支持与服务

了解天翼云

react笔记之数组得方法

react笔记之数组得方法

相关文章

第一个React程序

JavaScript高级之继承

前端项目实战205-数据处理成二维数组

前端工作总结242-uni-提交成功加入表单验证

从纯函数讲起，一窥最深刻的函子 Monad

JavaScript高级之数据类型及其判断方法

JavaScript-属性方法分类

Patroni的执行流

JavaWeb——jQuery常用方法

react笔记之类笔记

作者介绍

最新文章

前端工作总结242-uni-提交成功加入表单验证

react笔记之类笔记

vue课程72 侦听器-用法总结

使用FullCalendar做日程安排

前端项目实战230-ant design 5.0 checkbox块级化

学习javascript基础知识系列第三节 - ()()用法

热门文章

Jsp Ajax之模拟用户注册

React工作53:传参payload

js: json的序列化和反序列化

中秋不加班：js枚举值enums在业务中的应用案例

react18-学习笔记14-枚举（Enum）

使用axios完成JS文件流式下载文件

热门标签

相关产品

弹性云主机

天翼云电脑（公众版）

对象存储

云硬盘

随机文章

好客租房52-通讯的三种方式（兄弟组件的传递）

好客租房50-通讯的三种方式（父组件传递给子组件）

Vue课程22-使用babel-loader处理高级的js语法

使用FullCalendar做日程安排

vue再读9-实例选项method

JS数组filter、map、reduce函数的详细使用说明