JavaScript零基础入门速通（中）

目录

1. 函数

1.1 函数声明

1.2 返回值

1.3 匿名函数

1.4 箭头函数

2. 对象

2.1 创建对象

2.2 访问和修改对象的属性

2.3 对象方法

3. 数组

3.1 创建数组

3.2 数组方法

3.3 遍历数组

4. 作用域

4.1 全局作用域

4.2 局部作用域

4.3 块级作用域

5. 事件处理

5.1 事件监听

5.2 事件对象

结语

---

大家好，我是小黄。

昨天我们介绍了 JavaScript 的基础概念和语法，包括变量声明、数据类型、运算符和控制流语句。今天，我们将继续深入探讨 JavaScript 的中级知识，包括函数、对象、数组、作用域以及事件处理等内容。

1. 函数

函数是 JavaScript 中的基本构建块，用于封装一段可复用的代码。通过函数，我们可以将常用的逻辑抽象成一个单元，并根据需要进行调用。

1.1 函数声明

函数可以通过关键字 function 来声明。以下是一个简单的函数声明示例：

function greet(name) {console.log("Hello, " + name + "!");
}greet("Alice");  // 输出 "Hello, Alice!"

这个函数名为 greet，接受一个参数 name，然后输出一条问候消息。你可以在函数体内执行任意 JavaScript 代码。

1.2 返回值

函数可以返回值，使用 return 语句来指定返回的结果。如果没有显式的返回值，函数默认返回 undefined。

function add(a, b) {return a + b;
}let result = add(5, 3);  // result 的值为 8
console.log(result);

1.3 匿名函数

有时我们不需要给函数起一个名字，这时可以使用匿名函数。匿名函数通常用于回调或事件处理。

let sum = function(a, b) {return a + b;
};console.log(sum(2, 3));  // 输出 5

1.4 箭头函数

ES6 引入了箭头函数，它是函数的一种简化写法，语法更加简洁。箭头函数不会创建自己的 this，而是继承外部作用域的 this。

const multiply = (a, b) => a * b;
console.log(multiply(4, 5));  // 输出 20

箭头函数与普通函数的区别在于省略了 function 关键字，并且只有一行代码时，函数体可以省略大括号 {} 和 return。

2. 对象

在 JavaScript 中，对象 是一种复杂数据类型，用于存储一组数据和功能（属性和方法）。对象通常由多个键值对（属性）组成，每个键是一个字符串，值可以是任何数据类型。

2.1 创建对象

你可以通过大括号 {} 创建一个对象，并在其中定义键值对。

let person = {name: "Alice",age: 25,greet: function() {console.log("Hello, " + this.name);}
};console.log(person.name);  // 输出 "Alice"
person.greet();            // 输出 "Hello, Alice"

2.2 访问和修改对象的属性

你可以使用点语法或方括号语法访问和修改对象的属性。

let car = {make: "Toyota",model: "Corolla",year: 2020
};// 使用点语法访问
console.log(car.make);  // 输出 "Toyota"// 使用方括号语法访问
console.log(car["model"]);  // 输出 "Corolla"// 修改属性
car.year = 2021;
console.log(car.year);  // 输出 2021

2.3 对象方法

对象可以包含方法（即函数），这些方法可以通过对象来调用。

let calculator = {add: function(a, b) {return a + b;},subtract: function(a, b) {return a - b;}
};console.log(calculator.add(5, 3));  // 输出 8
console.log(calculator.subtract(5, 3));  // 输出 2

3. 数组

数组是 JavaScript 中用于存储有序数据的对象。数组的元素可以是任何数据类型，并且可以包含多个不同类型的元素。数组在 JavaScript 中的下标从 0 开始。

3.1 创建数组

你可以使用方括号 [] 来创建数组，数组中的元素用逗号分隔。

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]);  // 输出 "Apple"
console.log(fruits[1]);  // 输出 "Banana"

3.2 数组方法

数组有许多内建方法，用于操作数组元素。以下是一些常见的方法：

• push(): 向数组末尾添加一个或多个元素。
• pop(): 移除数组末尾的元素。
• shift(): 移除数组开头的元素。
• unshift(): 向数组开头添加一个或多个元素。

let numbers = [1, 2, 3];// 添加元素
numbers.push(4);
console.log(numbers);  // 输出 [1, 2, 3, 4]// 移除元素
numbers.pop();
console.log(numbers);  // 输出 [1, 2, 3]// 移除开头元素
numbers.shift();
console.log(numbers);  // 输出 [2, 3]

3.3 遍历数组

你可以使用 for 循环或者数组的内建方法（如 forEach()）来遍历数组。

let colors = ["red", "green", "blue"];// 使用 for 循环遍历
for (let i = 0; i < colors.length; i++) {console.log(colors[i]);
}// 使用 forEach 方法遍历
colors.forEach(function(color) {console.log(color);
});

4. 作用域

作用域是指变量、函数和对象可访问的区域。在 JavaScript 中，有两种主要的作用域：全局作用域 和 局部作用域。

4.1 全局作用域

在 JavaScript 中，声明在函数外部的变量是全局变量，这些变量在整个程序中都可以访问。

let globalVar = "I am a global variable";function showVar() {console.log(globalVar);  // 可以访问全局变量
}showVar();  // 输出 "I am a global variable"

4.2 局部作用域

在函数内部声明的变量是局部变量，只在函数内部可见，外部无法访问。

function localScope() {let localVar = "I am a local variable";console.log(localVar);  // 可以访问局部变量
}localScope();
// console.log(localVar);  // 错误：localVar 在外部无法访问

4.3 块级作用域

ES6 引入了 let 和 const，它们有块级作用域，即它们只能在声明它们的代码块内部访问。

if (true) {let blockVar = "I am inside a block";console.log(blockVar);  // 输出 "I am inside a block"
}
// console.log(blockVar);  // 错误：blockVar 只在 if 块内可见

5. 事件处理

JavaScript 允许我们监听并响应用户与网页的互动。常见的事件包括点击事件、鼠标事件、键盘事件等。

5.1 事件监听

你可以使用 addEventListener() 方法来监听元素的事件，并为事件指定回调函数。

let button = document.getElementById("myButton");button.addEventListener("click", function() {alert("按钮被点击了!");
});

在这个例子中，当用户点击按钮时，网页会弹出一个提示框。

5.2 事件对象

当事件发生时，浏览器会创建一个事件对象，并将其传递给事件处理函数。这个事件对象包含了事件的详细信息，例如鼠标位置、按键代码等。

button.addEventListener("click", function(event) {console.log("点击位置: " + event.clientX + ", " + event.clientY);
});

结语

在这一部分中，我们学习了 JavaScript 中的重要概念，包括函数、对象、数组、作用域以及事件处理。这些是编写交互性强的网页应用和 JavaScript 程序的基础。

各位小伙伴还在BOSS直聘hr已读不回？！试试这个宝藏小程序！大家快看这里。

创作不易，各位帅气漂亮的小伙伴点个关注再走呗！！