Web前端-JavaScript(js数组和函数)

文章目录

    • 1.数组
      • 1.1 数组的概念
      • 1.2 创建数组
      • 1.3 获取数组中的元素
      • 1.4 数组中新增元素
      • 1.5 遍历数组
    • 2.函数
      • 2.1 函数的概念
      • 2.2 函数的使用
        • 函数声明
        • 调用函数
        • 函数的封装
      • 2.3 函数的参数
        • 函数参数语法
        • 函数形参和实参数量不匹配时
      • 2.4 函数的返回值
        • 2.4.1 案例练习
      • 2.5 arguments的使用
      • 2.6 函数的两种声明方式

1.数组

1.1 数组的概念

  • 数组可以把一组相关的数据一起存放,并提供方便的访问(获取)方式。
  • 数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素

1.2 创建数组

JS 中创建数组有两种方式:

  • 利用 new 创建数组
var arr = new Array();   // 创建一个新的空数组
  • 利用数组字面量创建数组

    //1. 使用数组字面量方式创建空的数组
    var  数组名 = []//2. 使用数组字面量方式创建带初始值的数组
    var  数组名 = ['小白','小黑','大黄','瑞奇'];
    
  • 数组元素的类型

    数组中可以存放任意类型的数据,例如字符串,数字,布尔值等。

    var arr = ['小白',12,true,28.9];
    

1.3 获取数组中的元素

  • 索引 (下标) :用来访问数组元素的序号

  • 数组下标从 0 开始

  • 数组元素可以通过索引来访问、设置、修改对应的数组元素.

// 定义数组
var arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]);    

注意:如果访问时数组没有和索引值对应的元素,则得到的值是undefined

1.4 数组中新增元素

数组中可以通过以下方式在数组的末尾插入新元素:

数组[ 数组.length ] = 新数据;

1.5 遍历数组

  • 数组遍历

    var arr = ['red','green', 'blue'];
    for(var i = 0; i < 3; i++){console.log(arr[i]);
    }
    
  • 数组的长度

var arr = [1,2,3];
alert(arr.length);


- 注意:- 此处数组的长度是数组元素的个数, length - 1 是最大的索引数-  当我们数组里面的元素个数发生了变化,这个 length 属性跟着一起变化- 如果设置的length属性值大于数组的元素个数,则数组其余元素为undefined;- 如果设置的length属性值小于数组的元素个数,则会把超过该值的数组元素删除案例练习:1. 在数组中存放1 - 10
2. 冒泡排序```js
var arr1 = [];
for (var i = 0; i <10; i++) {arr1[i] = i+1   
}
console.log(arr1)
var array = [4, 3, 1, 5, 2];
for (var i = 0; i < array.length - 1; i++) {for (var j = 0; j < array.length - 1 - i; j++) {if (array[j] > array[j + 1]) {var temp = array[j];array[j] = array[j + 1];array[j + 1] = temp;}}
}
console.log(array);

2.函数

2.1 函数的概念

函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用

2.2 函数的使用

函数声明
function 函数名() {//函数体
}
  • function 是声明函数的关键字,必须小写

  • 由于函数一般是为了实现某个功能才定义的

调用函数
函数名();
  • 调用的时候千万不要忘记添加小括号

  • 函数不调用,自己不执行

函数的封装

函数的封装是把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口

例子:封装计算1-100累加和

function getSum(){var sum = 0;// 准备一个变量,保存数字和for (var i = 1; i <= 100; i++) {sum += i;// 把每个数值 都累加 到变量中}alert(sumNum);
}// 调用函数
getSum();

2.3 函数的参数

函数参数语法
  • 形参:函数定义时设置接收调用时传入
    • 形式上的参数 函数定义的时候 传递的参数 当时并不知道是什么
  • 实参:函数调用时传入小括号内的真实数据
    • 实际上的参数 函数调用的时候 传递的参数 实参是传递给形参的

案例:利用函数求任意两个数之间的和

 function getSum(a, b) {console.log(a + b)}
getSum(1, 2)
函数形参和实参数量不匹配时
参数个数说明
实参个数等于形参个数输出正确结果
实参个数多于形参个数只取到形参个数
实参个数小于形参个数多的形参定义为undefined

注意:在JavaScript中,形参的默认值是undefined。

2.4 函数的返回值

function 函数名(){//其它代码return  需要返回的值;
}var result = 函数名();

注意:

  • 在使用 return 语句时,函数会停止执行,并返回指定的值
  • 如果函数没有 return ,返回的值是 undefined
  • return之后的代码不会被执行
  • return返回值只能有一个,不可以有多个
2.4.1 案例练习

利用函数返回值求2个数的最大值

function getSum(a, b) {return a > b ? a : b;
}
var res = getSum(3, 2)
console.log(res);

2.5 arguments的使用

当不确定有多少个参数传递的时候,可以用 arguments 来获取。arguments展示形式是一个伪数组,因此可以进行遍历。

function max() {console.log(arguments);for (var i = 0; i < arguments.length; i++) {console.log(arguments[i]);}
}max(1, 2, 3)

伪数组具有以下特点:

  • 具有 length 属性
  • 按索引方式储存数据
  • 不具有数组的 push , pop 等方法

注意:在函数内部使用该对象,用此对象获取函数调用时传的实参。

2.6 函数的两种声明方式

  • 命名函数

    function fn() 
    {}fn();  
    
    • 因为有名字,所以也被称为命名函数
    • 调用函数的代码既可以放到声明函数的前面,也可以放在声明函数的后面
  • 匿名函数

var fn = function()
{

}

fn();


- 因为函数没有名字,所以也被称为匿名函数
- 这个fn 里面存储的是一个函数  
- 函数调用的代码必须写到函数体后面

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

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

相关文章

Python开发GUI常用库PyQt6和PySide6介绍之二:设计师(Designer)注意事项

Python开发GUI常用库PyQt6和PySide6介绍之二&#xff1a;设计师&#xff08;Designer&#xff09;注意事项 PySide6和PyQt6都有自己的设计师&#xff08;Designer&#xff09;&#xff0c;用于可视化地设计和布局GUI应用程序的界面。这些设计师提供了丰富的工具和功能&#xf…

快速入门 — — 在Moonbeam上开发

访问熟悉的以太坊工具是一回事&#xff0c;获得顶级支持、拥有构建突破性跨链应用程序的资源是另一回事。 Moonbeam汇集了通过集成互操作性解决方案访问任何链的能力、具有完全以太坊兼容性的理想开发环境&#xff0c;以及使用Substrate在波卡上安全扩展的能力。 开始在Moonb…

ARMv8-A 架构和处理器

ARM 架构可以追溯到 1985 年&#xff0c;但它并没有保持静止。相反&#xff0c;自早期的 ARM 内核以来&#xff0c;它已经得到了大规模的发展&#xff0c;每一步都增加了特性和功能&#xff1a; ARMv4 及更早版本 这些早期的处理器仅使用 ARM 32 位指令集。 ARMv4T ARMv4T架…

MT6785|MTK6785安卓核心板功能规格介绍_Helio G95核心板

MT6785安卓核心板是一款功能强大的工业级4G智能模块&#xff0c;它采用了Android 9.0操作系统。该核心板内置了蓝牙、FM、WLAN和GPS模块&#xff0c;具有高度集成的基带平台&#xff0c;结合了调制解调器和应用处理子系统&#xff0c;以支持LTE/LTE-A和C2K智能终端应用。 MTK67…

2023年12月GESP Python三、四级编程题真题解析

三、2023年12月GESP Python三级编程题 【三级编程题1】 【试题名称】&#xff1a;小猫分鱼 【问题描述】 海滩上有一堆鱼&#xff0c;N只小猫来分。第一只小猫把这堆鱼平均分为N份&#xff0c;多了i<N条鱼&#xff0c;这只小猫把多的i条鱼扔入海中&#xff0c;拿走了一份…

【小沐学Unity3d】3ds Max 减面工具:Simplyon(Unity3d,Python)

文章目录 1、简介2、下载安装2.1 安装Simlygon插件2.2 安装USD插件 3、使用测试4、Python测试结语 1、简介 Simplygon 带有一个 Unity 插件&#xff0c;它公开了优化功能&#xff0c;例如缩减、聚合、重新划分网格、冒名顶替者&#xff08;SingleView、BillboardCloud / Veget…

electron兼容统信UOS系统过程中的坑

这里写目录标题 找统信支持人员咨询过&#xff0c;他们说不对electron提供支持&#xff0c;如果需要兼容统信UOS还是建议换个开发技术gbm_bo_map--no-sandboxNo protocol specified任务栏图标总结 找统信支持人员咨询过&#xff0c;他们说不对electron提供支持&#xff0c;如果…

Module build failed: TypeError: this.getOptions is not a function

在使用webpack打包出现以上错误时&#xff0c;可能是你安装的css-loader和style-loader的版本过高。 我用的webpack版本是3.6.0 因此需要降低一下版本 在你编辑器终端输入以下命令&#xff1a; npm install css-loader3.6.0 npm install --save-dev style-loader1.00 然后接下…

hyper-v ubuntu2204指定静态ip地址

虚拟机静态IP设置 虚拟机每次重新启动&#xff0c;都会动态分配IP&#xff0c;这导致我们无法使用一个固定的ip连接到虚拟机内部。解决该问题的最直接有效的办法就是给虚拟机绑定2张网卡&#xff0c;一张用于连接外网、一张用于连接内网。 init 0 关机&#xff0c;也可以从管…

如何用 CleanMyMac 来保护 Mac 隐私

大家早上好&#xff0c;中午好&#xff0c;下午好&#xff0c;晚上好。 在我们使用MacBook上的自带浏览器-Safari&#xff08;或者一些其他浏览器&#xff09;进行网页浏览的时候&#xff0c;往往会留下一些痕迹。如果这些痕迹涉及一些敏感数据信息的话&#xff0c;那么我们肯…

idea 如何使用 JaCoCo 跑覆盖率

背景介绍 什么代码覆盖&#xff1f; 代码覆盖(Code coverage)是软件测试中的一种度量&#xff0c;描述程序中源代码被测试的比例和程度&#xff0c;所得比例称为代码覆盖率。简单来理解&#xff0c;就是单元测试中代码执行量与代码总量之间的比率。 Java常用的单元测试覆盖率…

K8S学习指南(31)-k8s网络插件calico

文章目录 引言Calico的特点1. 纯Layer 3架构2. BGP路由3. ACL&#xff08;Access Control List&#xff09;4. 网络流量加密 Calico的优势1. 高性能2. 易于管理3. 强大的安全性4. 可扩展性 Calico的劣势1. 对Underlay网络的依赖2. 相对复杂的部署 在Kubernetes中部署Calico的示…

第四十一章 XML 映射参数摘要

文章目录 第四十一章 XML 映射参数摘要 第四十一章 XML 映射参数摘要 TopicParameters启用 XML 映射。XMLENABLED 类参数将属性映射到元素或属性。XMLPROJECTION property parameter ("NONE", "ATTRIBUTE", "XMLATTRIBUTE", "CONTENT"…

MatGPT - 访问 OpenAI™ ChatGPT API 的 MATLAB® 应用程序

系列文章目录 前言 MatGPT 是一款 MATLAB 应用程序&#xff0c;可让您轻松访问 OpenAI 的 ChatGPT API。使用该应用程序&#xff0c;您可以加载特定用例的提示列表&#xff0c;并轻松参与对话。如果您是 ChatGPT 和提示工程方面的新手&#xff0c;MatGPT 不失为一个学习的好方…

Hutool--DFA 敏感词工具类

使用hutool的dfa工具类可以很好的帮助我们来实现敏感词过滤的功能&#xff0c;下面从用例入手来逐步地去j简单了解一下dfa工具类。 字典树 DFA算法的核心是建立了以敏感词为基础的许多敏感词树&#xff08;字典树&#xff09;。 它的基本思想是基于状态转移来检索敏感词。 字…

数据结构与算法之美学习笔记:38 | 分治算法:谈一谈大规模计算框架MapReduce中的分治思想

目录 前言如何理解分治算法&#xff1f;分治算法应用举例分析分治思想在海量数据处理中的应用解答开篇内容小结 前言 本节课程思维导图&#xff1a; MapReduce 是 Google 大数据处理的三驾马车之一&#xff0c;另外两个是 GFS&#xff08;hdfs&#xff09; 和 Bigtable(hbase)…

Java URL

URL&#xff1a;统一资源定位符&#xff0c;说白了&#xff0c;就是一个网络 通过URLConnection类可以连接到URL&#xff0c;然后通过URLConnection可以获取读数据的通道。非文本数据用字节流来读取。 读完之后写入本地即可。 public class test {public static void main(S…

杰发科技AC7840——在Eclipse环境下使用Jlink调试

序 杰发给的代码里面已经做代码相关配置&#xff0c;搭建好eclipse环境即可运行&#xff0c;搭建步骤还是比较简单的。 参考文章 如何使用Eclipse搭配JLink来调试HelloWold应用程序&#xff1f;-电子发烧友网 软件链接 杰发科技Eclipse的sample代码里面的doc文章&#xff…

安防视频融合云平台/智慧监控平台EasyCVR如何添加验证码调用接口?

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…

VCP-DCV VMware vSphere,12月23日即将开课~想了解点击查看

VCP-DCV VMware vSphere 本周开课~ 想报名的必须提前预约啦 &#x1f447;&#x1f447;&#x1f447; 课程介绍 本课程重点讲授如何安装、配置和管理VMware vSphere 8.0&#xff08;包括VMware ESXi™ 8.0和VMware vCenter Server™ 8.0&#xff09; 本课程将帮助您做好为任…