JavaScript基础
|
185
|
0
|
前端

2264 字
|
23 分钟





JS

javascript(轻量级、解释型语言)

运行环境

1.1浏览器端

可以在html文件中通过script标签嵌入 JavaScript 代码，浏览器会自动执行这些代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 示例</title>
</head>
<body>
    <h1>欢迎来到 JavaScript 的世界!</h1>
    <script>
        alert("Hello, World!"); // 弹出提示框
    </script>
</body>
</html>

1.2服务器端(Node.js)

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript。借助 Node.js，JavaScript 可以用来处理 HTTP 请求、文件系统操作、数据库交互等任务，甚至可以构建完整的服务器应用程序。

基础语法

变量声明

在 JavaScript 中，变量是用来存储数据的容器。可以使用三种关键字来声明变量：var、let 和 const

  • var: 在 ES5 及之前的版本中使用，声明的变量可以在整个函数范围内访问，存在变量提升的现象。
  • let: ES6 引入的变量声明方式，具有块级作用域，不会发生变量提升。
  • const: 用于声明常量，声明后无法重新赋值，同样具有块级作用域
var name = "Alice";  // 使用 var 声明变量
let age = 25;        // 使用 let 声明变量
const birthYear = 1998;  // 使用 const 声明常量

数据类型

  • 字符串 (String): 用于表示文本数据。
  • 数字 (Number): 用于表示整数和浮动小数。
  • 布尔值 (Boolean): 用于表示 true 或 false。
  • undefined: 变量声明但未赋值时的默认值。
  • null: 表示“无”或“空”值。
  • 对象 (Object): 用于存储多个值的容器。
  • 数组 (Array): 特殊类型的对象，用于存储有序的数据。
let message = "Hello, World!";  // 字符串
let num = 42;                   // 数字
let isActive = true;            // 布尔值
let person = { name: "Alice", age: 25 };  // 对象
let numbers = [1, 2, 3, 4];    // 数组

运算符

算数运算符

常见的算术运算符包括 +、-、*、/、%（取余）、++（自增）、–（自减）

let a = 5;
let b = 2;
console.log(a + b);  // 输出 7
console.log(a - b);  // 输出 3
console.log(a * b);  // 输出 10
console.log(a / b);  // 输出 2.5
console.log(a % b);  // 输出 1
比较运算符

比较运算符用于比较两个值。常见的比较运算符包括==，=== ，!=，!==，>，<，>=，<=

  • ==（相等）: 比较两个值是否相等，忽略数据类型
  • ===（严格相等）: 比较两个值是否相等，且数据类型也必须相同
console.log(5 == '5');  // 输出 true (忽略数据类型)
console.log(5 === '5'); // 输出 false (数据类型不同)
console.log(10 > 5);    // 输出 true
逻辑运算符
let x = true;
let y = false;
console.log(x && y);  // 输出 false (与运算)
console.log(x || y);  // 输出 true (或运算)
console.log(!x);      // 输出 false (非运算)

控制流

条件语句
let age = 18;
if (age >= 18) {
    console.log("成年人");
} else {
    console.log("未成年人");
}
循环语句
for (let i = 0; i < 5; i++) {
    console.log(i);  // 输出 0, 1, 2, 3, 4
}
 
let j = 0;
while (j < 5) {
    console.log(j);  // 输出 0, 1, 2, 3, 4
    j++;
}

函数

函数声明
function greet(name) {
    console.log("Hello, " + name + "!");
}
 
greet("Alice");  // 输出 "Hello, Alice!"
返回值

如果没有显式的返回值，函数默认返回 undefined。

function add(a, b) {
    return a + b;
}
 
let result = add(5, 3);  // result 的值为 8
console.log(result);
匿名函数
let sum = function(a, b) {
    return a + b;
};
 
console.log(sum(2, 3));  // 输出 5
箭头函数

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

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

对象

创建对象
let person = {
    name: "Alice",
    age: 25,
    greet: function() {
        console.log("Hello, " + this.name);
    }
};
 
console.log(person.name);  // 输出 "Alice"
person.greet();            // 输出 "Hello, Alice"
访问和修改对象的属性
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
对象方法
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

数组

创建数组
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]);  // 输出 "Apple"
console.log(fruits[1]);  // 输出 "Banana"
数组方法
  • 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]
遍历数组
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);
});

作用域

全局作用域
let globalVar = "I am a global variable";
 
function showVar() {
    console.log(globalVar);  // 可以访问全局变量
}
 
showVar();  // 输出 "I am a global variable"
局部作用域
function localScope() {
    let localVar = "I am a local variable";
    console.log(localVar);  // 可以访问局部变量
}
 
localScope();
// console.log(localVar);  // 错误：localVar 在外部无法访问
块级作用域

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 块内可见

事件处理

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

事件监听

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

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

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

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

异步编程

JavaScript 是单线程的，这意味着它一次只能执行一个任务。为了在执行某些长时间运行的操作（如文件读取、网络请求等）时不阻塞主线程，JavaScript 提供了异步编程的机制

回调函数

回调函数是 JavaScript 异步编程中最常见的一种方法。它是一个作为参数传递给另一个函数的函数，当某个任务完成时会被调用

function fetchData(callback) {
    setTimeout(() => {
        console.log("数据获取完毕");
        callback();  // 调用回调函数
    }, 2000);
}
 
fetchData(() => {
    console.log("回调函数被执行");
});

在上面的代码中，fetchData 函数模拟了一个异步操作，使用 setTimeout 模拟了 2 秒钟的延迟。数据获取完毕后，回调函数被执行

问题：回调地狱

当异步操作之间存在依赖关系时，回调函数可能会嵌套在一起，形成所谓的 回调地狱（Callback Hell）。这会使得代码难以阅读和维护

fetchData(() => { fetchData(() => { fetchData(() => { console.log("数据获取完毕"); }); }); });

Promise

为了避免回调地狱，ES6 引入了 Promise，它提供了更清晰的异步编程方式。Promise 是一个代表异步操作最终完成（或失败）及其结果值的对象

创建Promise

一个 Promise 对象有三种状态：pending（等待中）、fulfilled（已完成）和 rejected（已拒绝）。你可以通过 new Promise() 创建一个 Promise 对象，并通过 resolve 和 reject 方法来改变其状态。

fetchData(() => {
    fetchData(() => {
        fetchData(() => {
            console.log("数据获取完毕");
        });
    });
});
  • then() 方法用于指定操作成功时的回调函数
  • catch() 方法用于指定操作失败时的回调函数
Promise链式调用

Promise 支持链式调用，使得多个异步操作可以按顺序进行处理

let myPromise = new Promise((resolve, reject) => {
    let success = true;
    if (success) {
        resolve("操作成功");
    } else {
        reject("操作失败");
    }
});
 
myPromise.then((message) => {
    console.log(message);  // 输出 "操作成功"
}).catch((message) => {
    console.log(message);  // 输出 "操作失败"
});

每个 then() 方法返回一个新的 Promise 对象，这使得你可以链接多个 then() 调用，依次处理异步任务

Promise.all

Promise.all 方法可以将多个 Promise 对象合并成一个 Promise 对象，它会在所有的 Promise 对象都完成时返回结果。如果其中任何一个 Promise 失败，Promise.all 会立刻失败并返回错误

let promise1 = new Promise((resolve) => resolve("任务1完成"));
let promise2 = new Promise((resolve) => resolve("任务2完成"));
let promise3 = new Promise((resolve) => resolve("任务3完成"));
 
Promise.all([promise1, promise2, promise3]).then((results) => {
    console.log(results);  // 输出 ["任务1完成", "任务2完成", "任务3完成"]
});

async/await

为了进一步简化异步编程，ES7 引入了 async 和 await。async 和 await 基于 Promise，但它们使得异步代码看起来更像是同步代码，从而提高了可读性

async函数

async 关键字用于声明一个异步函数。异步函数总是返回一个 Promise 对象，并且可以使用 await 来等待其他异步操作的结果

async function fetchData() {
    return "数据获取成功";
}
 
fetchData().then((message) => {
    console.log(message);  // 输出 "数据获取成功"
});
await表达式

await 关键字用于等待一个 Promise 对象解决，并返回其结果。await 只能在 async 函数内部使用

async function getData() {
    let result = await fetchData();
    console.log(result);  // 输出 "数据获取成功"
}
 
getData();

await 会暂停代码的执行，直到 Promise 被解决，然后返回结果。它让异步代码变得更加直观

错误处理
async function getData() {
    try {
        let result = await fetchData();
        console.log(result);
    } catch (error) {
        console.log("发生错误: " + error);
    }
}

模块化

随着应用的增大，代码组织变得非常重要。为了使代码更模块化，JavaScript 提供了模块化的支持。在 ES6 中，JavaScript 引入了原生的模块化系统，可以使用 import 和 export 语句来组织代码

导出模块

你可以使用 export 来导出模块中的变量、函数或类，以便在其他文件中使用

// file1.js
export const greet = (name) => {
    console.log("Hello, " + name);
};
导入模块

在另一个文件中，你可以使用 import 语句来引入其他文件导出的模块

// file2.js
import { greet } from './file1.js';
 
greet("Alice");  // 输出 "Hello, Alice"
默认导出

你还可以导出一个默认模块，使用 default 关键字：

// file1.js
export default function add(a, b) {
    return a + b;
}

然后使用默认导入：

// file2.js
import add from './file1.js';
 
console.log(add(5, 3));  // 输出 8

ES6新特性总结

  • 解构赋值：可以方便地提取数组和对象中的值
  • 模板字符串：提供更便捷的字符串拼接方式
  • 类：类语法使得对象的构造和继承更加直观
  • Set 和 Map：提供新的数据结构，分别用于存储唯一值和键值对
// 解构赋值
let [a, b] = [1, 2];
console.log(a);  // 输出 1
 
// 模板字符串
let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting);  // 输出 "Hello, Alice!"
 
// 类
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}
 
let person = new Person("Alice", 25);
console.log(person.name);  // 输出 "Alice"


上一篇
下一篇

推荐文章

Html基础