84_JS_基础语法和数据类型_控制流_函数_数组和对象_DOM操作_BOM操作_异步编程_ES6+新特性_错误处理_模块化

1. 变量声明和赋值

变量声明

• 使用 var, let, const 关键字来声明变量。

• • var：函数作用域，允许重复声明。
  • let：块作用域，不能重复声明。
  • const：块作用域，声明常量，必须初始化且不能重新赋值。

示例：

javascript复制代码

var x = 10;

let y = 20;

const z = 30;

2. 数据类型

JavaScript 的基本数据类型包括：

• 字符串（String）：文本数据，使用单引号或双引号包裹。

javascript复制代码

let name = "Alice";

• 数字（Number）：包括整数和浮点数。

javascript复制代码

let age = 25;

• 布尔值（Boolean）：true 或 false。

javascript复制代码

let isStudent = true;

• 对象（Object）：键值对的集合。

javascript复制代码

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

• 数组（Array）：有序的集合，可以包含任意类型的值。

javascript复制代码

let numbers = [1, 2, 3, 4];

3. 运算符和表达式

运算符：

• 算术运算符：+, -, *, /, %
• 赋值运算符：=, +=, -=
• 比较运算符：==, ===, !=, !==, <, >, <=, >=
• 逻辑运算符：&&, ||, !

示例：

javascript复制代码

let a = 5;

let b = 10;

let sum = a + b; // 15

4. 控制流

条件语句

• if 语句：

javascript复制代码

if (age > 18) {

    console.log("Adult");

} else {

    console.log("Minor");

}

• switch 语句：

javascript复制代码

switch (fruit) {

    case 'apple':

        console.log("Apple");

        break;

    case 'banana':

        console.log("Banana");

        break;

    default:

        console.log("Unknown fruit");

}

循环语句

• for 循环：

javascript复制代码

for (let i = 0; i < 5; i++) {

    console.log(i);

}

• while 循环：

javascript复制代码

let i = 0;

while (i < 5) {

    console.log(i);

    i++;

}

• do-while 循环：

javascript复制代码

let j = 0;

do {

    console.log(j);

    j++;

} while (j < 5);

5. 函数

函数声明与调用

javascript复制代码

function greet(name) {

    return `Hello, ${name}!`;

}

console.log(greet("Alice")); // Hello, Alice!

参数与返回值

函数可以接收多个参数，返回一个值：

javascript复制代码

function add(x, y) {

    return x + y;

}

console.log(add(5, 10)); // 15

匿名函数与箭头函数

• 匿名函数：

javascript复制代码

const sayHi = function() {

    console.log("Hi!");

};

sayHi();

• 箭头函数：

javascript复制代码

const square = (x) => x * x;

console.log(square(4)); // 16

6. 数组和对象

数组的创建、访问和修改

javascript复制代码

let fruits = ['apple', 'banana', 'orange'];

console.log(fruits[1]); // banana

fruits.push('grape'); // 添加元素

对象的创建和属性访问

javascript复制代码

let car = { brand: 'Toyota', model: 'Corolla' };

console.log(car.brand); // Toyota

数组和对象的常见方法

• 数组遍历：

javascript复制代码

fruits.forEach(fruit => console.log(fruit));

• 过滤和映射：

javascript复制代码

let evenNumbers = [1, 2, 3, 4].filter(num => num % 2 === 0); // [2, 4]

let squares = [1, 2, 3].map(num => num * num); // [1, 4, 9]

7. DOM操作

元素获取和操作

javascript复制代码

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

element.innerHTML = 'Hello, World!';

事件监听与处理

javascript复制代码

element.addEventListener('click', () => {

    alert('Element clicked!');

});

DOM结构的增删改查

javascript复制代码

const newElement = document.createElement('div');

document.body.appendChild(newElement); // 添加元素

document.body.removeChild(newElement); // 删除元素

8. BOM操作

Window 对象

• alert(): 弹出一个警告框。

javascript复制代码

window.alert('Hello, world!');

• setTimeout(): 延迟执行某个函数。

javascript复制代码

setTimeout(() => {

    console.log('Executed after 2 seconds');

}, 2000);

Navigator 对象

用于获取浏览器的信息：

javascript复制代码

console.log(navigator.userAgent);

Web Storage

• localStorage：持久性存储，数据不随浏览器关闭而消失。

javascript复制代码

localStorage.setItem('key', 'value');

console.log(localStorage.getItem('key'));

• sessionStorage：临时存储，数据在会话结束时消失。

javascript复制代码

sessionStorage.setItem('key', 'value');

9. 异步编程

异步编程的好处主要包括：

1. 提升性能: 通过非阻塞操作，异步编程允许程序在等待某些任务（如网络请求）完成时继续执行其他代码，提高整体响应速度。
2. 改善用户体验: 用户界面不会因为等待长时间操作而冻结，提供更流畅的交互。
3. 资源优化: 允许更有效地使用系统资源，如 CPU 和内存，使得多个任务可以并行处理。
4. 简化复杂操作: 通过 Promise、async/await 等方式，异步代码更易读和维护，避免回调地狱。

回调函数

javascript复制代码

function fetchData(callback) {

    setTimeout(() => {

        callback("Data received");

    }, 1000);

}

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

Promise对象

javascript复制代码

let promise = new Promise((resolve, reject) => {

    setTimeout(() => resolve("Data received"), 1000);

});

promise.then(data => console.log(data));

async/await语法

javascript复制代码

async function fetchData() {

    let data = await promise;

    console.log(data);

}

fetchData();

10. ES6+新特性

let和const

let 和 const 用于替代 var，提供更好的作用域控制。

模板字符串

javascript复制代码

let name = "Alice";

let greeting = `Hello, ${name}!`; // 模板字符串

箭头函数

简化函数的语法，并自动绑定 this：

javascript复制代码

const add = (x, y) => x + y;

解构赋值

从数组或对象中提取值：

javascript复制代码

let arr = [1, 2, 3];

let [a, b] = arr; // a=1, b=2

let obj = { x: 1, y: 2 };

let { x, y } = obj; // x=1, y=2

类与继承

使用 class 关键字定义类和继承：

javascript复制代码

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.`);

    }

}

11. 错误处理

try-catch语句

捕获和处理错误：

javascript复制代码

try {

    throw new Error("Something went wrong");

} catch (e) {

    console.error(e.message);

}

抛出异常

javascript复制代码

function checkAge(age) {

    if (age < 18) {

        throw new Error("Not an adult");

    }

}

12. 模块化

导入和导出模块

使用 export 和 import 语法来进行模块化：

javascript复制代码

// module.js

export const myVar = 42;

// main.js

import { myVar } from './module.js';

console.log(myVar);