javascript的基础语法

JavaScript 是一种广泛用于网页和网络应用的编程语言，支持事件驱动、函数式以及基于原型的编程风格。

1. 变量声明

在 ES6（ECMAScript 2015）之前，主要使用 var 来声明变量。ES6 引入了 let 和 const。

var: 函数作用域或全局作用域。
let: 块级作用域。
const: 声明常量，块级作用域且一旦赋值不可更改（对于对象和数组，可以修改其内容，但不能重新赋值）。

javascript
var globalVar = "I'm global";
let blockScoped = "Block scoped";
const constantValue = "Constant value"; // 不可重新赋值

2. 数据类型

JavaScript 支持多种数据类型：

基本类型：number, string, boolean, null, undefined, symbol (ES6 新增)。
复杂类型：object（包括数组、日期等）。

javascript
let age = 25; // number
let name = "Alice"; // string
let isStudent = true; // boolean
let nothing = null; // null
let und = undefined; // undefined
let sym = Symbol("foo"); // symbol

3. 运算符

包括算术运算符（如 +, -, *, /, %）、比较运算符（如 ==, ===, !=, !==, >, <）、逻辑运算符（如 &&, ||, !）等。

javascript
let result = 5 + 3; // 8
console.log(result === 8); // true, 使用严格等于避免类型转换问题

4. 控制结构

条件语句

javascript
if (condition) {
    // code to execute if condition is true
} else if (anotherCondition) {
    // alternative condition
} else {
    // default case
}

循环

for 循环

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

while 循环

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

5. 函数定义与调用

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

console.log(greet("World")); // 输出: Hello, World

ES6 引入了箭头函数：

javascript
const greet = (name) => "Hello, " + name;

6. 对象与数组

对象

javascript
let person = {
    firstName: "John",
    lastName: "Doe",
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
};
console.log(person.fullName()); // John Doe

数组

javascript
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[1]); // Banana
fruits.push("Date");
console.log(fruits); // ["Apple", "Banana", "Cherry", "Date"]

7. 错误处理

使用 try...catch 结构来处理异常。

javascript
try {
    // 可能抛出错误的代码
    notDefinedFunction();
} catch (e) {
    console.error("Caught an error: ", e.message);
}

8. 事件处理

JavaScript 在网页开发中广泛用于响应用户操作（如点击、输入等）。这通过事件处理机制实现。

示例：添加一个点击事件监听器

javascript
document.getElementById('myButton').addEventListener('click', function() {
    alert('Button clicked!');
});

这段代码会在用户点击 ID 为 myButton 的按钮时弹出一个警告框。

9. 异步编程

JavaScript 是单线程语言，但支持异步操作，主要通过回调函数、Promise 和 async/await 实现。

回调函数

javascript
setTimeout(function() {
    console.log("This runs after 2 seconds");
}, 2000);

Promise

javascript
let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("Done!"), 1000);
});

promise.then(result => console.log(result)); // 输出: Done!

Async/Await

javascript
async function asyncFunction() {
    let result = await new Promise((resolve) => 
        setTimeout(() => resolve("Finished"), 2000)
    );
    console.log(result); // 输出: Finished
}

asyncFunction();

10. 模块化

ES6 引入了原生的模块支持，允许你将代码分割成多个文件，并在需要的地方导入使用。

导出模块

javascript
// math.js
export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }

导入模块

javascript
// main.js
import { add, subtract } from './math.js';

console.log(add(5, 3)); // 输出: 8
console.log(subtract(5, 3)); // 输出: 2

11. 类与继承

ES6 引入了更接近传统面向对象编程的语言特性，比如类和继承。

定义类

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

继承

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

let d = new Dog('Mitzie');
d.speak(); // 输出: Mitzie barks.

12. 模板字符串

ES6 引入了模板字符串，使得字符串拼接更加方便。

javascript
let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting); // 输出: Hello, Alice!

13. 解构赋值

解构赋值是一种从数组或对象中提取数据并赋值给变量的便捷方式。

数组解构

javascript
let [a, b] = [10, 20];
console.log(a); // 输出: 10
console.log(b); // 输出: 20

对象解构

javascript
let person = {name: "John", age: 30};
let {name, age} = person;
console.log(name); // 输出: John
console.log(age); // 输出: 30

14. Rest 参数和 Spread 操作符

Rest 参数 (...) 允许我们将不定数量的参数表示为数组。
Spread 操作符 (...) 可以展开数组或对象。

Rest 参数

javascript
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // 输出: 6

Spread 操作符

javascript
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // 输出: [1, 2, 3, 4, 5, 6]

这些是 JavaScript 更多的基础知识。

目录