JavaScript基础

JavaScript基础

本文介绍了JavaScript的基础知识。

YouTube Video

执行Hello World!

JavaScript概述

JavaScript是Web开发中最广泛使用的编程语言之一。它主要用于向网页添加动态元素,使用户界面操作、数据传输和动画创建成为可能。它可以在客户端(浏览器中)运行,也可以使用诸如Node.js等技术在服务器端运行。由于其简单性和灵活性,它易于初学者学习,并被专业开发人员广泛使用。

JavaScript 中的变量

JavaScript 中的变量就像容器,用来存储和重用数据。通过使用变量,您可以在程序中维护和处理值。

变量声明

在 JavaScript 中,有三个关键字可以用来声明变量。

  • var:一种旧的变量声明方法,但处理其作用域比较复杂,需要小心。它基于函数作用域。
1var x = 10;
  • let:在 ES6 中引入的一种声明变量的方法,具有块作用域。它可以重新赋值,但不能在同一作用域内重新声明。
1let y = 20;
  • const:用来声明不可变(常量)的变量。具有块作用域,声明后不可重新赋值或重新声明。
1const z = 30;

作用域

变量具有作用域的概念。

全局作用域

1var globalVar = 'This is global'; // Global scope
2
3function accessGlobal() {
4    console.log(globalVar); // Able to access global variable
5}
6
7accessGlobal(); // Outputs "This is global"
  • 全局作用域变量可以在任何地方访问。通过var声明的变量具有全局或函数作用域,而letconst具有块作用域。

块作用域

1if (true) {
2    let localVar = "This is a block-scoped variable";
3
4    // Accessible inside the brackets
5    console.log(localVar);
6}
7
8// Error: localVar cannot be used outside of this scope
9console.log(localVar);
  • 块作用域:用letconst声明的变量仅在{}(大括号)内有效。

  • {}(花括号)外部访问时会发生错误。

函数作用域

 1function myFunction() {
 2    var functionScoped = 'This is function scope';
 3    // Accessible inside the function
 4    console.log(functionScoped);
 5
 6    if (true) {
 7        var functionVar = 'This is also function scope';
 8    }
 9    // functionVar can be used inside of the fucntion
10    console.log(functionVar);
11}
12
13myFunction(); // Outputs "This is function scope"
14
15// Error: functionScoped is not defined
16console.log(functionScoped);
  • 函数作用域:在函数内部定义的变量和函数无法从函数外部访问。在函数内用var声明的变量属于此作用域。

  • 在此示例中,只要在函数作用域内,变量 functionVar 可以从 {}(大括号)外部访问。另一方面,从函数作用域外访问变量 functionScoped 会导致错误。

因此,用var声明的变量只有函数作用域,而没有块作用域,可能造成在意料之外的范围内被使用的风险。对于不会改变的变量,优先使用const,通常使用let,并尽可能避免使用var。

数据类型

JavaScript变量可以存储各种类型的数据值。有string用来处理文本,number用来处理数值。

主要数据类型如下:。

 1// Number: Numeric type (integer and floating point number)
 2let integerNumber = 42;
 3let floatNumber = 3.14;
 4console.log("Number (Integer):", integerNumber);
 5console.log("Number (Float):", floatNumber);
 6
 7// String: String type
 8let text = "Hello, JavaScript!";
 9console.log("String:", text);
10
11// Boolean: Boolean type (true or false)
12let isJavaScriptFun = true;
13let isError = false;
14console.log("Boolean (true):", isJavaScriptFun);
15console.log("Boolean (false):", isError);
16
17// Null: Explicitly represents "nothing"
18let emptyValue = null;
19console.log("Null:", emptyValue);
20
21// Undefined: The default value assigned to an uninitialized variable
22let notDefined;
23console.log("Undefined:", notDefined);
24
25// Symbol: A data type for creating unique values
26let uniqueKey = Symbol("id");
27console.log("Symbol:", uniqueKey);
  • 原始类型
    • number:处理数值(整数和浮点数)。
    • string:处理字符串。
    • boolean:处理布尔值 truefalse
    • null:明确表示一个“无”值。
    • undefined:自动分配给未初始化变量的值。
    • Symbol:用于创建唯一值的数据类型。
 1// Object: A data structure that holds multiple properties
 2let person = {
 3    name: "Alice",
 4    age: 25,
 5    isStudent: false
 6};
 7console.log("Object:", person);
 8console.log("Object Property (name):", person.name);
 9console.log("Object Property (age):", person.age);
10
11// Array: A list that holds multiple values
12let numbers = [10, 20, 30, 40];
13console.log("Array:", numbers);
14console.log("Array Element (index 0):", numbers[0]);
15
16// Function: A function object
17function greet(name) {
18  return "Hello, " + name + "!";
19}
20console.log("Function Output:", greet("Bob"));
21
22// Another way to define a function using arrow syntax
23let add = (a, b) => a + b;
24console.log("Arrow Function Output (3 + 5):", add(3, 5));
  • 对象类型
    • Object:一种具有多个属性的数据结构。
    • 数组:包含多个值的列表。
    • 函数:一个函数对象。

变量的赋值与重新赋值

letvar 声明的变量可以重新赋值,但用 const 声明的变量一旦声明后无法重新赋值。

1let score = 100;
2score = 150; // Correct
3
4const pi = 3.14;
5pi = 3.14159; // Error

变量提升

在 JavaScript 中,有一种现象叫做变量声明的“提升”,即变量声明会被提升到其作用域的顶部。用 var 声明的变量会被提升,但在声明之前使用 letconst 会导致错误。

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • 在这种情况下,用var声明的变量会被提升,并输出它们的值。
1console.log(b); // ReferenceError
2let b = 20;
  • let声明的变量不会被提升,因此会导致错误。

变量的正确使用

在正确使用变量时请考虑以下几点。

  • 优先使用 const,避免使用 var
  • 遵循变量命名规范。
    • 使用 camelCase 命名法,例如 userNametotalPrice
    • 避免使用像 datavalue 这样含糊不清的名称,使用有意义的名称以提高可读性。
    • 变量名称不能以数字开头,因此名称如 1variable 是不允许的。
  • 过度使用全局变量会引起作用域混淆并导致错误,因此尽可能避免使用它们。

总结

  • var:一种较旧的变量声明方式,具有函数作用域。
  • let:一种具有块级作用域的变量,可以重新赋值。
  • const:一种具有块级作用域的变量,无法重新赋值(常量)。
  • 根据变量的数据类型使用变量并注意其作用域是很重要的。

什么是 JavaScript 中的转义字符?

转义字符是一种在普通字符串中表示具有特殊含义字符的方法。在 JavaScript 中,转义字符使用反斜杠 \ 引入,为字符串赋予特殊效果或包括控制字符。转义字符对于在字符串中包含换行符、制表符或引号等元素非常有用。

使用转义字符的示例

以下是一些使用转义字符的示例代码。

转义双引号和单引号

使用转义字符来表示字符串中的双引号或单引号。

1const singleQuote = 'It\'s a beautiful day!';
2console.log(singleQuote); // Output: It's a beautiful day!
3
4const doubleQuote = "He said, \"Hello there!\"";
5console.log(doubleQuote); // Output: He said, "Hello there!"

转义反斜杠

要在字符串中包含反斜杠本身,请使用 \ 转义它。

1const path = "C:\\Program Files\\MyApp";
2console.log(path); // Output: C:\Program Files\MyApp

转义换行符和制表符

您可以插入换行符和制表符,使长字符串更具可读性。

1const multiline = "First line\nSecond line\nThird line";
2console.log(multiline);
3// Output:
4// First line
5// Second line
6// Third line
7
8const tabbed = "Column1\tColumn2\tColumn3";
9console.log(tabbed); // Output: Column1  Column2  Column3

转义 Unicode 字符

使用 Unicode 转义序列允许您用十六进制代码表示特定字符。

1const smiley = "\u263A";  // Copyright Mark
2console.log(smiley);

注意

过度使用转义可能会影响可读性

过度使用转义字符可能会降低代码的可读性。在长字符串中明智地使用转义字符尤为重要。

可以考虑使用模板字面量

在 JavaScript 中,使用反引号的模板字面量允许您在不使用转义字符的情况下包含换行符或嵌入表达式。

1const message = `This is a message
2that spans multiple lines`;
3console.log(message);
4// Output:
5// This is a message
6// that spans multiple lines

总结

转义字符对于在字符串中表示特殊字符或控制字符是必不可少的。通过转义单引号或双引号以及添加换行符或制表符,您可以创建更灵活的字符串。然而,过度使用转义字符可能使代码变得难以阅读,因此在适当情况下可以考虑使用模板字面量。

JavaScript版本

JavaScript有一个名为ECMAScript(ES)的标准规范。JavaScript基于此标准不断发展。以下是其主要版本的简要说明。

  • ES3 (1999)

    第一个被广泛采用的版本。基本语法和特性已建立。

  • ES5 (2009)

    引入了严格模式,并添加了如Array.prototype.forEachObject.keys等新功能。

  • ES6 / ES2015 (2015)

    JavaScript 进行了重要更新。许多现代 JavaScript 的基础功能,如 letconst箭头函数Promise模块 等被引入。

  • ES7 / ES2016 (2016)

    新增了 Array.prototype.includes指数操作符 (**)

  • ES8 / ES2017 (2017)

    引入了 async/await,简化了异步处理的编写。

  • ES9 / ES2018 (2018)

    新增了异步迭代器和 Rest/Spread 属性

  • ES10 / ES2019 (2019)

    新增了 flatMapObject.fromEntries

  • ES11 / ES2020 (2020)

    新增了 可选链 (?.)空值合并操作符 (??),让代码可以更简单、更安全地编写。

  • ES12 / ES2021 (2021)

    添加了 String.prototype.replaceAllPromise.any 等功能。

  • ES13 / ES2022 (2022)

    添加了 Array.prototype.at 和类的 private 字段(#field)等功能。

  • ES14 / ES2023 (2023)

    添加了 Array.prototype.toSortedSymbol.prototype.description 等功能。

  • ES15 / ES2024 (2024)

    添加了 Promise.withResolvers 用以简化 Promise 管理,以及可调整大小的 ArrayBuffer 等功能。

如今的 JavaScript 每年都会更新,即使是最新版本也会新增功能。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video