数组常用方法总结 (2) ：sort / join / reverse / concat

news2024/11/29 11:38:43

sort

  • 排序后会改变原有数组。
  • 简单数组和对象数组都可以进行排序。
  • 默认升序排序。
<template>
    <div class="myBlock">
        <div class="tableBlock">
            <div class="title">
                {{ newObject ? "操作后的数组" : "操作前的数组" }}
            </div>
            <el-table :data="tableData" :key="num" stripe border>
                <el-table-column prop="index" label="序号" width="200">
                </el-table-column>
                <el-table-column prop="name" label="昵称"> </el-table-column>
            </el-table>
            <div class="simpleTable">
                <div class="title">提取序号简单数组</div>
                <div class="indexArr">
                    <div v-for="(item, index) in indexArr" :key="index">
                        {{ item }}
                    </div>
                </div>
                <div class="title">提取昵称简单数组</div>
                <div class="nameArr">
                    <div v-for="(item, index) in nameArr" :key="index">
                        {{ item }}
                    </div>
                </div>
            </div>
        </div>
        <div class="operate">
            <el-button type="success" plain @click="operate(1)">
                sort-提取序号-默认排序
            </el-button>
            <el-button type="success" plain @click="operate(2)">
                sort-提取序号-控制升降
            </el-button>
            <el-button type="success" plain @click="operate(3)">
                sort-提取昵称-默认排序
            </el-button>
            <el-button type="success" plain @click="operate(4)">
                sort-使用序号-控制升降
            </el-button>
        </div>
        <div class="title" v-if="newObject">操作后的返回值</div>
        <div class="newObject">
            {{ newObject }}
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [
                { index: "20", name: "ac" },
                { index: "11", name: "bz" },
                { index: "25", name: "az" },
                { index: "4", name: "zz" },
            ],
            indexArr: [],
            nameArr: [],
            num: 0,
            newObject: null,
        };
    },
    watch: {},
    mounted() {
        this.indexArr = [];
        this.nameArr = [];
        this.tableData.forEach((item, index) => {
            // 提取序号，生成简单数组
            this.indexArr.push(item.index);
        });
        this.tableData.forEach((item, index) => {
            // 提取昵称，生成简单数组
            this.nameArr.push(item.name);
        });
    },
    methods: {
        operate(flag) {
            if (flag == 1) {
                // 进行默认排序
                // 先比较第一位数字，再比较第二位数字，与 number 类型数字比较逻辑不同
                this.newObject = this.indexArr.sort();
            } else if (flag == 2) {
                // 控制顺序的排序
                this.newObject = this.indexArr.sort(function (prev, next) {
                    // prev 和 next 为相邻的两个元素，遍历数组比较元素
                    // 这里的比较会将 index 转换成 number 类型进行排序
                    // 升序
                    return prev - next;
                    // 降序
                    // return next - prev;
                });
            } else if (flag == 3) {
                // 进行默认排序
                // 先比较第一位字母，再比较第二位字母，按照码表排序
                this.newObject = this.nameArr.sort();
            } else if (flag == 4) {
                // 直接对原始数组进行排序
                this.newObject = this.tableData.sort(function (prev, next) {
                    // prev 和 next 为相邻的两个元素，遍历数组比较元素
                    // 升序
                    return prev.index - next.index;
                    // 降序
                    // return next.index - prev.index;
                });
            }

            this.num += 1;
        },
    },
};
</script>

操作前

操作前

操作后

sort-提取序号-默认排序

// 进行默认排序
// 先比较第一位数字，再比较第二位数字，与 number 类型数字比较逻辑不同
this.newObject = this.indexArr.sort();
  • 先对比数字的第一位，再对比第二位。
  • 与 number 类型的升序逻辑不同。
  • 即使是 number 类型的数值参与排序，也会被转换成字符串类型排序。

操作后

sort-提取序号-控制升降

// 控制顺序的排序
this.newObject = this.indexArr.sort(function (prev, next) {
    // prev 和 next 为相邻的两个元素，遍历数组比较元素
    // 这里的比较会将 index 转换成 number 类型进行排序
    // 升序
    return prev - next;
    // 降序
    // return next - prev;
});
  • 复杂排序时，控制升降，用到了运算符，所以将字符串类型的内容转换成了 number 类型进行排序
  • 根据 return 的值可以控制是升序还是降序

操作后

sort-提取昵称-默认排序

// 进行默认排序
// 先比较第一位字母，再比较第二位字母，按照码表排序
this.newObject = this.nameArr.sort();
  • 先比较第一位字母，再比较第二位字母
  • 按照码表进行排序

操作后

sort-使用序号-控制升降

// 直接对原始数组进行排序
this.newObject = this.tableData.sort(function (prev, next) {
    // prev 和 next 为相邻的两个元素，遍历数组比较元素
    // 升序
    return prev.index - next.index;
    // 降序
    // return next.index - prev.index;
});
  • 原始的数组在排序后会被改变。
  • 返回值为改变顺序后的数组。

操作后

join

  • 使用字符将数组内容拼接起来。
  • 返回值为字符串类型。
  • 不会改变拼接前数组的内容。
  • 可用于拼接键值对数组内容（如下示例）。
<template>
    <div class="myBlock">
        <div class="tableBlock">
            <div class="title">原始数组</div>
            <el-table :data="tableData" :key="num" stripe border>
                <el-table-column prop="key" 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"> join </el-button>
        </div>
        <div class="title" v-if="newObject">操作后的返回值</div>
        <div class="newObject">
            {{ newObject }}
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [
                { key: "name", value: "张三" },
                { key: "age", value: "18" },
                { key: "phone", value: "153****0000" },
                { key: "idCard", value: "100000********0000" },
            ],
            num: 0,
            newObject: null,
        };
    },
    watch: {},
    mounted() {},
    methods: {
        operate() {
            let keyVal = [];
            this.tableData.forEach((item, index) => {
                keyVal.push(item.key + "=" + item.value);
            });
            this.newObject = keyVal.join("&");
        },
    },
};
</script>

操作前

操作前

操作后

操作后

reverse

  • 改变原有数组的排序（反向）。
  • 适用普通数组和对象数组。
  • 原始数组会改变。
  • 返回值为改变顺序后的数组。
<template>
    <div class="myBlock">
        <div class="tableBlock">
            <div class="title">原始数组</div>
            <el-table :data="tableData" :key="num" stripe border>
                <el-table-column prop="key" 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">
                reverse
            </el-button>
        </div>
        <div class="title" v-if="newObject">操作后的返回值</div>
        <div class="newObject">
            {{ newObject }}
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [
                { key: "name", value: "张三" },
                { key: "age", value: "18" },
                { key: "phone", value: "153****0000" },
                { key: "idCard", value: "100000********0000" },
            ],
            num: 0,
            newObject: null,
        };
    },
    watch: {},
    mounted() {},
    methods: {
        operate() {
            this.newObject = this.tableData.reverse();
            this.num += 1;
        },
    },
};
</script>

操作前

操作前

操作后

操作后

concat

  • 将原始数组与新数组进行拼接。
  • 适用普通数组和对象数组。
  • 不改变原有的数组。
  • 返回值为拼接后的数组。
<template>
    <div class="myBlock">
        <div class="tableBlock">
            <div class="title">原始数组</div>
            <el-table :data="tableData" :key="num" stripe border>
                <el-table-column prop="key" 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">
                concat
            </el-button>
        </div>
        <div class="title" v-if="newObject">操作后的返回值</div>
        <div class="newObject">
            {{ newObject }}
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [
                { key: "name", value: "张三" },
                { key: "age", value: "18" },
                { key: "phone", value: "153****0000" },
                { key: "idCard", value: "100000********0000" },
            ],
            num: 0,
            newObject: null,
        };
    },
    watch: {},
    mounted() {},
    methods: {
        operate() {
            let tempArr = [
                { key: "link", value: "http://XXX.XX.XX" },
                { key: "image", value: "XXX.png" },
            ];
            this.newObject = this.tableData.concat(...tempArr);
            this.num += 1;
        },
    },
};
</script>

操作前

操作前

操作后

操作后

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

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

相关文章

NEW | GOT Online支持多模式采集、Mono分析支持IL2CPP打包

NEW | GOT Online支持多模式采集、Mono分析支持IL2CPP打包

在性能优化时&#xff0c;你是否也遇到过这样的困扰&#xff1a;和性能相关的参数非常多&#xff0c;为什么能保障广度&#xff0c;就没法保障深度&#xff1f;这是因为数据的获取本身存在打点消耗&#xff0c;如果获取全量数据势必存在大量打点操作&#xff0c;导致收集的数据…
阅读更多...
定时任务、cron表达式、springBoot整合定时任务和异步任务-58

定时任务、cron表达式、springBoot整合定时任务和异步任务-58

一&#xff1a;定时任务 1.1 官网地址 http://www.quartz-scheduler.org/documentation/quartz-2.3.0/tutorials/crontrigger.html 1.2 cron表达式 Cron表达式是一个字符串&#xff0c;字符串以5或6个空格隔开&#xff0c;分为6或7个域&#xff0c;每一个域代表一个含义&am…
阅读更多...
Spring 教程

Spring 教程

Spring 教程Spring 概述三层架构Spring 的优良特性使用 Spring 框架的好处依赖注入&#xff08;DI&#xff09;Spring 框架具有以下几个特点&#xff1a;1&#xff09;方便解耦&#xff0c;简化开发2&#xff09;方便集成各种优秀框架3&#xff09;降低 Java EE API 的使用难度…
阅读更多...
如何集成GATEWAY作为网关（含网关404和503的解决办法）

如何集成GATEWAY作为网关（含网关404和503的解决办法）

新建model包 gateway 引入依赖 <dependencies><!--引入gateWay--><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-gateway</artifactId></dependency><!--新版本cloud去掉了负…
阅读更多...
ESP32设备驱动-SHT31温度湿度传感器驱动

ESP32设备驱动-SHT31温度湿度传感器驱动

SHT31温度湿度传感器驱动 文章目录 SHT31温度湿度传感器驱动1、SHT31介绍2、硬件准备3、软件准备4、驱动实现1、SHT31介绍 SHT31 是 Sensirion 的下一代温湿度传感器。 它建立在一个新的 CMOSens 传感器芯片之上，该芯片是 Sensirion 新湿度和温度平台的核心。 与其前身相比，…
阅读更多...
[数据库迁移]-LVM逻辑卷管理

[数据库迁移]-LVM逻辑卷管理

[数据库迁移]-LVM逻辑卷管理 森格 | 2023年1月 1、本文旨在记录数据库迁移过程&#xff08;下云至机房&#xff09;中&#xff0c;对新磁盘做逻辑卷管理的过程&#xff0c;并对Linux的文件系统和分区做了相关介绍&#xff0c;如有不对之处&#xff0c;敬请指正。 2、对Linux文…
阅读更多...
【实践】百度信息流推荐系统质效合一的交付系统建设

【实践】百度信息流推荐系统质效合一的交付系统建设

省时查报告-专业、及时、全面的行研报告库省时查方案-专业、及时、全面的营销策划方案库【免费下载】2022年12月份热门报告盘点百度APP Feed流业务架构变迁思考和升级实践罗振宇2023年跨年演讲PPT原稿吴晓波2022年年终秀演讲PPT原稿《底层逻辑》高清配图‍基于深度学习的个性化…
阅读更多...
数据结构：关于时间复杂度的例题计算

数据结构：关于时间复杂度的例题计算

1、嵌套循环时间复杂度的计算 该程序&#xff0c;最上面的嵌套循环里&#xff0c;i每执行一次&#xff0c;j就执行N次&#xff0c;所以嵌套循环执行次数为N*N次&#xff1b;中间的k变量循环了2*N次&#xff1b;最后M变量循环10次。所以总共执行了 N*N2*N10 次&#xff01; 所以…
阅读更多...
ERROR: Could not find a version that satisfies the requirement six＞=1.9.0

ERROR: Could not find a version that satisfies the requirement six＞=1.9.0

问题分析 ERROR: Could not find a version that satisfies the requirement six>1.9.0 (from prompt-toolkit) (from versions: none) ERROR: No matching distribution found for six>1.9.0 出现这个问题的原因是python国内网络不稳定&#xff0c;用pip管理工具安装库…
阅读更多...
websocket创建时附加额外信息 [如自定义headers信息(利用nginx)]

websocket创建时附加额外信息 [如自定义headers信息(利用nginx)]

目录 情景描述&#xff1a; 解决方案 一、服务端要求前端创建websocket时附带的token&#xff0c;必须放在request的headers中&#xff08;常出现在第三方的合作中&#xff09;&#xff1b; 思路&#xff1a; 整体效果&#xff1a; 具体步骤&#xff1a; 二、服务端只需要获…
阅读更多...
【Unity云消散】巩固step，lerp和smoothstep

【Unity云消散】巩固step，lerp和smoothstep

之前在学习HLSL常用函数时就有涉及到范围相关的函数&#xff0c;但是最近做的东西发现step,lerp和smoothstep这三个函数总是一直在用&#xff0c;总是会在用的时候突然忘记他们分别是干啥的&#xff0c;这里就记录一下方便查看吧&#xff0c;形式大部分参考Unity Shader 极简实…
阅读更多...
单绞机控制算法（线缆行业）

单绞机控制算法（线缆行业）

在了解单绞机之前需要大家对收放卷以及排线控制有一定的了解，不清楚的可以参看下面几篇博客，这里不再赘述，受水平和能力所限，文中难免出现错误和不足之处，诚恳的欢迎大家批评和指正。 收放卷行业开环闭环控制算法 PLC张力控制（开环闭环算法分析）_RXXW_Dor的博客-CSDN博…
阅读更多...
whistle本地代理线上（vue项目）

whistle本地代理线上（vue项目）

安装whistle install -g whistle 安装好后&#xff0c;cmd控制台启动whistle “w2 start” 访问whistle本地前端 127.0.0.1:8899 &#xff08;一般是这个网址&#xff09; 这里要注意如果您当前使用的是https类型的域名&#xff0c;需要安装https证书&#xff0c;这样才能代…
阅读更多...
ShardingSphere的强制路由不起作用

ShardingSphere的强制路由不起作用

开启注释 开启hint 然后使用注释去查询&#xff1a;/* ShardingSphere hint: dataSourceNameds_db */
阅读更多...
本地数仓项目(三）—— 数据可视化和任务调度

本地数仓项目(三）—— 数据可视化和任务调度

1 背景 本文基于《本地数据仓库项目(一)——数仓搭建详细流程》和《本地数仓项目(二)——搭建系统业务数仓详细流程》数据为依托&#xff0c;实现数据可视化和任务调度 2 构造可视化数据 在mysql中新建ads_uv_count表 DROP TABLE IF EXISTS ads_uv_count; CREATE TABLE ads…
阅读更多...
机器学习的一般框架

机器学习的一般框架

数据科学开发工具 anaconda&#xff1a;管理开发环境 jupyter&#xff1a;编写整个数据处理流程 pycharm&#xff1a;远程编写调试代码 ipdb&#xff1a;pycharm dubug时偶尔出现一些bug&#xff0c;可以用结合ipdb补充解决 数据开发六步 data 数据的获得、清洗、特征工程等…
阅读更多...
1.数据结构（栈 队列 数组 链表）

1.数据结构（栈 队列 数组 链表）

栈 先进后出 后进先出 队列 先进先出 后进后出
阅读更多...
告别2022，寄语2023（论一个普通大学牲的2022年能有多奇葩）

告别2022，寄语2023（论一个普通大学牲的2022年能有多奇葩）

今天是2022年12月31日&#xff08;当然文章发出应该是2023年1月啦&#xff0c;因为我阳了&#xff0c;/(ㄒoㄒ)/~~&#xff09;&#xff0c;原来时间过得这么快&#xff0c;作为中国地质带专的一名普通计算机学牲&#xff0c;也是趁着跨年之际&#xff0c;写一篇属于自己的年末…
阅读更多...
Springcloud elasticsearch基础介绍

Springcloud elasticsearch基础介绍

哈喽~大家好&#xff0c;这篇来看看Springcloud elasticsearch基础介绍。 &#x1f947;个人主页&#xff1a;个人主页​​​​​ &#x1f948; 系列专栏&#xff1a; 【微服务】 &#x1f949;与这篇相关的文章&#xff1a; SpringClou…
阅读更多...
jdk-HashMap(1.8)源码学习

jdk-HashMap(1.8)源码学习

hashMap介绍hashMap是我们日常用得最多的一种并发包其中之一了&#xff0c;hashMap是线程不安全的&#xff0c;不安全主要体现在高并发的场景下&#xff0c;1.8是用数组链表红黑树实现&#xff0c;1.8之前用数组链表&#xff0c;可能会导致死锁及数据丢失。红黑树结构&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023