【Java Web学习 | 第九篇】JavaScript(3) 数组+函数

🌈 个人主页: Hygge_Code
🔥 热门专栏:从0开始学习Java | Linux学习| 计算机网络
💫 个人格言: "既然选择了远方，便不顾风雨兼程"

文章目录

[JavaScript 数组操作与函数](#JavaScript 数组操作与函数)
- 一、数组操作：增删改查与排序
- - [1. 数组元素的添加](#1. 数组元素的添加)
  - [2. 数组元素的删除](#2. 数组元素的删除)
  - [3. 数组排序](#3. 数组排序)
- 二、函数
- - [1. 函数的声明与调用](#1. 函数的声明与调用)
  - [2. 函数的参数与返回值](#2. 函数的参数与返回值)
  - [3. 匿名函数的应用](#3. 匿名函数的应用)
- 总结

JavaScript 数组操作与函数

一、数组操作：增删改查与排序

数组是存储多个值的有序集合，JavaScript 提供了丰富的方法来操作数组。以下是最常用的数组操作技巧：

1. 数组元素的添加

push() 方法：在数组末尾添加元素，返回新数组的长度

javascript 复制代码

let arr = ["夏至", "林七夜", "立夏"];
let num = arr.push("奈何", "微微"); // 添加两个元素
console.log(num); // 输出：5（新数组长度）
console.log(arr); // 输出：["夏至", "林七夜", "立夏", "奈何", "微微"]

unshift() 方法：在数组开头添加元素，返回新数组的长度

javascript 复制代码

console.log(arr.unshift("沧南", "云")); // 输出：7（新数组长度）
console.log(arr); // 输出：["沧南", "云", "夏至", "林七夜", "立夏", "奈何", "微微"]

2. 数组元素的删除

pop() 方法：删除数组最后一个元素，返回被删除的元素

javascript 复制代码

console.log(arr.pop()); // 输出："微微"（被删除的元素）
console.log(arr); // 输出：["沧南", "云", "夏至", "林七夜", "立夏", "奈何"]

shift() 方法：删除数组第一个元素，返回被删除的元素

javascript 复制代码

console.log(arr.shift()); // 输出："沧南"（被删除的元素）
console.log(arr); // 输出：["云", "夏至", "林七夜", "立夏", "奈何"]

splice() 方法：灵活删除/添加元素（万能方法）

javascript 复制代码

// 语法：splice(起始索引, 删除数量, 新增元素1, 新增元素2...)
arr.splice(2, 2, "虾米", "大明"); 
// 从索引2开始，删除2个元素，添加"虾米"和"大明"
console.log(arr); // 输出：["云", "夏至", "虾米", "大明", "奈何"]

3. 数组排序

sort() 方法：对数组排序（默认按字符串排序，需自定义数字排序）

javascript 复制代码

let number = [1, 2, 4, 3, 5, 7, 6];
// 降序排序
number.sort(function(a, b) {
  return b - a; // 升序用 a - b
});
console.log(number); // 输出：[7, 6, 5, 4, 3, 2, 1]

reverse() 方法：颠倒数组元素顺序

javascript 复制代码

arr.reverse();
console.log(arr); // 输出：["奈何", "大明", "虾米", "夏至", "云"]

二、函数

函数是封装可执行代码的容器，通过函数可以实现代码的复用和模块化。

1. 函数的声明与调用

基本语法：

javascript 复制代码

function 函数名(参数列表) {
  // 函数体
}

命名规范：

采用小驼峰命名法（如 getSum）
前缀用动词（can/has/is/get/set 等）

示例：

javascript 复制代码

// 无参数函数
function sayHello() {
  console.log("你好啊~");
}
sayHello(); // 调用函数

// 带参数函数（支持默认值）
function getSum(a = 0, b = 0) {
  console.log(a + b);
}
getSum(5, 3); // 输出：8
getSum(); // 输出：0（使用默认值）

2. 函数的参数与返回值

参数处理 ：实参与形参数量可不一致，通过 arguments 可获取所有实参
返回值 ：用 return 语句返回结果，未定义 return 时默认返回 undefined

示例：

javascript 复制代码

// 计算数组总和
function getArraySum(arr = []) { // 默认值避免无参数时出错
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum; // 返回计算结果
}
console.log(getArraySum([1, 2, 3, 4, 5])); // 输出：15

3. 匿名函数的应用

匿名函数是没有名称的函数，常用于临时操作或避免全局变量污染。

函数表达式：将匿名函数赋值给变量

javascript 复制代码

let fn = function() {
  console.log("我是函数表达式");
};
fn(); // 调用方式与普通函数相同

立即执行函数：定义后立即执行，无需手动调用

javascript 复制代码

// 写法一
(function(x = 0, y = 0) {
  console.log(x + y);
})(1, 2); // 输出：3

// 写法二
(function(x = 0, y = 0) {
  console.log(x + y);
}(2, 3)); // 输出：5

总结

本文介绍了 JavaScript 中数组和函数的核心用法：

数组操作：push()/unshift() 添加元素，pop()/shift()/splice() 删除元素，sort()/reverse() 排序
函数使用：声明规范、参数处理、返回值控制，以及匿名函数的两种常见形式

如果我的内容对你有帮助，请点赞，评论，收藏。创作不易，大家的支持就是我坚持下去的动力！