当前位置：首页 > news >正文

javascript知识点

news 来源：原创 2025/5/16 23:10:40

基础语法

变量声明

var：在 ES6 之前用于声明变量，具有函数作用域。例如：

function example() {
    var x = 10;
    if (true) {
        var x = 20; // 这里的 x 会覆盖外部的 x
    }
    console.log(x); // 输出 20
}
example();

let：ES6 引入，具有块级作用域。例如：

function example() {
    let x = 10;
    if (true) {
        let x = 20; // 这里的 x 只在 if 块内有效
    }
    console.log(x); // 输出 10
}
example();

const：同样是 ES6 引入，用于声明常量，一旦赋值就不能再重新赋值，也具有块级作用域。例如：

const PI = 3.14;
// PI = 3.1415; // 这会报错

数据类型

基本数据类型：包括 Number、String、Boolean、Null、Undefined、Symbol（ES6 新增）。例如：

let num = 10;
let str = "Hello";
let bool = true;
let n = null;
let und;
let sym = Symbol('unique');

引用数据类型：主要是 Object，数组（Array）、函数（Function）等都属于对象的特殊形式。例如：

let obj = { name: "John", age: 30 };
let arr = [1, 2, 3];
function func() {
    console.log('Hello');
}

函数

函数声明：

function add(a, b) {
    return a + b;
}

函数表达式：

const multiply = function(a, b) {
    return a * b;
};

箭头函数：ES6 引入的简洁语法，没有自己的 this、arguments 等。例如：

const divide = (a, b) => a / b;

控制流

条件语句

if…else：

let num = 10;
if (num > 5) {
    console.log('Greater than 5');
} else {
    console.log('Less than or equal to 5');
}

switch：

let day = 3;
switch (day) {
    case 1:
        console.log('Monday');
        break;
    case 2:
        console.log('Tuesday');
        break;
    default:
        console.log('Other day');
}

循环语句

for 循环：

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

while 循环：

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

do…while 循环：

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

面向对象编程

构造函数

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
        console.log(`Hello, my name is ${this.name}`);
    };
}

let person = new Person('John', 30);
person.sayHello();

原型链

JavaScript 通过原型链实现继承。每个对象都有一个原型对象，通过 __proto__ 访问。例如：

Person.prototype.greet = function() {
    console.log(`Hi, I'm ${this.name}`);
};
person.greet();

类（ES6）

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks.`);
    }
}

let dog = new Dog('Buddy');
dog.speak();

异步编程

回调函数

function fetchData(callback) {
    setTimeout(() => {
        let data = 'Some data';
        callback(data);
    }, 1000);
}

fetchData((data) => {
    console.log(data);
});

Promise

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            let data = 'Some data';
            resolve(data);
            // reject(new Error('Something went wrong'));
        }, 1000);
    });
}

fetchData()
  .then((data) => {
        console.log(data);
    })
  .catch((error) => {
        console.error(error);
    });

async/await

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

getData();

DOM 操作

选择元素

// 通过 ID 选择元素
let elementById = document.getElementById('myId');
// 通过类名选择元素
let elementsByClass = document.getElementsByClassName('myClass');
// 通过标签名选择元素
let elementsByTag = document.getElementsByTagName('p');
// 使用 querySelector
let firstParagraph = document.querySelector('p');

修改元素内容

let element = document.getElementById('myElement');
element.innerHTML = 'New content';

事件处理

let button = document.getElementById('myButton');
button.addEventListener('click', function() {
    console.log('Button clicked');
});

总结

JavaScript 是一种功能强大的编程语言，广泛应用于前端开发、后端开发（Node.js）等领域。它具有动态类型、灵活的语法和丰富的特性，如异步编程、面向对象编程等。掌握 JavaScript 的基础语法、控制流、函数、面向对象编程、异步编程和 DOM 操作等知识点，对于开发高质量的 Web 应用程序至关重要。同时，随着 ES6 及后续版本的不断发展，JavaScript 不断引入新的特性和语法糖，使得代码更加简洁和易于维护。