Web 基础知识：JavaScript 基础

本文是系列文章的一部分：Web 基础知识

今天，我们学习 JavaScript 的基础知识。 如果你接触过网络，你肯定接触过大量的 JavaScript。

JavaScript 是一种功能强大的编程语言，主要用于在网站上创建动态交互式内容。它在浏览器中运行，无需重新加载页面即可实现实时更新和用户交互。

它的核心功能之一是操作文档对象模型 (DOM)，这使得开发人员能够动态地更改网页的结构和内容。不过，在 Web 基础知识的本章中，我们不会讨论 DOM 以及如何操作它。

JavaScript 是事件驱动的，这意味着它可以响应用户点击或键盘按下等输入，这使得它对于构建交互式网站至关重要。此外，它还支持异步编程，允许在不中断用户界面的情况下执行从服务器获取数据等任务。

如果必须的话，回顾一下！

在开始之前，务必通读 Web 基础系列的每一部分。我们不会停下来解释之前探讨过的概念。本章的目标是学习基础知识，以便我们在下一章中学习更酷、更有趣的内容！

---

基础知识：变量和类型

变量

JavaScript 中的变量与我们在本系列第二部分中讨论的 CSS 变量略有不同。这是因为 CSS 只能定义一种类型的变量，而 JavaScript 有三种。

变量类型	可变性	范围	细节
var	可变的	全球的	已基本弃用。 这相当于 CSS 变量，可以在文档的任何位置访问和修改。不建议这样做，因为其范围限制不当可能会导致问题。
let	可变的	块范围	这是 JavaScript 中最常见的变量声明类型。 它包含在声明块的范围内，控制其使用。
const	不可变*	块范围	定义一个具有不可变引用的变量。该变量包含在声明它的块的范围内，从而控制其使用。

const处理对象和处理原始类型时，声明的功能有所不同。要了解更多信息，请参阅我们关于对象可变性的文章。

类型

类型分为两类：原始类型和对象类型。

类型	细节
原始	数字、字符串、布尔值、符号、null、undefined 和 BigInt。
目的	对象、数组、函数、日期、正则表达式。

---

数字

数字类型可以返回整数或浮点数。

let age = 27;let pi = 3.14;

BigInt

当使用常规数字时，我们只能使用所谓的MAX_SAFE_INTEGER，其值上限为9007199254740991。

如果需要表示大于 允许的值number，可以使用BigInt值。我们BigInt通过n在数字末尾添加 来声明 ，或者使用BigInt()函数。

let hugeNumber = BigInt("9007199254740991");

---

字符串

类型是将任意内容封装到引号中而创建的。

let name = "Eduardo";
let gender = "male";
let country = "Brazil";

引号使内容的任何可感知类型无效，这意味着，只要它在引号内，它始终被视为字符串。

/* This is not considered a number.We cannot manipulate the value as one. */let age = "27";/* This will not work, as we're tryingto add an integer to a string value! */age = age + 1;

---

布尔值

Aboolean是一个可以为true或 的值false。

let a = 3;let b = 1;
let isLarger = a > b;b += 5;isLarger = a > b;

---

不明确的(未定义的)

该undefined值是未提供时应用的默认值。

let value;
console.log(value);

---

无效的(空值)

null正如所描述的那样；与不同，undefined它专门设置了一个空值。

let result = null;

---

对象

对象是 JavaScript 中强大的工具，它允许我们存储键值对以进行数据管理。对象的示例如下：

const person = {  name: "Eduardo";  age: 27;  country: "Brazil";}

然后我们可以检索这些值或修改它们。

console.log(person.name); console.log(person.age);
person.age++;console.log(person.age) 

正如我们之前提到的，Object尽管 s 被附加到const变量，它仍然可以被修改。这是因为，虽然它们的引用是不可变的，但它们的内容却是可变的。要了解更多信息，请参阅我们关于对象可变性的文章。

---

数组

数组也是一种类型Object。它们可以容纳任何内容类型，包括其他数组！

const numberArray = [1, 2, 3, 4, 5];
const stringArray = ["Corbin", "Eduardo", "Obi", "Sarah"];
const mixedArray = [1, "Corbin", null, undefined];

我们可以使用索引值从数组位置检索值。

const numberArray = [1, 2, 3];console.log(numberArray[0]); console.log(numberArray[3]); 

---

功能

函数，顾名思义，用于执行可重复使用的任务或返回值。

我们可以用两种不同的方式声明函数。

标准函数

对于过去使用过其他语言的人来说，JavaScript 中的函数可能看起来很熟悉。

function functionName() {  /* Function body. */}

函数可以根据需要接收任意数量的参数。参数的数量没有限制。它们仅仅是函数在其任务中可能用到的类型的“插槽”。我们来看一个简单的例子。

在下面的函数中，我们return传入一个值。通过将firstandsecond参数与>运算符进行比较，我们返回一个布尔值。

function isLarger(first, second) {  return first > second;}

上面的函数isLarger(first, second)接受两个参数。与其他静态类型语言（例如 Java）不同，我们无法指定这些参数的类型。虽然直观上看，该函数需要两个数字，但除非我们自己编写检查，否则我们无法确保这一点。

function isLarger(first, second) {  
    if (typeof first !== 'number' || typeof second !== 'number') {   
        throw new TypeError('Both arguments must be numbers!');  
    }  
    return first > second;
}

箭头函数

箭头函数是标准函数的更简洁版本。

function isLarger(first, second) {  return first > second;}
const isLarger = (first, second) => first > second;

当只有一个return语句时，可以实现更短的语法，如上所示，忽略了主体括号（）的需要{}。

除此之外，箭头函数在一个重要方面有所不同：this关键字的上下文。

了解更多

了解使用时上下文的重要性 ，this以及标准函数和箭头函数在分配属性时的区别。📃 掌握 JavaScript 的关键字使用

this``bind

将函数作为值调用

📝函数本身就是值。

我们有一篇文章对此进行了更详细的介绍。请查看以了解更多信息。

我们可以将函数及其返回值封装在变量中。

const isLarger = (first, second) => first > second;if (isLarger()) {  console.log("The number is larger, indeed!");}

在本例中，if语句调用了该函数，因为我们()在末尾添加了 。添加括号告诉代码在引用该函数时立即运行它。

引用但不运行函数

在某些情况下，我们确实希望简单地引用一项任务，以便在适当的时候触发它。

假设我们有一个任务需要在点击按钮时运行。我们只希望它在点击按钮时触发，所以我们不能在()末尾添加 ，否则我们会立即运行该函数。

const handleClick = () => alert("Button clicked!");document.querySelector("button").addEventListener("click", handleClick);

现在我们的功能只有在按下按钮时才会触发。

---

课程

类被放在最后，因为它最健壮。类让我们能够Object轻松地构建，并提供可重用的类特定方法。

在接下来的示例中，我们将创建一个咖啡杯类。该类需要能够：

• 支持多种杯子尺寸和不同容量
• 耗尽
• 补充

让我们从基础开始。

class CoffeeCup {  constructor(size) {    this.size = size;    this.amount = this.getCapacity();    }   getCapacity() {    switch (this.size) {      case 'small': return 50;      case 'large': return 150;      default:      return 100;     }  }}

构造函数

构造函数用于创建附加到特定类实例的属性。在我们的例子中，咖啡杯需要有一个 ，size而这个尺寸又决定了它的另一个属性：amount。

为此，我们定义了一个constructor(size)将所需大小参数附加到我们的this.size。

关键字this：

在为类创建属性时，我们使用this前缀 来绑定它们。如果不使用this.size，则无法使用 来检索值CoffeeCup.size。

方法/函数

现在让我们添加附加功能sip()和refill()来与我们的咖啡互动。

sip() {  if (this.amount > 0) {    this.amount -= 10;    console.log(`You took a sip. ${this.amount}% coffee left.`);  } else {    console.log("The cup is empty! Time to refill.");  }}refill() {  this.amount = this.getCapacity();  console.log(`The cup is now full again! (${this.size} size)`);}

现在我们可以制作一杯咖啡并与我们之前设置的所有方法进行交互。

const myMediumCoffee = new CoffeeCup('medium');myMediumCoffee.sip();   /* Output: You took a sip. 90% coffee left. */myMediumCoffee.refill();/* Output: The cup is now full again! (medium size) */

---

接下来：理解 DOM

在下一章中，我们将学习 DOM（文档对象模型）以及它如何在浏览器中渲染内容。这对于 JavaScript 的第二部分至关重要！到时候见。