【JavaScript】数组 ③ ( JavaScript 数组长度 | 修改数组长度 | 数组案例 )

news2024/11/27 14:51:48

文章目录

  • 一、JavaScript 数组长度
    • 1、数组长度
    • 2、修改数组长度
  • 二、数组案例
    • 1、求数组元素平均值
    • 2、求数组元素最大值





一、JavaScript 数组长度




1、数组长度


在 JavaScript 中 , 数组长度 可以通过 数组变量的 length 属性 获取 , 该属性 返回 数组中的元素数量 , 也就是 数组长度 ;


下面声明了一个数组变量 , 有 3 个元素 ;

var arr = ['blue', 'red', 'green'];

arr 数组变量的 length 属性 , 就是 数组长度 ;

arr.length

代码示例 :

var arr = ['blue', 'red', 'green'];
console.log(arr.length);  // 输出 : 3

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 数组长度

        var arr = ['blue', 'red', 'green'];
        console.log(arr.length); // 输出 : 3
    </script>
</head>

<body>
</body>

</html>

执行结果 :

在这里插入图片描述


2、修改数组长度


JavaScript 数组 的 大小 是 可以 动态调整 的 , 通过修改 数组 的 length 属性 可以 增加或减少 数组的大小 ;

  • 如果 减少 数组的大小 , 则被减少的部分元素 , 直接从数组中删除 ;
  • 如果 增加 数组的大小 , 则增加的部分 , 使用 undefined 值填充 ;

代码示例 :

var arr = [1, 2, 3];  
arr.length = 5;  
console.log(arr);  // 输出:[1, 2, 3, undefined, undefined]

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 数组长度

        var arr = [1, 2, 3];

        // 数组内容 : [1, 2, 3, undefined, undefined]
        arr.length = 5;

        // 输出 : [1, 2, 3, empty x 2]
        console.log(arr);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

在这里插入图片描述





二、数组案例




1、求数组元素平均值


给定一个数组 ,

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

求该数组的平均值 ;

首先 , 遍历累加该数组 ;

然后 , 将累加和 除以 数组长度 , 得到平均值 ;


代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 数组长度

        // 数组声明与初始化
        var arr = [1, 2, 3, 4, 5];

        // 累加和
        var sum = 0;

        for (var i = 0; i < arr.length; i++) {
            sum += arr[i];
        }

        // 输出 : 累加和为 : 15
        console.log("累加和为 : " + sum);

        var avg = sum / arr.length;
        // 输出 : 平均值为 : 3
        console.log("平均值为 : " + avg);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

在这里插入图片描述


2、求数组元素最大值


给定一个数组 ,

var arr = [3, 9, 5, 2, 7, 4];

求该数组的最大值 ;

首先 , 定义一个变量存储当前获取的最大值 ;

然后 , 遍历数组每个元素 , 如果遍历到的值大于 最大值变量 则赋值给 该变量 ;

遍历完毕后 , 即可得到数组中的 最大值 ;


代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 数组长度

        // 数组声明与初始化
        var arr = [3, 9, 5, 2, 7, 4];

        // 最大值
        var max = 0;

        for (var i = 0; i < arr.length; i++) {
            if (arr[i] > max) {
                max = arr[i];
            }
        }

        // 输出 : 最大值为 : 9
        console.log("最大值为 : " + max);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

在这里插入图片描述

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

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

相关文章

软件速成书:一夜成神的传说,还是现实的泡影?

嗨&#xff0c;各位小伙伴&#xff01; &#x1f431;‍&#x1f4bb; 我是【行走的程序喵】&#xff01;一个兼具Web前端和Java后端技能的技术宅&#xff01; &#x1f31f; 我的博客上分享最新的Web前端和Java后端技术文章&#xff0c;从基础入门到进阶应用&#xff0c;应有…

Linux系统----------探索mysql数据库MHA高可用

目录 一、MHA概述 1.1 什么是 MHA 1.2MHA 的组成 1.2.1MHA Node&#xff08;数据节点&#xff09; 1.2.2MHA Manager&#xff08;管理节点&#xff09; 1.3MHA 的特点 1.4MHA工作原理 1.5数据同步的方式 1.5.1同步复制 1.5.2异步复制 1.5.3半同步复制 二、搭建 MySQ…

夜神模拟器录制脚本录制键盘操作方法

很多用户们在使用夜神模拟器的时候&#xff0c;有个操作助手的功能非常的好用&#xff0c;用户们在录制自己的操作以后&#xff0c;就能够进行全自动的操作等&#xff0c;使用起来还是非常方便的&#xff0c;想要知道的用户们快来查看详细的教程吧~ 夜神模拟器录制脚本怎样录制…

5-规范设计(下):commit信息风格迥异、难以阅读,如何规范?

我们在做代码开发时&#xff0c;经常需要提交代码&#xff0c;提交代码时需要填写 Commit Message&#xff08;提交说明&#xff09;&#xff0c;否则就不允许提交。 所以在 Go 项目开发时&#xff0c;一个好的 Commit Message 至关重要&#xff1a; 可以使自己或者其他开发人…

3.26学习总结java初步实现学生管理系统

(该项目通过视频讲解过程中完成,其中将一些操作进行了修改和完善,其目的是为了巩固前面学习java的一些用法,熟悉写项目的过程) 一.项目要求 学生类: 属性:id、姓名、年龄、家庭住址 添加功能: 键盘录入每一个学生信息并添加&#xff0c;需要满足以下要求: ID唯一 删除功能…

Qt源码调试步骤记录

1.源码&#xff1a; 两种方式&#xff0c;要么安装qt时选择source&#xff0c;要么从官网下载源码&#xff0c;然后在qt creator中设置路径。二选一即可。我选的第二种。 1.1.第一种&#xff0c;安装时选择source&#xff1a; 1.2.第二种&#xff0c;下载源码设置路径&#x…

Linux中安装JDK17.X

1、总体概述&#xff1f; 该操作方式适合centos或red hat环境 2.1、在线下载JDK安装包&#xff1f; 通过wget命令下载JDK17.X包 wget https://download.oracle.com/java/17/latest/jdk-17_linux-x64_bin.tar.gz 如果提示&#xff1a;没有wget命令就安装wget yum install w…

Qt 富文本处理 (字体颜色大小加粗等)

Qt中支持HTML的控件有textEdit 、label 、textBrowser 。 接口&#xff1a;setHtml("Qt"); toHtml(). 文本样式设置 : 可分字设置 &#xff0c;主要使用QTextCharFormat类进行文本样式设置。 示例&#xff1a; QTextCharFormat fmt; //粗体 fmt.setFontWeight…

wps没保存关闭了恢复数据教程

有时候我们因为电脑问题会忘记保存就关闭wps导致数据丢失&#xff0c;不知道wps没保存关闭了怎么恢复数据&#xff0c;其实数据是无法恢复的。 wps没保存关闭了怎么恢复数据 1、wps没有数据恢复功能&#xff0c;不过可以开启自动备份。 2、我们可以先点击wps左上角的“文件”…

Vtk裁剪功能之平面裁剪vtkClipClosedSurface(vtk小记)

1.原理分析 对你的三维图形&#xff0c;使用一个平面切下去&#xff0c;然后保留一半。 确定一个平面&#xff1a;使用法向量和一个三维坐标点可以确定一个平面 原始图像 切一刀 切两刀&#xff0c;又一半 切三刀&#xff0c;又一半 源代码 #include <vtkActor.h> #i…

Linux 学习之路 -- 工具篇 -- gcc / g++

在 Linux 系统中&#xff0c;gcc 和 g 是两个常用的编译工具&#xff0c;分别用于编译 C 和 C 代码。下面我将介绍gcc、g的一些基本用法 目录 一、简单的认识 二、简单了解一下编译的过程 <1> 预处理阶段 <2>编译 <3>汇编 <4>链接…

SQLite数据库成为内存中数据库(三)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLite使用的临时文件&#xff08;二&#xff09; 下一篇&#xff1a;SQLite中的原子提交&#xff08;四) ​​ SQLite数据库通常存储在单个普通磁盘中文件。但是&#xff0c;在某些情况下&#xff0c;数据库可能…

python爬虫基础------函数

&#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; &#x1f388;&#x1f388;所属专栏&#xff1a;python爬虫学习&#x1f388;&#x1f388; ✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天…

打工人神器! Raccoon 代码小浣熊

继这三个之后&#xff0c;今天又来了一个 [ Raccoon代码小浣熊 ] 核心精要与产品特点 全面支持多种编程语言和IDE&#xff1a;「代码小浣熊」支持超过90种主流编程语言&#xff0c;包括但不限于Python、Java、JavaScript、C、Go和SQL等。同时&#xff0c;它集成了市面上主流的…

电脑换屏总结——关于我把电脑砸了这件事!

大家好&#xff0c;我是工程师看海&#xff0c;很高兴和各位一起分享我的原创文章&#xff0c;喜欢和支持我的工程师&#xff0c;一定记得给我点赞、收藏、分享哟。 加微信[chunhou0820]与作者进群沟通交流。 【淘宝】https://m.tb.cn/h.5PAjLi7?tkvmMLW43KO7q CZ3457 「运放秘…

【ENSP】交换机和交换机之间实现静态路由

1.概念 三层交换机只能在Vlanif逻辑口配置iP地址 2.实现方法 交换机允许对应vlan通行&#xff0c;配置vlanif的ip地址&#xff0c;做静态路由 3.静态路由配置方法 ip route-static 目的网段 子网掩码 下一跳设备 LSW1三层交换机配置 u t m sys vlan batch 10 20 …

一文彻底搞懂并发容器

文章目录 1. 什么是并发容器2. 并发容器的分类 1. 什么是并发容器 并发容器是一种用于多线程环境的数据结构&#xff0c;它们能够有效地处理并发访问和修改的问题。在多线程应用程序中&#xff0c;多个线程可能会同时访问和修改共享的数据结构&#xff0c;这可能会导致数据不一…

npm卸载不掉的解决方案

不管怎么重装重启都报错 真服了&#xff0c;npm卸载不掉绝对是有缓存存在&#xff0c;用where npm查到d盘 实际上根本不在这个地方&#xff0c;这个是我安装的6.14.12版本的npm的地方&#xff0c;我说我怎么怎么重装怎么导包都不行呢&#xff0c;偷偷隐藏在这个目录里面&#…

vue3路由代码示例

路由简单分三步吧 第一定义路由&#xff1a; 包括访问地址&#xff0c;对应组件 第二使用&#xff1a;在index.html中使用它 下面是代码示例&#xff1a; components/Person.vue <template><router-link to"/test/hello">跳转</router-link>&…

简易TCP服务器通信、IO多路复用(select、poll、epoll)以及reactor模式。

网络编程学习 简单TCP服务器通信TCP三次握手和四次挥手三次握手&#xff08;如下图&#xff09;常见问题&#xff1f; 四次挥手 client和server通信写法server端client端 通信双方建立连接到断开连接的状态转换怎么应对多用户连接&#xff1f;缺点 IO多路复用select优缺点 poll…