7个常用的JavaScript数组操作进阶用法

news2024/12/31 5:31:07

文章目录

    • 1、查找数组中的最大值
      • 方法一:使用 Math.max 和展开运算符
      • 方法二:使用 for 循环逐一比较
    • 2、查找数组中的第二大值
      • 方法一:排序后取第二大值
      • 方法二:遍历找到第二大值
    • 3、去除数组中的重复项
    • 4、合并两个有序数组并保持有序
    • 5、旋转数组
    • 6、判断两个数组是否相等
    • 7、总结

1、查找数组中的最大值

给定一个数字数组,如何找出其中的最大值

方法一:使用 Math.max 和展开运算符

这是最直接的解决方案。
可以使用 Math.max,并通过展开运算符将数组元素传递进去。这样不仅语法简洁,而且逻辑也很清晰。

const numbers = [1, 5, 3, 9, 2];
function findLargest(arr) {
  return Math.max(...arr);
}
console.log(findLargest(numbers)); // 输出:9

解析:在这里,Math.max(…arr) 将数组解包成单个参数传入 Math.max,一行代码就能返回最大值。

“如果数组很大,这种方法还适用吗?” 展开运算符可能会在大数组上有性能问题,因为它会消耗较多的内存。在百万级别的数组上,更推荐使用 for
循环。

方法二:使用 for 循环逐一比较

使用 for 循环的方式,虽然这看起来不像是“最简单”的方法,但它能够处理任何长度的数组,无论多大,都不会受到展开运算符带来的内存限制。

const numbers = [1, 5, 3, 9, 2];
function findLargest(arr) {
  let max = arr[0];
  for (let i = 1; i < arr.length; i++) {
    if (arr[i] > max) {
      max = arr[i];
    }
  }
  return max;
}
console.log(findLargest(numbers)); // 输出:9

解释:在这个例子中,我们通过 for 循环从头遍历数组,将当前最大值保存在 max 中。当遇到更大的值时,更新 max。

这种方法在时间复杂度上是 O(n),而且不会引发内存溢出,是一种更加稳妥的处理方式。

2、查找数组中的第二大值

“如何要找到数组中的第二大值呢?” 下面展示几种不同的方法。

方法一:排序后取第二大值

最直观的方法就是将数组降序排列,然后取第二个值。

const numbers = [1, 5, 3, 9, 7];
function secondLargest(arr) {
  let sorted = arr.sort((a, b) => b - a);
  return sorted[1];
}
console.log(secondLargest(numbers)); // 输出:7

分析:数组排序后,sorted[1] 就是第二大值。不过排序的时间复杂度为 O(n log n),且会改变原数组,不是最高效的方法。

方法二:遍历找到第二大值

如果希望更高效,可以在一次遍历中找到第二大值。

使用两个变量 max 和 secondMax 来记录最大值和次大值,可以在不排序的情况下得到结果。

const numbers = [1, 5, 3, 9, 7];
function findSecondLargest(arr) {
  let max = -Infinity;
  let secondMax = -Infinity;
  for (let num of arr) {
    if (num > max) {
      secondMax = max;
      max = num;
    } else if (num > secondMax && num < max) {
      secondMax = num;
    }
  }
  return secondMax;
}
console.log(findSecondLargest(numbers)); // 输出:7

解释:这段代码在一次循环中完成,时间复杂度为 O(n)。max 记录当前最大值,secondMax> 记录次大值。每次遇到新的最大值时,更新这两个变量,保证 secondMax 是最大值之外的最大元素。

3、去除数组中的重复项

方法:使用 Set 去重
使用 Set 是最快捷的方式,Set 会自动去除重复元素。

const numbers = [1, 2, 2, 3, 4, 4, 5];
function removeDuplicates(arr) {
  return [...new Set(arr)];
}
console.log(removeDuplicates(numbers)); // 输出:[1, 2, 3, 4, 5]

解析:在这里,Set 自动去重,然后再用展开运算符将 Set 转换回数组。操作简单且性能优越,特别适用于中小规模的数据处理。

4、合并两个有序数组并保持有序

将两个已排序的数组合并并保持顺序。

concat 和 sort 是一种快速实现的方式。

方法:使用 concat 和 sort

const arr1 = [1, 3, 5];
const arr2 = [2, 4, 6];
function mergeArrays(arr1, arr2) {
  return arr1.concat(arr2).sort((a, b) => a - b);
}
console.log(mergeArrays(arr1, arr2)); // 输出:[1, 2, 3, 4, 5, 6]

解释:concat 拼接数组,然后用 sort 进行升序排列。这种方法简单直观,但如果有大量数据时,concat 的内存消耗和 sort> 的效率需要注意。

5、旋转数组

“写一个函数,将数组右移 k 次。”
这要求数组中的每个元素向右“移动”指定的次数。比如,给定 [1, 2, 3, 4, 5],右移 2 次后数组应变成 [4, 5, 1, 2, 3]。这类旋转操作在数据处理和算法应用中十分常见。

使用 slice 和 concat 拼接旋转后的数组。

const arr = [1, 2, 3, 4, 5];
function rotateArray(arr, k) {
  k = k % arr.length; // 防止 k 超出数组长度
  return arr.slice(-k).concat(arr.slice(0, -k));
}
console.log(rotateArray(arr, 2)); // 输出:[4, 5, 1, 2, 3]

代码详解处理超长旋转次数:首先,k = k % arr.length 这一行确保旋转次数不会超出数组长度。比如当 k = 7 时,这段代码将> k 变为 2(7 % 5 = 2),这相当于只旋转了 2 次,避免了多余的操作。

分割数组:接下来,用 slice 方法将数组分成两个部分,分别取出数组的尾部和前面的部分:arr.slice(-k) 用来取出数组最后 k> 个元素。比如当 k = 2 时,arr.slice(-2) 会返回 [4, 5]。arr.slice(0, -k)> 则获取数组的前面部分,不包括最后 k 个元素。对 [1, 2, 3, 4, 5] 使用 arr.slice(0, -2),结果就是 [1,> 2, 3]。拼接旋转后的数组:最后,你用 concat 将这两个部分组合起来,把尾部的 [4, 5] 放到 [1, 2, 3]> 的前面,完成右移操作。整个代码执行后得到 [4, 5, 1, 2, 3],实现了右移 2 次的效果。

详细说明:假设 arr = [1, 2, 3, 4, 5],k = 2。我们需要将数组右移 2 次,让 [4, 5] 出现在数组开头。使用> slice(-2) 得到 [4, 5]。使用 slice(0, -2) 得到 [1, 2, 3]。把这两个部分拼接起来,得到最终的 [4,> 5, 1, 2, 3]。

关键点总结循环优化:通过 k % arr.length 确保旋转次数不会超过数组长度,从而优化效率。
分割和拼接:利用 slice 和 concat 组合,可以轻松实现数组的旋转效果。

6、判断两个数组是否相等

方法:逐个元素比较

const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];
function arraysEqual(arr1, arr2) {
  if (arr1.length !== arr2.length) return false;
  
  for (let i = 0; i < arr1.length; i++) {
    if (arr1[i] !== arr2[i]) return false;
  }
  
  return true;
}
console.log(arraysEqual(arr1, arr2)); // 输出:true
console.log(arraysEqual([1, 2, 3], [1, 2, 4])); // 输出:false

解析:逐个元素对比可以确保内容和顺序一致。此方法适用于小型数组,因为时间复杂度为 O(n)。

7、查找数组中和为特定值的所有数对
这涉及到去重和优化算法的问题。

方法:使用 Set 记录和查找补数

const arr = [1, 2, 4, 3, 5, 7, 8, 9];
const target = 10;
function findPairs(arr, target) {
  let result = [];
  let seen = new Set();

  for (let num of arr) {
    let complement = target - num;

    if (seen.has(complement)) {
      result.push([num, complement]);
    }

    seen.add(num);
  }

  return result;
}

console.log(findPairs(arr, target)); // 输出:[[3, 7], [2, 8], [1, 9]]

解析:通过 Set 记录遍历过的数,找到符合条件的数对。

利用查找补数的方式,避免重复数对,且比双重循环效率更高。

7、总结

上面7中常用 JavaScript 操作数组方法,从最简单的查找最大值到复杂的数对查找,涵盖了去重、排序、旋转等经典操作;希望能帮到你!!!

在这里插入图片描述


别人可以拷贝我的模式,不能拷贝我的苦难,不能拷贝我不断往前的激情。


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

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

相关文章

前深度学习时代-经典的推荐算法

参考自《深度学习推荐系统》—— 王喆&#xff0c;用于学习记录。 1.协同过滤 “协同过滤”就是协同大家的反馈、评价和意见一起对海量的信息进行过滤&#xff0c;从中筛选出目标用户可能感兴趣的信息的推荐过程。 基于用户相似度进行推荐的协同过滤算法 UserCF 用户相似度…

FPGA学习笔记#6 Vitis HLS For循环的优化(2)

本笔记使用的Vitis HLS版本为2022.2&#xff0c;在windows11下运行&#xff0c;仿真part为xcku15p_CIV-ffva1156-2LV-e&#xff0c;主要根据教程&#xff1a;跟Xilinx SAE 学HLS系列视频讲座-高亚军进行学习 学习笔记&#xff1a;《FPGA学习笔记》索引 FPGA学习笔记#1 HLS简介及…

MTK6833/MT6833(天玑700)安卓核心板_联发科5G智能通讯模块安卓主板定制

天玑700定位主流级&#xff0c;让5G技术惠及所有人。 MT6833采用7nm制程工艺&#xff0c;旨在为大众市场带来先进的5G功能和体验&#xff0c;依托5G双载波聚合技术&#xff08;2CC&#xff09;及双5G SIM卡功能&#xff0c;实现优异的功耗表现及实时连网功能。 CPU部分由2个2…

Spring Boot框架的知识分类技术解析

2 开发技术 2.1 VUE框架 Vue.js&#xff08;读音 /vjuː/, 类似于 view&#xff09; 是一套构建用户界面的渐进式框架。 Vue 只关注视图层&#xff0c; 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 2.2 Mysql数据库 …

面试:TCP、UDP如何解决丢包问题

文章目录 一、TCP丢包原因、解决办法1.1 TCP为什么会丢包1.2 TCP传输协议如何解决丢包问题1.3 其他丢包情况&#xff08;拓展&#xff09;1.4 补充1.4.1 TCP端口号1.4.2 多个TCP请求的逻辑1.4.3 处理大量TCP连接请求的方法1.4.4 总结 二、UDP丢包2.1 UDP协议2.1.1 UDP简介2.1.2…

关于我、重生到500年前凭借C语言改变世界科技vlog.17——字符函数字符串函数

文章目录 1.字符函数1.1 字符分类函数1.1.1 islower 1.2 字符转换函数1.2.1 tolower 2.字符串函数2.1 strlen2.2 strcpy和strncpy2.3 strcat和strncat2.4 strcmp和strncmp2.5 strstr2.6 strtok2.7 strerror 希望读者们多多三连支持小编会继续更新你们的鼓励就是我前进的动力&am…

可视化建模与UML《类图实验报告》

史铁生&#xff1a; 余华和莫言扛着我上火车&#xff0c; 推着走打雪仗&#xff0c; 还带我偷西瓜&#xff0c; 被人发现后他们拔腿就跑&#xff0c; 却忘了我还在西瓜地里。 一、实验目的&#xff1a; 1、熟悉类图的构件事物。 2、熟悉类之间的泛化、依赖、聚合和组合关系…

基于梧桐数据库的实时数据分析解决方案

一、背景 在当今信息时代&#xff0c;数据的价值不言而喻。然而&#xff0c;处理海量数据并将其转化为有意义的洞察力是一项艰巨的任务。传统的数据处理方法已经无法满足我们日益增长的需求。为了满足这一挑战&#xff0c;实时数据处理系统应运而生。 ​ 实时数据处理系统是一…

javascript实现国密sm4算法(支持微信小程序)

概述&#xff1a; 本人前端需要实现sm4计算的功能&#xff0c;最好是能做到分多次计算。 本文所写的代码在现有sm4的C代码&#xff0c;反复测试对比计算过程参数&#xff0c;成功改造成sm4的javascript代码&#xff0c;并成功验证好分多次计算sm4数据 测试平台&#xff1a; …

jmeter常用配置元件介绍总结之jsr223执行python脚本

系列文章目录 安装jmeter jmeter常用配置元件介绍总结之jsr223执行python脚本 1.安装jsr223执行python插件2.基础语法介绍2.1.log2.2.parameters向脚本传参与接参2.3.vars2.4.props2.5.prev 3.常用脚本3.1.MD5加密单个参数&#xff1a;3.2.MD5加密多个参数&#xff1a;3.3.URLe…

【MongoDB】MongoDB的聚合(Aggregate、Map Reduce)与管道(Pipline) 及索引详解(附详细案例)

文章目录 MongoDB的聚合操作&#xff08;Aggregate&#xff09;MongoDB的管道&#xff08;Pipline操作&#xff09;MongoDB的聚合&#xff08;Map Reduce&#xff09;MongoDB的索引 更多相关内容可查看 MongoDB的聚合操作&#xff08;Aggregate&#xff09; 简单理解&#xff…

快速了解SpringBoot 统一功能处理

拦截器 什么是拦截器&#xff1a; 拦截器是Spring框架提供的重要功能之一&#xff0c;主要进行拦截用户请求&#xff0c;在指定方法前后&#xff0c;根据业务需求&#xff0c;执行预先设定的代码。 也就是说,允许开发⼈员提前预定义⼀些逻辑,在⽤⼾的请求响应前后执⾏.也可以…

百兆网络变压器在无人机系统起到什么作用

华强盛电子 导读&#xff1a; 百兆网络变压器&#xff08;通常指的是100M Ethernet Transformer&#xff09;在无人机系统中扮演着重要的角色&#xff0c;尤其是在网络通信和电气隔离方面 1.电气隔离 网络变压器通过提供电气隔离&#xff0c;帮助保护无人机的电子设备免受电流…

在双显示器环境中利用Sunshine与Moonlight实现游戏串流的同时与电脑其他任务互不干扰

我和老婆经常会同时需要操作家里的电脑&#xff0c;在周末老婆有时要用电脑加班上网办公&#xff0c;而我想在难得的周末好好地Game一下&#xff08;在客厅用电视机或者平板串流&#xff09;&#xff0c;但是电脑只有一个&#xff0c;以往我一直都是把电脑让给老婆&#xff0c;…

【Vue】Vue3.0(十七)Vue 3.0中Pinia的深度使用指南(基于setup语法糖)

上篇文章&#xff1a; 【Vue】Vue3.0&#xff08;十一&#xff09;Vue 3.0 中 computed 计算属性概念、使用及示例 &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Vue专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年11月10日15点23分 文章…

深度学习基础练习:从pytorch API出发复现LSTM与LSTMP

2024/11/5-2024/11/7&#xff1a; 前置知识&#xff1a; [译] 理解 LSTM(Long Short-Term Memory, LSTM) 网络 - wangduo - 博客园 【官方双语】LSTM&#xff08;长短期记忆神经网络&#xff09;StatQuest_哔哩哔哩_bilibili 大部分思路来自于&#xff1a; PyTorch LSTM和LSTMP…

【芯智雲城】Sigmastar星宸科技图传编/解码方案

一、图传技术简介 图传是指将图像或媒体内容从一个设备传输到另外一个设备的技术&#xff0c;传输的媒介可以是无线电波、光纤、以太网等。图传系统主要由图像采集设备、传输设备和接收设备组成&#xff0c;图像采集设备负责采集实时图像&#xff0c;传输设备将采集到的图像转…

JavaFX史上最全教程 - Shape - JavaFX矩形椭圆

avaFX Shape类定义了常见的形状&#xff0c;如线&#xff0c;矩形&#xff0c;圆&#xff0c;Arc&#xff0c;CubicCurve&#xff0c;Ellipse和QuadCurve。 在场景图上绘制矩形需要宽度&#xff0c;高度和左上角的&#xff08;x&#xff0c;y&#xff09;位置。 要在JavaFX中…

【Windows修改Docker Desktop(WSL2)内存分配大小】

记录一下遇到使用Docker Desktop占用内存居高不下的问题 自从使用了Docker Desktop&#xff0c;电脑基本每天都需要重启&#xff0c;内存完全不够用&#xff0c;从16g扩展到24&#xff0c;然后到40G&#xff0c;还是不够用&#xff1b;打开Docker Desktop 运行时间一长&#x…

使用QLoRA和自定义数据集微调大模型

大家好&#xff0c;大语言模型&#xff08;LLMs&#xff09;对自然语言处理&#xff08;NLP&#xff09;的影响是非常深远的&#xff0c;不仅提高了任务效率&#xff0c;还催生出新能力&#xff0c;推动了模型架构和训练方法的创新。尽管如此强大&#xff0c;但LLMs也有局限&am…