数组常用方法总结 (3) ：map / forEach / every / some

news2025/4/21 5:11:07

map

  • 遍历数组的每一项。
  • 如果是简单数组，不改变原始数组（值类型）。
  • 如果是对象数组，原始数组可以被改变（引用类型）。
  • 遍历原始数组，返回值为原始数组的每一项，最终可组合成新数组。

简单数组

<template>
    <div class="myBlock">
        <div class="tableBlock">
            <div class="title">原始数组</div>
            <div class="float">
                <div
                    v-for="(item, index) in tableData"
                    :key="index"
                    class="sinFloat"
                >
                    {{ item }}
                </div>
            </div>
        </div>
        <div class="operate">
            <el-button type="success" plain @click="operate"> map </el-button>
        </div>
        <div class="title" v-if="newObject">操作后的返回值</div>
        <div class="newObject">
            {{ newObject }}
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [12, 18, 53, 100],
            num: 0,
            newObject: null,
        };
    },
    watch: {},
    mounted() {},
    methods: {
        operate() {
            this.newObject = this.tableData.map((item, index, arr) => {
                // 简单数组-重新赋值-不会被改变
                item = Number(item) + 1;
                // 返回对象
                return item;
            });
            this.num += 1;
        },
    },
};
</script>

操作前

操作前

操作后

操作后

对象数组

<template>
    <div class="myBlock">
        <div class="tableBlock">
            <div class="title">原始数组</div>
            <el-table :data="tableData" :key="num" stripe border>
                <el-table-column prop="num" label="序号"> </el-table-column>
                <el-table-column prop="value" label="值"> </el-table-column>
            </el-table>
        </div>
        <div class="operate">
            <el-button type="success" plain @click="operate"> map </el-button>
        </div>
        <div class="title" v-if="newObject">操作后的返回值</div>
        <div class="newObject">
            {{ newObject }}
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [
                { num: "1", value: "12" },
                { num: "2", value: "18" },
                { num: "3", value: "53" },
                { num: "4", value: "100" },
            ],
            num: 0,
            newObject: null,
        };
    },
    watch: {},
    mounted() {},
    methods: {
        operate() {
            this.newObject = this.tableData.map((item, index, arr) => {
                // 对象数组-重新赋值-会被改变
                item.value = Number(item.value) + 1;
                // 返回对象
                return item;
            });
            this.num += 1;
        },
    },
};
</script>

操作前

操作前

操作后

操作后

  • 简单数组和对象数组的区别，大概类似于值类型与引用类型重新赋值的区别

值类型与引用类型

forEach

  • 遍历数组的每一项。
  • 与 map 一样，如果是简单数组，原始数组不会被改变。如果是对象数组，原始数组可以被改变。
  • 与 map 不同的是，forEach 不会返回数据。不会形成新数组。
<template>
    <div class="myBlock">
        <div class="tableBlock">
            <div class="title">原始数组</div>
            <el-table :data="tableData" :key="num" stripe border>
                <el-table-column prop="num" label="序号"> </el-table-column>
                <el-table-column prop="value" label="值"> </el-table-column>
            </el-table>
        </div>
        <div class="operate">
            <el-button type="success" plain @click="operate"> forEach </el-button>
        </div>
        <div class="title" v-if="newObject">操作后的返回值</div>
        <div class="newObject">
            {{ newObject }}
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [
                { num: "1", value: "12" },
                { num: "2", value: "18" },
                { num: "3", value: "53" },
                { num: "4", value: "100" },
            ],
            num: 0,
            newObject: null,
        };
    },
    watch: {},
    mounted() {},
    methods: {
        operate() {
            this.newObject = this.tableData.forEach((item, index, arr) => {
                // 对象数组-重新赋值-会被改变
                item.value = Number(item.value) + 1;
                // 返回对象
                return item;
            });
            console.log(this.newObject);// undefined
            this.num += 1;
        },
    },
};
</script>

操作前

操作前

操作后

操作后

every

  • 用于检测数组的每一项是否符合限定条件。
  • 只要遇到一个 false 就会停止检测，如果数组内容全都符合条件，则返回 true。
  • 同上述方法一样，在循环中，如果是简单数组，数据不会被改变，如果是对象数组，数据会改变。
  • 如果停止了循环，后续对数据的改变也会停止。
<template>
    <div class="myBlock">
        <div class="tableBlock">
            <div class="title">原始数组</div>
            <el-table :data="tableData" :key="num" stripe border>
                <el-table-column prop="num" label="序号"> </el-table-column>
                <el-table-column prop="value" label="值"> </el-table-column>
            </el-table>
        </div>
        <div class="operate">
            <el-button type="success" plain @click="operate"> every </el-button>
        </div>
        <div class="title" v-if="newObject">操作后的返回值</div>
        <div class="newObject">
            {{ newObject }}
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [
                { num: "1", value: "12" },
                { num: "2", value: "18" },
                { num: "3", value: "53" },
                { num: "4", value: "100" },
            ],
            num: 0,
            newObject: null,
        };
    },
    watch: {},
    mounted() {},
    methods: {
        operate() {
            this.newObject = this.tableData.every((item, index, arr) => {
                item.value = Number(item.value) + 1;
                console.log("index:" + index + ",item:" + item.value);
                return item.value < 50;
            });
            this.num += 1;
        },
    },
};
</script>

操作前

操作前

操作后

  • 循环到第 3 项的时候，返回了 false，循环停止，则第 4 项的值 100 未进行数据改变的操作。

操作后
打印内容

some

  • 用于检测数组的每一项是否符合限定条件。
  • 只要遇到一个符合条件的，就会返回 true 并且停止循环。
  • 同上述方法一样，在循环中，如果是简单数组，数据不会被改变，如果是对象数组，数据会改变。
  • 如果停止了循环，后续对数据的改变也会停止。
<template>
    <div class="myBlock">
        <div class="tableBlock">
            <div class="title">原始数组</div>
            <el-table :data="tableData" :key="num" stripe border>
                <el-table-column prop="num" label="序号"> </el-table-column>
                <el-table-column prop="value" label="值"> </el-table-column>
            </el-table>
        </div>
        <div class="operate">
            <el-button type="success" plain @click="operate"> some </el-button>
        </div>
        <div class="title" v-if="newObject">操作后的返回值</div>
        <div class="newObject">
            {{ newObject }}
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [
                { num: "1", value: "12" },
                { num: "2", value: "18" },
                { num: "3", value: "53" },
                { num: "4", value: "100" },
            ],
            num: 0,
            newObject: null,
        };
    },
    watch: {},
    mounted() {},
    methods: {
        operate() {
            this.newObject = this.tableData.some((item, index, arr) => {
                item.value = Number(item.value) + 1;
                console.log("index:" + index + ",item:" + item.value);
                return item.value < 50;
            });
            this.num += 1;
        },
    },
};
</script>

操作前

操作前

操作后

  • 数组第 1 项符合条件，则循环停止，返回结果 true。只有第 1 项的数据参与了数据的改变操作。

操作后
擦音内容

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/156602.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

LeetCode 78 子集 | 解题思路分享

LeetCode 78 子集 | 解题思路分享

原题链接&#xff1a;78. 子集 - 力扣&#xff08;LeetCode&#xff09; 题目难度&#xff1a;中等 题目描述 给你一个整数数组 nums &#xff0c;数组中的元素 互不相同 。返回该数组所有可能的子集&#xff08;幂集&#xff09;。 解集 不能 包含重复的子集。你可以按 任…
阅读更多...
忆享聚焦|5G投资、网络安全市场、云计算、Web3技术……近期热点资讯一览

忆享聚焦|5G投资、网络安全市场、云计算、Web3技术……近期热点资讯一览

“忆享聚焦”栏目第11期来啦&#xff01;本栏目汇集近期互联网最新资讯&#xff0c;聚焦前沿科技&#xff0c;关注行业发展动态&#xff0c;筛选高质量讯息&#xff0c;拓宽用户视野&#xff0c;让您以最低的时间成本获取最有价值的行业资讯。目录行业资讯1. SA&#xff1a;全球…
阅读更多...
ubuntu虚拟机VmWare与主机共享文件夹

ubuntu虚拟机VmWare与主机共享文件夹

一、说明&#xff1a; 宿主操作系统&#xff1a;Windows 11 64位。 客户操作系统&#xff1a;Ubuntu 18.04.1 64位。 虚拟机软件&#xff1a;VMware Workstation 17 pro 二、步骤&#xff1a; 1、参考教程链接1&#xff0c;在主机设置共享文件夹。 注意&#xff1a;教程链接…
阅读更多...
聚焦技术，2022巨杉荣获国内外多家权威机构认可

聚焦技术，2022巨杉荣获国内外多家权威机构认可

作为分布式数据库的领先企业 巨杉成立十年来&#xff0c;一直聚焦分布式技术的自研与深耕 在分布式数据库领域已取得丰硕的成果 回望2022&#xff0c;巨杉除在客户案例及产品方面屡获殊荣外 也凭借过硬的技术实力及规模化的行业应用 得到多家国内外权威机构的认可 国际权威…
阅读更多...
TensorRT学习笔记--基本概念和推理流程

TensorRT学习笔记--基本概念和推理流程

目录 前言 1--Tensor RT基本概念 2--推理流程 3--实例代码 前言 以下 Tensor RT 的基本概念和推理流程均为博主自我的理解&#xff0c;可能部分内存会存在错误或偏差&#xff0c;仅供参考&#xff01; 1--Tensor RT基本概念 ① Logger&#xff1a;日志记录器&#xff0c;…
阅读更多...
ssm：spring定时任务Task和CronExpression表达式

ssm：spring定时任务Task和CronExpression表达式

开发一个定时任务&#xff1a;每天晚上23点执行数据归集任务 首先Spring配置文件&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.or…
阅读更多...
Java中的常用的代理模式

Java中的常用的代理模式

本文介绍在Java种常用的3种动态代理。 代理模式是23种模式中的一种&#xff0c;属于结构型设计模式。这种模式的作用就是要创建一个中间对象&#xff08;相当于中介或者代理对象&#xff09;&#xff0c;通过操作中间对象来间接调用目的对象的方法&#xff0c;字段等&#xff0…
阅读更多...
Everything搜索知识总结

Everything搜索知识总结

1.只知道那个文件以 .txt结尾 .*\.txt$ ($表示以什么结尾) 2.搜索某个路径下的文件 D:\ configure.bat (搜索D盘下的该文件,注意要用这种类型的"\",和被搜索的文件之间有空格;要先打出路径,再打出搜索文件.) 3.搜索指定路径下的多个文件 路径\ 文件1 | …
阅读更多...
Halcon亚像素边缘缺陷检测案例

Halcon亚像素边缘缺陷检测案例

一、下面的案例是总结的Halcon边缘缺陷检测的一种情况。本案例是利用阈值分割获取金属区域&#xff0c;并利用boundary和edges_sub_pix获取到亚像素边缘。然后综合利用fit_rectangle2_contour_xld拟合出金属对应的放射矩形&#xff0c;最后利用dist_rectangle2_contour_points_…
阅读更多...
【小白课程】openKylin用户手册原理解析，一招教你学会自定义！

【小白课程】openKylin用户手册原理解析，一招教你学会自定义！

openKylin用户手册是详细描述openKylin操作系统的功能和用户界面&#xff0c;让用户了解如何使用该软件的说明书。通过阅读openKylin用户手册&#xff0c;能够更快更好的上手和使用openKylin操作系统。今天就带大家简单了解下openKylin用户手册的实现原理以及如何自定义用户手册…
阅读更多...
用EditPlus编译Fortran

用EditPlus编译Fortran

一、EditPlus配置 语法点亮 安装好EditPlus后&#xff0c;点击Tool->Prefenrences&#xff0c;在File->Setting&syntex下&#xff0c;点击Add按钮&#xff0c;填Frotran。 到EditPlus官网上 EditPlus - User Files (other files) 下载Fortran语法文件 ​ 二、配置…
阅读更多...
设计模式学习（四）：Strategy策略模式

设计模式学习（四）：Strategy策略模式

一、什么是Strategy模式 Strategy的意思是“策略”&#xff0c;指的是与敌军对垒时行军作战的方法。在编程中&#xff0c;我们可以将它理解为“算法”。无论什么程序&#xff0c;其目的都是解决问题。而为了解决问题&#xff0c;我们又需要编写特定的算法。使用Strategy模式可以…
阅读更多...
Redis- 主从复制原理

Redis- 主从复制原理

1、概述 Master节点在平时提供服务&#xff0c;另外一个或多个Slave节点在平时不提供服务&#xff08;或只提供数据读取服务&#xff09;。当Master节点由于某些原因停止服务后&#xff0c;再人工/自动完成Slave节点到Master节点的切换工作&#xff0c;以便整个Redis集群继续向…
阅读更多...
Spring依赖注入源码分析

Spring依赖注入源码分析

1. 前言 Spring的核心之一就是依赖注入&#xff0c;Spring提供了Autowired注解来给bean注入依赖。除了注入最基本的bean之外&#xff0c;Spring还做了一些扩展&#xff0c;例如你可以注入Optional&#xff0c;以此来判断依赖的bean是否存在&#xff1b;你还可以注入Map来获得所…
阅读更多...
Leetcode：617. 合并二叉树（C++）

Leetcode：617. 合并二叉树（C++）

目录 问题描述&#xff1a; 实现代码与解析&#xff1a; 递归&#xff1a; 原理思路&#xff1a; 迭代&#xff1a; 原理思路&#xff1a; 问题描述&#xff1a; 给你两棵二叉树&#xff1a; root1 和 root2 。 想象一下&#xff0c;当你将其中一棵覆盖到另一棵之上时&am…
阅读更多...
leetcode 399. 除法求值-java题解

leetcode 399. 除法求值-java题解

题目所属分类 flod最短路算法 原题链接 给你一个变量对数组 equations 和一个实数值数组 values 作为已知条件&#xff0c;其中 equations[i] [Ai, Bi] 和 values[i] 共同表示等式 Ai / Bi values[i] 。每个 Ai 或 Bi 是一个表示单个变量的字符串。 另有一些以数组 queri…
阅读更多...
编译metabase

编译metabase

Linux Centos7 配置Metabase编译打包环境 安装Oracle JDK1.8&#xff08;如果已经安装&#xff0c;则可以省略此步骤&#xff0c;必须是Oracle JDK&#xff09; 在线下载Oracle JDK 1.8 将下载好的tar包放入linux目录下 2、解压tar进行安装 tar -zxvf jdk-8u212-linux-x64.t…
阅读更多...
SSL/TLS协议信息泄露漏洞(CVE-2016-2183)

SSL/TLS协议信息泄露漏洞(CVE-2016-2183)

最近服务器扫描出SSL/TLS协议信息泄露漏洞(CVE-2016-2183) TLS是安全传输层协议&#xff0c;用于在两个通信应用程序之间提供保密性和数据完整性。 TLS, SSH, IPSec协商及其他产品中使用的DES及Triple DES密码存在大约四十亿块的生日界&#xff0c;这可使远程攻击者通过Sweet…
阅读更多...
总结几个常用的Git命令的使用方法

总结几个常用的Git命令的使用方法

目录 1、Git的使用越来越广泛 2、设置Git的用户名和密码并查看 3、建立自己的 Git 仓库 4、将自己的代码提交到远程 (origin) 仓库 5、同步远程仓库的更新到本地仓库 6、分支管理 7、获取远程仓库的内容 1、Git的使用越来越广泛 现在很多的公司或者机构都在使用Git进行项目和代…
阅读更多...
Elasticsearch基础1——搜索引擎发展史和工作流程、es\es-head\kibana的基础安装

Elasticsearch基础1——搜索引擎发展史和工作流程、es\es-head\kibana的基础安装

文章目录一、搜索引擎1.1 搜索引擎的发展背景1.2 Lucene和Elasticsearch1.3 Solr和Elasticsearch对比1.4 数据搜索方式1.5 搜索引擎1.5.1 搜索引擎工作流程1.5.2 网络爬虫原理流程1.5.3 网页分析1.5.4 正排索引和倒排索引二、Elasticsearch基础安装1.2 概述简介2.2 安装2.2.1 W…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023