JavaScript语法基础之函数与数组

最新推荐文章于 2024-09-28 00:15:00 发布
最新推荐文章于 2024-09-28 00:15:00 发布
阅读量780 收藏 17
点赞数 30
分类专栏： web渗透 文章标签： 网络安全 web安全 安全 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74249600/article/details/141371072
版权

目录

1. 初识函数

1.1. 函数是什么？

1.2. 函数的定义

1.2.1. 没有返回值的函数

1.2.2. 有返回值的函数

1.2.3. 全局变量与局部变量

1.3. 函数的调用

1.3.1. 直接调用

1.3.2. 在表达式中调用

1.3.3. 在超链接中调用

1.3.4. 在事件中调用

1.4.内置函数

1.4.1.String内置函数

1.4.2.Math内置函数

1.4.3.数组(重点)

1. 初识函数

1.1. 函数是什么？

  • 先来看一段代码：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      var sum = 0;
      for (var i = 1; i <= 50; i++) {
        sum += i;
      }
      document.write("50以内所有整数之和为：" + sum);
    </script>
  </head>
  <body></body>
</html>
  • 大家一看就知道上面这段代码实现的功能是：计算 50 以内所有整数之和。
  • 如果要分别计算：
    • 50 以内所有整数之和
    • 100 以内所有整数之和
  • 那应该怎么实现呢？
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      var sum1 = 0;
      for (var i = 1; i <= 50; i++) {
        sum1 += i;
      }
      document.write("50以内所有整数之和为：" + sum1);
      document.write("<br/>");
      var sum2 = 0;
      for (var i = 1; i <= 100; i++) {
        sum2 += i;
      }
      document.write("100以内所有整数之和为：" + sum2);
    </script>
  </head>
  <body></body>
</html>
  • 为了减轻这种重复编码的负担，编程语言引入了函数的概念。
  • 如果我们想要实现上面 5 个范围内所有整数之和，用函数可以这样实现：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      //定义函数
      function sum(n) {
        var m = 0;
        for (var i = 1; i <= n; i++) {
          m += i;
        }
        document.write(n + "以内所有整数之和为：" + m + "<br/>");
      }
      //调用函数，计算50以内所有整数之和
      sum(50);
      //调用函数，计算100以内所有整数之和
      sum(100);
      //调用函数，计算150以内所有整数之和
      sum(150);
      //调用函数，计算200以内所有整数之和
      sum(200);
      //调用函数，计算250以内所有整数之和
      sum(250);
    </script>
  </head>
  <body></body>
</html>

1.2. 函数的定义

  • 在JavaScript中，函数可以分两种：
    • 没有返回值的函数；
    • 有返回值的函数。
  • 无论是哪一种函数，都必须使用 function 来定义的。

1.2.1. 没有返回值的函数

  • 没有返回值的函数，指的是函数执行完就结束了，不会返回任何值。
  • 语法：
function 函数名(参数1 , 参数2 ,..., 参数n){
    ……
}
  • 举例：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      //定义函数
      function addSum(a, b) {
        var sum = a + b;
        document.write(sum);
       
      }
      //调用函数
      addSum(1, 2);
        
    </script>
  </head>
  <body></body>
</html>

1.2.2. 有返回值的函数

  • 有返回值的函数，指的是函数执行完了之后，会返回一个值，这个返回值可以供我们使用。
  • 语法：
function 函数名(参数1 , 参数2 ,..., 参数n){
    ……
    return 返回值;
}
  • 举例：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      //定义函数
      function addSum(a, b) {
        var sum = a + b;
        return sum;
      }
      //调用函数
      var n = addSum(1, 2) + 100;
      document.write(n);
    </script>
  </head>
  <body></body>
</html>

1.2.3. 全局变量与局部变量

  • 在JavaScript中，变量有一定的作用域（也就是变量的有效范围）。
  • 根据作用域，变量可以分为以下 2 种：
    • 全局变量
    • 局部变量
  • 全局变量一般在主程序中定义，其有效范围是从定义开始，一直到整个程序结束为止。
  • 局部变量一般在函数中定义，其有效范围只限于在函数之中，函数执行完了就没了。
  • 举例：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      var a = "十里";
      //定义函数
      function getMes() {
        var b = a + "桃花";
        document.write(b);
      }
      //调用函数

      getMes();
    </script>
  </head>
  <body></body>
</html>
  • 举例：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      var a = "十里";
      //定义函数
      function getMes() {
        var b = a + "桃花";
      }
      //调用函数
      getMes();
      //尝试使用函数内的变量b
      var str = "三生三世" + b;
      document.write(str);
    </script>
  </head>
  <body></body>
</html>
  • 举例：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      var a = "十里";
      //定义函数
      function getMes() {
        var b = a + "桃花";
        return b;
      }
      var str = "三生三世" + getMes();
      document.write(str);
    </script>
  </head>
  <body></body>
</html>

1.3. 函数的调用

  • 如果一个函数仅仅是定义而没有被调用的话，则函数本身是不会执行的（认真琢磨这句话，非常重要）。
  • 我们都知道 JavaScript 代码是从上到下执行的，JavaScript 遇到函数定义部分会直接跳过（忽略掉），然后只有遇到函数调用才会返回去执行函数定义部分。

1.3.1. 直接调用

  • 直接调用，是常见的函数调用方式，一般用于没有返回值的函数。
  • 语法：
函数名(实参1, 实参2, ... , 实参n);
  • 举例：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      //定义函数
      function getMes() {
        document.write("听说泰国人很大方，一见面就说：刷我滴卡。");
      }
      //调用函数
      getMes();
    </script>
  </head>
  <body></body>
</html>

1.3.2. 在表达式中调用

  • 在表达式中调用，一般用于有返回值的函数，然后函数的返回值会参与表达式的计算。
  • 举例：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      //定义函数
      function addSum(a, b) {
        var sum = a + b;
        return sum;
      }
      //调用函数
      var n = addSum(1, 2) + 100;
      document.write(n);
    </script>
  </head>
  <body></body>
</html>

1.3.3. 在超链接中调用

  • 在超链接中调用，指的是在 a 元素的href属性中使用javascript:函数名的形式来调用函数。
  • 语法：
<a href="javascript:函数名"></a>
  • 举例：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      function expressMes() {
        alert("我：I Love\n她：爬");
      }
    </script>
  </head>
  <body>
    <a href="javascript:expressMes()">表白对话</a>
  </body>
</html>

1.3.4. 在事件中调用

  • JavaScript 是基于事件的一门语言，像鼠标移动是一个事件、鼠标单击也是一个事件，类似的事件很多。
  • 当一个事件产生的时候，我们就可以调用某个函数来针对这个事件作出响应。
  • 举例：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      function alertMes() {
        alert("Gok，给你初恋般的感觉~");
      }
    </script>
  </head>
  <body>
    <input type="button" onclick="alertMes()" value="提交" />
  </body>
</html>

1.4.内置函数

内置函数： JavaScript 已经封装好的函数， 直接用就可以了。

1.4.1.String内置函数

  • concat: 连接字符串
  • charAt: 根据下标获取字符
  • indexOf: 求对应字符串的下标
  • length：字符长度
  • touppercase：转换大小写
  • subString(start, end): 包前不包后
  • subStr(start, length)
  • replace: 替换字符串
// String 相关
var str = "I like eat chicken!!!";
// 获取某个下标的字符
console.log(str.charAt(0));
console.log(str.charAt(4));
// 得到一个输入的值
str = "你好吗";
if (str.indexOf("吗") != -1){
console.log("输入的值存在铭感字符！");
}
// 字符串长度
var a = str.length;
// 转换大小写
str = "user";
console.log(str.toUpperCase());

// 封装一个函数： ucfirst 将首字母转换成大写？
/**
* 将字符串的首字母转换成大写
* @param str
*/
function ucfirst(str) {
// 获取首字母并转换成大写
var first = str.charAt(0).toUpperCase();
// user
// u ser
return first+str.substr(1);
}
str = ucfirst("user");
console.log(str);

1.4.2.Math内置函数

  • Math.ceil() : 向上取整
  • Math.floor(): 向下取整
  • Math.round(): 四舍五入
  • Math.random(): 伪随机数
// 向上取整
console.log(Math.ceil(7.1));
// 向下取整
console.log(Math.floor(7.9));
// 伪随机数
console.log(Math.ceil(Math.random()*10));
var ran = Math.random() * 10000;
        var num = Math.floor(ran + 1);
        console.log(num);

1.4.3.数组(重点)

看到中括号，马上想到数组

// 定义空数组
var arr1 = new Array("后裔","小卤蛋","虞姬");
console.log(arr1);
// 定义初始化长度的数组
var arr2 = new Array(5);
console.log(arr2);
// 动态初始化数组
var arr3 = new Array("程咬金","亚瑟","孙尚香");
console.log(arr3);
// 用中括号定义
var arr4 = ["后裔","小卤蛋","虞姬"];
console.log(arr4);
// 查看数组的长度
console.log(arr4.length);

数组的下标！！！！！！！！！！！！！！！！！！！！！！！！！！

从0开始

// 获取元素值
arr=['小鲁班','凯']
console.log(arr[0]);
// 修改元素值
arr[] = "李元芳";
console.log(arr);

数组的遍历依次的去查看一遍数组中的每个元素

// 定义空数组
var arr = ["后裔","小卤蛋","虞姬","黄忠", "伽罗"];
// fori的遍历
// 如果数组的元素很多
var len = arr.length;
for (var i = 0; i < len; i++) {
console.log(arr[i]);
}
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");
// for in => 迭代遍历是下标
for (var i in arr){
console.log(arr[i]);
}
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");
// for of => 迭代遍历是元素
for (var value of arr){
console.log(value);
}

数组相关函数

// 定义数组
var arr = ["后裔","小卤蛋","虞姬","黄忠", "伽罗"];
console.log(arr);
// 添加元素在末尾
arr.push("程咬金");
console.log(arr);
// 在数组的头部添加元素
arr.unshift("马可波罗");
console.log(arr);
// 删除最后一个元素
arr.pop();
console.log(arr);
// 删除多个
arr.splice(2, 2);
console.log(arr);
// 插入
arr.splice(1, 0, "小卤蛋","公孙离");
console.log(arr);
// 替换
arr.splice(1, 1, "大卤蛋");
console.log(arr);
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");
// 定义一个数字的数组
var nums = [12,1,55,66,22,3];
console.log(nums);
// 默认的排序是字典序排序，比较字符
nums.sort();
console.log(nums);
// 实际的业务中， 需要升序/降序进行排序
nums.sort(function (a, b) {
return b-a;
});
console.log(nums);

苏苏渗透大师
关注
专栏目录
JS基础语法（二）——数组
js_bbasic的博客
11-19 776
JS数组的简单了解与使用
JavaScript语法基础学习——数组&函数
weixin_61920612的博客
02-20 1098
JavaScript语法基础学习——数组&函数
27个重要的JavaScript数组函数整理汇总
li826827的博客
05-23 1209
JavaScript 数组方法是内置的 JavaScript 数组函数，可应用于数组。这些内置方法中的每一个都有一个独特的功能，可以生成一个数组，并使我们无需从头开始编写常用函数。
JavaScript基础语法_JavaScript函数
JiuMeilove的博客
06-16 2万+
在JS里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用,虽然for循环语句也能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用JS中的函数 函数就是封装了一段可以被重复调用执行的代买块,通过代码块可以实现大量代码的重复使用 示例 如上,我们没要计算一个累加,就需要写一段大致相同的代码,这样不仅劳累而且无意义,当我们拥有函数,就可以用使用函数将上面的代码封装,以重复使用 输出 函数声明需要以 function 关键字开头，之后为要创建的函数名称，function
JavaScript(二）之数组、函数、对象
qq_47157937的博客
01-19 1194
文章目录数组（Array）数组的创建方式访问数组元素数组的索引遍历数组 数组（Array） 数组的概念: 可以把一组相关数据一起存放，并提供方便的获取方式 什么是数组： 数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。 //普通变量一次只能存储一个值 var num = 10; //数组一次可以存储多个值 var arr = [1,2,3,4,5]; 数组的创建方式 JavaScript中创建数组有两种方式： 利用new 创建数组 var 数组名 = new Arra
JavaScript基础语法_JavaScript数组和冒泡排序
JiuMeilove的博客
06-16 2万+
数组（array）是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示。 上面代码中的a、b、c就构成一个数组，两端的方括号是数组的标志。a是0号位置，b是1号位置，c是2号位置。除了在定义时赋值，数组也可以先定义后赋值。 任何类型的数据，都可以放入数组。 上面数组arr的3个成员依次是对象、数组、函数。如果数组的元素还是数组，就形成了多维数组。 数组的本质 本质上，数组属于一种特殊的对象。typeof运算符会返回数组的类型是object。 上面代码表明，typeof运算符认为数组的
【Javascript】JS语法总结-数组
weixin_49202767的博客
03-20 1481
JS语法总结-数组常用数组方法改变原数组返回新数组数组中搜索与字符串的转换计算 常用数组方法 arr.push(elem) 将一个或多个元素添加到数组的末尾，并返回数组新长度 arr.pop() 从数组取出最后一个元素 arr.shift() 从数组中取出第一个元素 arr.shift(elem) 将一个或者多个元素添加到数组的开头 const array = ['a','b','c'] array.push('d'); //4 当前数组['a
JavaScript中的数组方法总结+详解
热门推荐
qq_43223007的博客
11-28 5万+
在JS中,数组方法是非常重要且常用的的方法.在此整理总结一番. JavaScript 数组的力量隐藏在数组方法中。 1. js常用数组方法 方法名 功能 返回值 是否改变原数组 版本 push() 在数组最后一位添加一或多个元素 返回长度 Y ES5- unshift() 在数组前添加一或多个元素 返回长度 Y ES5- 2.方法详解 1.push .........
JS常见内置函数大全数组篇（内附详细案例）
HHX_01的博客
10-24 1319
前言 1. every() 检测数组元素的每个元素是否都符合条件 2. filter() 检测数组元素，并返回符合条件所有元素的数组 3. find() 返回符合传入测试（函数）条件的数组元素 4. map() 通过指定函数处理数组的每个元素，并返回处理后的数组 5. slice() 选取数组的的一部分，并返回一个新数组 6. splice() 从数组中添加或删除元素 7. shift()
【javaScript数组，函数】的基础知识点
qq_201729558
06-14 1418
本文主要讲解js的数组，函数，基础知识点总结
JavaScript学习资料JavaScript基础语法函数及相关源代码资料.zip
05-04
JavaScript学习资料JavaScript基础语法函数及相关源代码资料: BOM基础.pdf BOM基础（源代码）.zip Date对象之获取和设置月份-getMonth&setMonth（教辅）.pdf DOM事件总结（教辅）.pdf DOM事件（ppt）.pdf JavaScripr...
Javascript学习笔记之数组的构造函数
10-25
在JavaScript编程语言中，数组是一种特殊的对象，用于存储...尽管现代JavaScript开发中建议尽量使用简洁的数组字面量语法，但了解并熟悉构造函数及其操作方法依然不可或缺，特别是对于那些需要处理复杂数组操作的场景。
JavaScript基础语法+变量与数据类型+流程控制：条件语句与循环+函数与作用域+对象与原型链+数组与字符串操作等全套教程
08-01
JavaScript基础语法 变量与数据类型 流程控制：条件语句与循环 函数与作用域 对象与原型链 数组与字符串操作 DOM操作与事件处理 JavaScript面向对象编程 异步编程：回调函数与Promise 模块化编程与CommonJS ES6新...
一文解读，网络安全行业人才需求情况《网络安全产业人才发展报告》
weixin_59086772的博客
10-18 8479
随着近几天国家网络安全宣传周在全国各地开展活动，网络安全再一次成为热门话题。网络安全不再缩在小小的安全圈子里，惠及面越来越广。不少对网络安全颇有兴趣的朋友非常关心行业前景如何？该怎么提升自我能力，更快地加入网安行列。 今天雨笋君就10月13日在网络安全宣传周上发布的《2021网络安全人才报告》进行一个简单的行业前景分析。 一、网络安全行业市场发展情况 网络时代生活越来越离不开网络，与此同时发生的网络安全攻击事件、非法入侵等等一系列事件都威胁着普通人的生活。没有网络安全保障，个人和企业等重.
网络安全详解
weidl001的博客
09-21 1513
网络安全（Cybersecurity）是指保护网络系统、设备、程序及数据免受攻击、损坏或未授权访问的实践。其核心目标是确保信息的机密性、完整性和可用性。机密性（Confidentiality）：确保信息仅被授权的人员访问。完整性（Integrity）：保护信息不被未授权的修改或破坏。可用性（Availability）：确保信息和资源在需要时可被访问和使用。
网络安全全方略
AI逍遥子
09-25 1296
网络安全全方略是一个系统化、全面化的过程，涉及策略制定、技术实施、管理流程、技术维护和文化建设等多个方面。通过构建一个全方位、多层次的网络安全防护体系，可以有效保护网络系统、数据和服务免受各种威胁，保业务的连续性和数据的完整性。
信息安全工程师（24）网络安全体系建设原则与安全策略
最新发布
m0_73399576的博客
09-28 815
信息安全工程师——网络安全体系建设原则与安全策略篇
Linux 网络安全守护：构建安全防线的最佳实践
weixin_62641226的博客
09-23 1024
通过定期更新系统、强化用户权限管理、配置防火墙、使用SSH安全连接、定期备份数据、监控系统日志以及安装安全工具，用户可以有效提升Linux系统的安全性，构建坚固的网络安全防线。Linux系统通常内置了防火墙工具，如`iptables`和`firewalld`。用户应根据实际需求，设置合适的规则，限制不必要的端口和服务。可以使用`rsync`、`tar`等工具进行备份，确保在发生安全事件时能够快速恢复。此外，定期审查用户账户和权限，及时删除不再使用的账户，确保只有必要的用户能够访问系统。
Web安全-SQL注入之联合查询注入
m0_60984906的博客
09-25 338
Web安全SQL注入之联合查询注入墨者学院-SQL手工注入漏洞测试(MySQL数据库-字符型)
深入理解JavaScript：变量、函数与数组
"这篇javascript学习笔记主要探讨了JavaScript的基础知识，包括变量声明、数值和字符串直接量、函数直接量声明以及数组的使用。" 在JavaScript中，变量声明并不需要指定类型，只涉及到变量的初值设定。这与许多其他...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

苏苏渗透大师

请把钱砸我脸上谢谢

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值