javascript的知识点整理

目录

1.变量和数据类型  

2.条件语句

3.循环 

4.函数 

函数表达式

函数作用域

循环和函数作用域的结合

5.数组

6.对象 

7.DOM 操作 

8.异步编程 

9.事件处理 

10.面向对象编程

11.构造函数

定义构造函数：

创建对象：

构造函数中的this

原型（Prototype）：

构造函数与类：

---

1.变量和数据类型  

JavaScript 中的变量用于存储数据。可以使用 var、let 或 const 来声明变量，它们具有不同的作用域和特性。var 具有函数作用域，而 let 和 const 具有块级作用域。
数据类型包括：
        字符串（String）：用于存储文本。
        数字（Number）：用于存储数值。
        布尔值（Boolean）：表示真或假。
        数组（Array）：用于存储多个值。
        对象（Object）：用于存储键值对。
        null 和 undefined：表示没有值。
        Symbol 和 BigInt（较新的数据类型，不常用）

var name = "John"; // 字符串
let age = 30;      // 数字
const isStudent = true; // 布尔值

2.条件语句

条件语句允许您根据不同的条件执行不同的代码块。使用 if 来检查条件，并可以与 else 和 else if 结合使用来处理多个条件。

if (score >=90) {
    console.log("优秀");
} else if (score >= 60 && score < 90) {
    console.log("良好");
} else {
    console.log("继续努力");
}

3.循环 

循环是编程中常用的结构，允许您多次执行相同的代码块，直到满足某个条件。JavaScript中有几种类型的循环，其中最常见的是for和while。

for 循环：for 循环适用于已知循环次数的情况。它包括初始化表达式、条件表达式和更新表达式。循环体内的代码在每次迭代中执行。

for (let i = 0; i < 5; i++) {
    console.log(i);
}

while 循环：while 循环用于未知迭代次数的情况，只要条件为真，循环会一直执行。

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

4.函数 

函数是JavaScript中的重要概念，允许您封装可重复使用的代码块。函数包括函数名、参数和函数体。函数声明：通过使用function关键字来声明函数。

function greet(name) {
    return "Hello, " + name + "!";
}

函数表达式

函数也可以作为表达式定义，通常将其分配给变量。

const greet = function(name) {
    return "Hello, " + name + "!";
};

函数作用域

JavaScript中的作用域规定了变量的可见性和访问性。函数作用域意味着变量在函数内部定义的情况下只在该函数内部可见。

function exampleScope() {
    let x = 10; // 仅在 exampleScope 函数内可见
    console.log(x); // 可以访问 x
}
console.log(x); // 错误，x 不在作用域内

循环和函数作用域的结合

在JavaScript中，循环变量的作用域可以导致一些常见问题，因为它们的行为与其他语言不同。

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

在这个示例中，setTimeout 函数的回调中访问的 i 变量在循环结束后仍然存在，因此它将输出5次5。这是因为var关键字具有函数作用域，而不是块级作用域，因此i 在整个函数内部都是可见的。

为了避免此类问题，可以使用let或立即调用的函数表达式(IIFE)解决作用域问题：

for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

或者使用IIFE：

for (var i = 0; i < 5; i++) {
    (function(j) {
        setTimeout(function() {
            console.log(j);
        }, 1000);
    })(i);
}

这将确保每个回调函数中的 i 具有正确的值，因为它们在不同的作用域中。

5.数组

数组是JavaScript中的一种数据结构，用于存储一组值。数组的元素可以包括各种数据类型，包括字符串、数字、对象等。

创建数组：可以使用方括号 [] 或 Array 构造函数创建数组。

const number = ["1", "2", "3"];

访问元素：数组中的元素通过索引（从0开始）访问。

console.log(number[0]); // 输出 "1"

数组方法：JavaScript提供了丰富的数组方法，用于添加、删除、修改和操作数组中的元素。

number.push("date"); // 向数组末尾添加元素
number.pop(); // 从数组末尾删除元素
number.splice(1, 1, "10"); // 从索引1开始删除1个元素，并插入"10"

6.对象 

对象是JavaScript中的复合数据类型，用于存储键值对。对象用于表示复杂的数据结构，通常用于创建数据模型和组织数据。

创建对象：对象由一组键值对组成，其中键是字符串，值可以是任何数据类型。

const person = {
    firstName: "jiang",
    lastName: "yifan",
    age: 18,
    sayHello: function() {
        console.log("Hello, " + this.firstName);
    }
};

访问属性：对象属性可以使用点符号或方括号访问

console.log(person.firstName); // 使用点符号访问属性
console.log(person["lastName"]); // 使用方括号访问属性

7.DOM 操作 

DOM是一个表示网页结构的树形结构，允许JavaScript与网页交互。您可以使用JavaScript选择、修改和操作网页中的元素。

选择元素：您可以使用诸如getElementById、querySelector等方法选择DOM元素。

const element = document.getElementById("myElement");

修改元素：可以修改元素的属性、内容或样式。

element.innerHTML = "新内容"; // 修改元素内容
element.style.color = "red"; // 修改元素样式

添加和删除元素：使用createElement创建新元素，然后使用appendChild添加到文档中，或使用removeChild删除元素。

const newElement = document.createElement("div");
document.body.appendChild(newElement); // 添加元素
document.body.removeChild(newElement); // 删除元素

8.异步编程 

JavaScript是单线程语言，但它支持异步编程，允许处理长时间运行的操作而不会阻塞主线程。

回调函数：回调函数是在异步操作完成后执行的函数。它们常用于处理事件、请求和定时器。

setTimeout(function() {
    console.log("异步操作完成");
}, 1000);

Promise：Promise是一种更现代的异步处理方式，用于处理异步操作的成功和失败状态。

function fetchData() {
    return new Promise((resolve, reject) => {
        // 异步操作
        if (/* 操作成功 */) {
            resolve(data);
        } else {
            reject(error);
        }
    });
}

async/await：async/await是用于编写异步代码的更清晰方式，它基于Promise。

async function fetchAndDisplayData() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

9.事件处理 

事件处理允许您捕获和响应用户交互事件，例如点击、鼠标移动、键盘输入等。您可以使用事件监听器来绑定事件和事件处理函数。

添加事件监听器：使用addEventListener方法来绑定事件和事件处理函数。

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

10.面向对象编程

主要概念：
类：类是一种定义对象的模板或蓝图，它包含对象的属性和方法的定义。在JavaScript中，类通常由构造函数表示。

对象：对象是类的实例，它具有类定义的属性和方法。

属性：属性是对象的特征或状态。在JavaScript中，属性是对象的键值对。

方法：方法是对象的行为或功能，通常表示为函数。

封装：封装是将数据和方法组合在对象中的概念，隐藏了内部的实现细节，只公开必要的接口。

继承：继承是一种机制，一个类可以从另一个类继承属性和方法。这有助于代码的重用和扩展。

多态：多态性允许不同对象对相同方法做出不同的响应。这通过方法的重写和方法的重载来实现。

11.构造函数

在JavaScript中，构造函数是一种特殊的函数，它用于创建和初始化对象。构造函数通常用于定义类，并且可以多次调用以创建多个对象。构造函数通过使用new关键字调用来创建对象。

定义构造函数：

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.sayHello = function() {
        console.log("Hello, " + this.firstName + " " + this.lastName);
    };
}

创建对象：

使用构造函数创建对象时，需要使用new关键字

const person1 = new Person("J", "yf");
const person2 = new Person("A", "bc");

构造函数中的this

构造函数中的this关键字引用正在创建的对象。通过this，您可以将属性和方法附加到对象。

原型（Prototype）：

构造函数的原型（prototype）是一个共享对象，可以包含对象的共享方法。这有助于节省内存，因为所有对象实例共享相同的方法

Person.prototype.getFullName = function() {
    return this.firstName + " " + this.lastName;
};

构造函数与类：

ES6引入了类的概念，使面向对象编程更易于理解和使用。类是构造函数的语法糖，提供了更清晰、一致的语法。然而，在底层，它们仍然使用构造函数和原型链来实现。

class Person {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    sayHello() {
        console.log("Hello, " + this.firstName + " " + this.lastName);
    }
}