JavaScript基础知识

用户96944491542
157 阅读6分钟

一、JavaScript基础

1.1 JavaScript介绍

JavaScript是一种广泛使用的编程语言，主要用于网页开发。它最初由Netscape于1995年创建，目的是为了增强网页的互动性。以下是一些关于JavaScript的基本信息：

  1. 动态类型：JavaScript是一种动态类型语言，意味着你不需要在声明变量时指定类型。
  2. 事件驱动：JavaScript支持事件驱动编程，可以通过用户的操作（如点击、键入等）触发代码执行。
  3. 浏览器支持：几乎所有现代浏览器都内置了JavaScript引擎，因此你可以在客户端直接运行JavaScript代码。
  4. 功能强大：除了用于前端开发，JavaScript还可以通过Node.js等环境用于后端开发，使其成为全栈开发的选择。
  5. 异步编程：JavaScript支持异步编程，通过回调、Promise和async/await等特性，可以处理耗时操作而不阻塞主线程。
  6. 广泛的生态系统：JavaScript拥有丰富的库和框架（如React、Angular、Vue等），使得开发复杂应用更加高效。
  7. 跨平台：JavaScript不仅可以在浏览器中运行，还可以在服务器、移动设备以及桌面应用中使用。

1.2 JavaScript运行

JavaScript的运行环境主要包括以下几种：

  1. 浏览器：最常见的运行环境。现代浏览器（如Chrome、Firefox、Safari、Edge等）内置了JavaScript引擎，负责解析和执行JavaScript代码。每个浏览器都有其特定的引擎，如Chrome使用V8引擎，Firefox使用SpiderMonkey。
  2. Node.js：一个开源的、跨平台的JavaScript运行时环境，允许开发者在服务器端运行JavaScript。Node.js基于V8引擎，广泛用于构建网络应用程序和服务器。
  3. Deno：一个现代的JavaScript和TypeScript运行时，旨在提供更安全、更简洁的开发体验。Deno内置了一些新特性，如对TypeScript的支持和模块系统。
  4. 移动应用开发框架：一些框架（如React Native、Ionic等）允许开发者使用JavaScript来构建跨平台的移动应用，这些应用可以在iOS和Android设备上运行。
  5. 嵌入式设备：JavaScript也可以在某些嵌入式设备上运行，例如使用Espruino等项目，允许在微控制器上执行JavaScript代码。
  6. 桌面应用框架：如Electron，允许开发者使用JavaScript、HTML和CSS构建跨平台的桌面应用程序。

1.3 JavaScript三种编写方式

JavaScript有三种主要的编写方式，分别是：

  1. 内联脚本（Inline Script）：

    • 直接在HTML文档中使用<script>标签编写JavaScript代码。这种方式适合小段代码或简单的功能。
    <head>
    <title>内联脚本示例</title>
</head>
<body>
    <h1>欢迎使用JavaScript</h1>
    <script>
        alert("Hello, World!");
    </script>
</body>
</html>

  2. 内部脚本（Internal Script）：

    • 在HTML文档的<head>或<body>部分使用<script>标签嵌入JavaScript代码。这种方式适合中等规模的脚本。
    <head>
    <title>内部脚本示例</title>
    <script>
        function greet() {
            alert("欢迎使用内部脚本！");
        }
    </script>
</head>
<body>
    <button onclick="greet()">点击我</button>
</body>
</html>

  3. 外部脚本（External Script）：

    • 将JavaScript代码放在单独的文件中（通常以.js为后缀），然后在HTML文档中通过<script>标签引入。这种方式使得代码更易于管理和重用，适合大型项目。
    <html>
<head>
    <title>外部脚本示例</title>
    <script src="script.js"></script>
</head>
<body>
    <button onclick="greet()">点击我</button>
</body>
</html>

    function greet() {
    alert("欢迎使用外部脚本！");
}

这三种方式各有优缺点，选择哪种方式取决于项目的复杂性和需求。对于较大的项目，通常推荐使用外部脚本以提高代码的可维护性和可重用性

1.4 变量的使用

在JavaScript中，变量用于存储和管理数据。变量的使用可以通过不同的关键字来定义，主要有以下三种：

  1. var：

    • var是最早用于声明变量的关键字。使用var声明的变量具有函数作用域或全局作用域。

    • 示例：

      function greet() {
    var greeting = "Hello, " + name; // 函数内部
    console.log(greeting);
}
greet(); // 输出: Hello, Alice
console.log(greeting); // 报错: greeting is not defined

  2. let：

    • let是在ES6（ECMAScript 2015）引入的，用于声明块作用域的变量。这意味着使用let声明的变量只在它被定义的代码块内有效。

    • 示例：

      if (true) {
    let age = 30; // 块作用域内的新变量
    console.log(age); // 输出: 30
}
console.log(age); // 输出: 25

  3. const：

    • const也是在ES6中引入的，用于声明常量。常量的值在声明后不能被改变。const声明的变量也具有块作用域。

    • 示例：

      console.log(pi); // 输出: 3.14
// pi = 3.14159; // 报错: Assignment to constant variable.

变量的命名规则

  • 变量名可以包含字母、数字、下划线（_）和美元符号（$），但不能以数字开头。
  • 变量名是区分大小写的，例如myVar和myvar是不同的变量。
  • 不要使用保留字（如if、else、function等）作为变量名。

变量的作用域

  • 全局作用域：在函数外部声明的变量，任何地方都可以访问。
  • 函数作用域：使用var在函数内部声明的变量，仅在该函数内可访问。
  • 块作用域：使用let或const在代码块（如if语句、for循环等）内部声明的变量，仅在该块内可访问。

1.5 数据类型

JavaScript中的数据类型主要分为两类：原始数据类型和引用数据类型。

1. 原始数据类型（Primitive Types）

原始数据类型是不可变的，每个值都是独立的。JavaScript的原始数据类型包括：

  • String：表示文本数据，可以使用单引号、双引号或反引号（模板字面量）定义。

    let name = "Alice";
let greeting = 'Hello, ' + name; // 使用字符串拼接

  • Number：表示数字，可以是整数或浮点数。

    let age = 30;
let price = 19.99;

  • Boolean：表示真值和假值，只有两个值：true和false。

    let isStudent = true;

  • Undefined：表示一个变量声明但未赋值时的状态。

    let x;
console.log(x); // 输出: undefined

  • Null：表示“无”或“空”值，是一个显式的原始值。

    let emptyValue = null;

  • Symbol（ES6引入）：表示独一无二的值，通常用于对象属性的唯一标识。

    const uniqueId = Symbol('id');

  • BigInt（ES11引入）：表示大于Number类型的整数，使用n后缀。

    const bigNumber = 1234567890123456789012345678901234567890n;

2. 引用数据类型（Reference Types）

引用数据类型是可变的，存储的是对对象的引用。JavaScript的引用数据类型包括：

  • Object：对象是键值对的集合，可以包含多种数据类型。

    let person = {
    name: "Alice",
    age: 30
};

  • Array：数组是特殊类型的对象，用于存储有序的数据集合。

    let fruits = ["apple", "banana", "cherry"];

  • Function：函数也是对象，可以被调用并执行代码。

    function greet() {
    console.log("Hello!");
}

  • Date：用于处理日期和时间。

    let now = new Date();

  • RegExp：用于处理正则表达式。

    let pattern = /[a-zA-Z]+/;

1.6 typeof操作符

数据类型检测

在JavaScript中，可以使用typeof操作符来检测数据类型：

console.log(typeof name); // "string"
console.log(typeof age); // "number"
console.log(typeof isStudent); // "boolean"
console.log(typeof person); // "object"
console.log(typeof greet); // "function"
console.log(typeof x); // "undefined"

可能还会遇到另一种用法: typeof(x)

它与 typeof x 相同, typeof是一个操作符,不是一个函数, ()只是将里面的内容当做一个整体

欲知后事如何,且听下回分解...

avatar
文章
阅读
粉丝