JavaScript常见数组方法的详细用法及示例

news2024/10/7 3:27:14

1.filter():检测数值元素,并返回符合条件所有元素的数组(具体要符合什么条件的的元素的函数方法需要我们自己去写)。示例如下

</head>
<body>
    <button id="but" onclick="test(arr)">点击出结果</button>
    <div id="div">
        
    </div>
    <script type="text/javascript">
       
        // 填写JavaScript
        var arr = [5,2,4,5,3,5,6,2,1];
        //输出arr数组中大于三的个数
        function test(arr){ 
           document.getElementById('div').innerHTML = arr.filter((num)=>{return num>3}).length;
          
         }
     
    </script>
   
</body>
</html>

 

要注意οnclick="test(arr)"onclick事件中的函数必须要有参数,不然会报错。

2.sort():对数组的元素进行排序(排序顺序默认按字母顺序排列,也可根据实际情况自己设定,常见的情况有升序表示为a-b;降序表示为b-a)。

示例如下:

升序

 function test(arr){ 
           document.getElementById('div').innerHTML = arr.sort((a,b)=>{return a-b});
          
         }

 

 a-b表示的是当a-b返回一个负值时a排在b的前面,返回零时位置不变,返回正值时a在b的后面。

降序

 function test(arr){ 
           document.getElementById('div').innerHTML = arr.sort((a,b)=>{return b-a});
          
         }

 

b-a表示当返回一个正值时b在a前面,返回零时不变,返回负值时b在a后面,要注意仔细理解区分。

3.map():通过指定函数处理数组的每个元素,并返回处理后的数组。

示例如下:

 //将数组的每一个元素都×2输出
        function test(arr){ 
           document.getElementById('div').innerHTML = arr.map((num)=>{return num*2});
          
         }

 

4.forEach():数组每个元素都执行一次回调函数。

<body>
    <button id="but" onclick="test(arr)">点击出结果</button>
    <div>
        <div>初始的数组:<span id="div1"></span></div>
        <div>变化后数组:<span id="div2"></span></div>
        
    </div>
    <script type="text/javascript">
       
        // 填写JavaScript
        var arr = [5,2,4,5,3,5,6,2,1];
        document.getElementById('div1').innerHTML=arr;
        //将数组的每一个元素相加输出
        function test(arr){ 
            var sun = 0;
            arr.forEach(num => {
            sun += num;
            return sun
           });
            document.getElementById('div2').innerHTML = sun;
          
         }
     
    </script>
   
</body>

 

5.shift():删除并返回数组的第一个元素

示例如下:

<script type="text/javascript">
       
        // 填写JavaScript
        var arr = [5,2,4,5,3,5,6,2,1];
        document.getElementById('div1').innerHTML=arr;
        //删除并返回数组的第一个元素
        function test(arr){ 
            arr.shift();
            document.getElementById('div2').innerHTML = arr;
          
         }
     
    </script>

 

6.unshifit():向数组的第一个元素位置添加一个元素。

示例如下:

<script type="text/javascript">
       
        // 填写JavaScript
        var arr = [5,2,4,5,3,5,6,2,1];
        document.getElementById('div1').innerHTML=arr;
        
        function test(arr){ 
            arr.unshift(7);
            document.getElementById('div2').innerHTML = arr;
          
         }
     
    </script>

 

7.concat():连接两个或者多个数组并返回新数组

示例如下:

<script type="text/javascript">
       
        // 填写JavaScript
        var arr = [5,2,4,5,3,5,6,2,1];
        var arrs = [0,0,0];
        document.getElementById('div1').innerHTML=arr;
        
        function test(arr,arrs){ 
            
            document.getElementById('div2').innerHTML = arr.concat(arrs);
          
         }
     
    </script>

 

8.pop():删除数组的最后一个元素并返回

 <script type="text/javascript">
       
        // 填写JavaScript
        var arr = [5,2,4,5,3,5,6,2,1];
        document.getElementById('div1').innerHTML=arr;
        
        function test(arr){ 
            arr.pop(9);
            document.getElementById('div2').innerHTML = arr;
          
         }
     
    </script>

 

9.push():向数组的最后添加一个或多个元素并返回新数组的长度

<script type="text/javascript">
       
        // 填写JavaScript
        var arr = [5,2,4,5,3,5,6,2,1];
        document.getElementById('div1').innerHTML=arr;
        
        function test(arr){ 
            arr.push(9,9);
            document.getElementById('div2').innerHTML = arr;
          
         }
     
    </script>

 

10.includs():判断数组是否包含某一个值

<script type="text/javascript">
       
        // 填写JavaScript
        var arr = [5,2,4,5,3,5,6,2,1];
        document.getElementById('div1').innerHTML=arr;
        
        function test(arr){ 
           
            document.getElementById('div2').innerHTML = arr.includes(1);
          
         }
     
    </script>

 

 

 

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

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

相关文章

【开源合规】开源许可证基础知识与风险场景引入

文章目录 什么是开源许可证(License)?开源许可证有什么用?开源许可证分类开源许可证分类及描述公共代码 (Public Domain)CC0无License宽松型许可证 (Permissive)MITApache 2.0BSD弱互惠型许可证 (Weak Copyleft)LGPLMPLEPL互惠型许可证 (Reciprocal)GPLEUPL强互惠许可证 (Str…

Redis缓存管理机制

在当今快节奏的数字世界中&#xff0c;性能优化对于提供无缝的用户体验至关重要。缓存在提高应用程序性能方面发挥着至关重要的作用&#xff0c;它通过将经常使用或处理的数据存储在临时高速存储中来减少数据库负载并缩短响应时间&#xff0c;从而减少系统的延迟。Redis 是一种…

秒懂设计模式--学习笔记(5)【创建篇-抽象工厂】

目录 4、抽象工厂4.1 介绍4.2 品牌与系列&#xff08;针对工厂泛滥&#xff09;(**分类**)4.3 产品规划&#xff08;**数据模型**&#xff09;4.4 生产线规划&#xff08;**工厂类**&#xff09;4.5 分而治之4.6 抽象工厂模式的各角色定义如下4.7 基于此抽象工厂模式以品牌与系…

51单片机点亮第一个LED灯

欢迎入群共同学习交流 时间记录&#xff1a;2024/7/2 一、电路原理图 二、代码程序 1.项目代码结构 2.主程序代码 #include <reg51.h>sbit ledP1^0;void delay(int ms) {int i0;while(ms--){for(i0;i<110;i);} }int main() {while(1){led 1;delay(1000);led 0;d…

Retrofit源码阅读

动态代理在 Android 中的应用&#xff1a;Retrofit 源码解析 在之前的文章 《Andriod 网络框架 OkHttp 源码解析》 中我们分析了 OkHttp 的源代码。现在我们就来分析一下 OkHttp 的兄弟框架 Retrofit。关于 Retrofit 的注解的使用&#xff0c;可以参考其官方文档&#xff1a;h…

镜像私服Harbor 2.0安装-探索工厂模式:如何优化Harbor项目管理与API集成

文章目录 一、docker-compose1. 下载 Docker Compose&#xff1a;2.添加执行权限&#xff1a;3.验证安装 二、安装harbor 2.01.下载harbor离线包2. 根据需求配置 Harbor3.给harbor创建SSL证书4.预编译harbor5. 安装并启动 Harbor (必须到你安装的目录) 三、登录harbor的web页面…

Java UU跑腿同城跑腿小程序源码快递代取帮买帮送源码小程序+H5+公众号跑腿系统

&#x1f680;【同城生活小助手】&#x1f680; &#x1f3c3;‍♂️【同城跑腿&#xff0c;即刻送达的便利生活】&#x1f3c3;‍♀️ 在快节奏的都市生活中&#xff0c;时间成了最宝贵的资源。UU跑腿小程序&#xff0c;作为同城生活的得力助手&#xff0c;让你轻松解决生活…

208.贪心算法:买卖股票的最佳时机||(力扣)

代码解决 class Solution { public:int maxProfit(vector<int>& prices) {int result 0; // 初始化结果为0&#xff0c;表示初始利润为0// 从第二天开始遍历价格数组for (int i 1; i < prices.size(); i) {// 如果当天价格比前一天价格高&#xff0c;则将差价加…

学习伦敦金技术分析的具体步骤是什么?

技术分析是我们分析伦敦金市场的重要工具&#xff0c;刚入市就面对时涨时跌的市场应该如何交易呢&#xff1f;投资者如果不掌握技术分析的方法&#xff0c;恐怕对这个问题会没有头绪。入场都没有&#xff0c;盈利就更加无从谈起了。而学习技术分析&#xff0c;是有不同的阶段、…

算法-位图与底层运算逻辑

文章目录 1. 位图的理论基础2. 完整版位图实现3. 底层的运算逻辑-位运算 1. 位图的理论基础 首先我们要理解什么是位图, 位图的一些作用是什么 位图法就是bitmap的缩写。所谓bitmap&#xff0c;就是用每一位来存放某种状态&#xff0c;适用于大规模数据&#xff0c;但数据状态又…

让你500平的大别墅网络信号无死角!一文读懂什么是Mesh

最新的路由器往往拥有超快的速度、多天线和对最新Wi-Fi标准的支持。然而&#xff0c;如果你的设备信号微弱或有死角&#xff0c;再强大的路由器也无济于事。虽然Wi-Fi扩展器是增加网络覆盖范围的廉价替代品&#xff0c;但它们效率低下且带宽较低。 相比之下&#xff0c;Mesh网络…

野外/工地车流计数摄像头,单人即可安装,简单低成本

在野外或工地这样的特殊环境中&#xff0c;对车流进行准确计数对于交通管理、资源调配以及安全保障都具有重要意义。而野外/工地车流计数摄像头的出现&#xff0c;以其单人即可安装、简单低成本的特点&#xff0c;为解决这些场景中的车流统计问题提供了理想的解决方案。 一、野…

【Elasticsearch】一、概述,安装

文章目录 概述全文搜索引擎概述ES&#xff08;7.x&#xff09; 安装ES&#xff08;Docker&#xff09;测试&#xff0c;是否启动成功 可视化工具配置中文 客户端Postman下载 概述 ES是开源的高扩展的分布式全文搜索引擎&#xff0c;实时的存储、检索数据&#xff1b;本身扩展性…

做了个记录心情并结合AI给出建议的小程序

名称&#xff1a;心情记录员 微信小程序名称叫程序记录员&#xff0c;主要功能是记录情绪&#xff0c;然后根据情绪和产生情绪的原因通过AI给出有助于心理健康的建议。同时支持统计功能&#xff0c;可以以查看日历的方式浏览不同日期下情绪的变化轨迹。 主要功能 记录情绪和…

“私域流量:解锁电商新机遇,共创数字化未来“

一、私域流量的战略意义再探 步入数字化浪潮的深处&#xff0c;流量已成为企业成长不可或缺的血液。与广泛但难以掌控的公域流量相比&#xff0c;私域流量以其独特的专属性和复用潜力&#xff0c;为企业铺设了通往深度用户关系的桥梁。它不仅赋能企业实现精准营销&#xff0c;…

应用监控SkyWalking调研

参考&#xff1a; 链路追踪( Skyworking )_skywalking-CSDN博客 企业级监控项目Skywalking详细介绍&#xff0c;来看看呀-CSDN博客 SkyWalking 极简入门 | Apache SkyWalking 使用 SkyWalking 监控 ClickHouse Server | Apache SkyWalking https://zhuanlan.zhihu.com/p/3…

主播一般用什么麦克风?一文看懂哪种麦克风降噪效果好

如今是一个短视频飞速发展的时代&#xff0c;越来越多自媒体人通过短视频的方式来进行直播带货、生活Vlog、线上K歌等&#xff0c;记录下生活里那美丽的瞬间。不过想要拍摄出来的视频作品拥有清晰的音质以及不受环境噪音所影响&#xff0c;那么一款好的麦克风是必不可少的。很多…

Linux驱动开发实战宝典:设备模型、模块编程、I2C/SPI/USB外设精讲

摘要: 本文将带你走进 Linux 驱动开发的世界,从设备驱动模型、内核模块开发基础开始,逐步深入 I2C、SPI、USB 等常用外设的驱动编写,结合实际案例,助你掌握 Linux 驱动开发技能。 关键词: Linux 驱动,设备驱动模型,内核模块,I2C,SPI,USB 一、Linux 设备驱动模型 Li…

如何选择最适合您的短剧系统源码

短剧系统源码是一个帮助用户搭建短剧平台的软件程序。在选择短剧系统源码时&#xff0c;确保选择一个适合您需求的系统是非常重要的。以下是一些关键因素&#xff0c;可以帮助您选择最好的短剧系统源码。 1. 功能丰富性&#xff1a;在选择短剧系统源码之前&#xff0c;您需要明…

ListBox自动滚动并限制显示条数

1、实现功能 限制ListBox显示的最大条数&#xff1b; ListBox自动滚动&#xff0c;显示最新行&#xff1b; 2、C#代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.IO; using Syst…