初识javascript

1. JavaScript 基础语法

(1) 变量声明

JavaScript支持三种声明变量的方式：

• var：传统的变量声明方式，存在作用域问题（函数作用域）。

• let：块级作用域变量声明方式，避免了var的作用域问题。

• const：常量声明，声明后不能修改其值，具备块级作用域。

var name = "John";  // 使用 var 声明
let age = 25;       // 使用 let 声明
const isStudent = true;  // 使用 const 声明

(2) 数据类型

JavaScript有6种基本数据类型：

• Primitive Types：string、number、boolean、undefined、null、symbol（ES6新增）

• Reference Types：Object、Array、Function、Date等

let name = "John";  // string
let age = 25;       // number
let isStudent = true;  // boolean
let person = { name: "John", age: 25 };  // object
let numbers = [1, 2, 3];  // array

(3) 类型转换

JavaScript会进行隐式或显式的类型转换。

• 隐式转换：例如 "" + 1 会返回 "1"，即数字1被转换成字符串。

• 显式转换：使用 String()、Number()、Boolean() 等函数进行类型转换。

let num = 5;
let str = String(num);  // 转换为字符串 "5"
let bool = Boolean(num); // 转换为布尔值 true

2. 控制流

(1) 条件语句

JavaScript支持常见的条件语句：

• if、else、else if

• switch：用于多个条件判断时更简洁。

let age = 18;
if (age >= 18) {
    console.log("Adult");
} else {
    console.log("Minor");
}

let color = "red";
switch(color) {
    case "red":
        console.log("Red color");
        break;
    case "blue":
        console.log("Blue color");
        break;
    default:
        console.log("Unknown color");
}

(2) 循环语句

JavaScript提供几种循环方式来处理重复执行的任务：

• for：用于知道循环次数时。

• while：在循环条件满足时继续执行。

• do...while：至少执行一次循环体。

// for 循环
for (let i = 0; i < 5; i++) {
    console.log(i);  // 输出 0 到 4
}

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

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

3. 函数

(1) 函数声明

JavaScript中的函数声明语法如下：

function greet(name) {
    return "Hello, " + name;
}
console.log(greet("John"));  // 输出 "Hello, John"

(2) 匿名函数

可以创建没有名称的函数，通常与变量一起使用，或者作为回调传递：

let add = function(a, b) {
    return a + b;
};
console.log(add(5, 10));  // 输出 15

(3) 箭头函数 (Arrow Functions)

ES6新增的语法，使得函数写法更加简洁，同时保留了外部this的上下文。

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

(4) 高阶函数

函数可以作为参数传递给另一个函数，或者作为返回值返回。JavaScript中的许多内建函数如map()、filter()、reduce()等都属于高阶函数。

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(x => x * 2);  // 高阶函数的例子
console.log(doubled);  // 输出 [2, 4, 6, 8]

4. 对象和数组

(1) 对象 (Object)

对象是JavaScript中最常用的数据结构之一，用于存储键值对。

let person = {
    name: "John",
    age: 30,
    greet: function() {
        return "Hello " + this.name;
    }
};
console.log(person.name);  // 输出 "John"
console.log(person.greet());  // 输出 "Hello John"

(2) 数组 (Array)

数组是一个有序的元素集合，可以是任意类型的数据。

let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]);  // 输出 "apple"
fruits.push("orange");   // 向数组添加元素
console.log(fruits);  // 输出 ["apple", "banana", "cherry", "orange"]

5. 事件处理

JavaScript允许开发者监听和处理用户的交互事件（如点击、键盘输入、鼠标移动等）。

<button id="clickBtn">Click Me</button>
<script>
document.getElementById("clickBtn").addEventListener("click", function() {
    alert("Button clicked!");
});
</script>

• addEventListener() 用于绑定事件处理器。

• removeEventListener() 用于移除事件处理器。

6. 异步编程

JavaScript是单线程的，这意味着它一次只能做一件事。不过，可以通过异步编程实现并发行为。

(1) 回调函数

回调函数是异步操作完成时调用的函数。

function fetchData(callback) {
    setTimeout(() => {
        console.log("Data fetched");
        callback();
    }, 1000);
}

fetchData(() => {
    console.log("Callback executed");
});

(2) Promise

Promise 是JavaScript中用于处理异步操作的标准化方式。

let promise = new Promise((resolve, reject) => {
    let success = true;
    if (success) {
        resolve("Success!");
    } else {
        reject("Failed!");
    }
});

promise.then(result => {
    console.log(result);  // 输出 "Success!"
}).catch(error => {
    console.log(error);   // 输出 "Failed!"
});

(3) async/await

async/await 是基于 Promise 的语法糖，它让异步代码看起来像同步代码。

async function fetchData() {
    let result = await new Promise((resolve, reject) => {
        setTimeout(() => resolve("Data fetched"), 1000);
    });
    console.log(result);  // 输出 "Data fetched"
}

fetchData();

7. DOM操作

JavaScript可以通过DOM（文档对象模型）操作HTML文档内容、结构和样式。

(1) 选择元素

let element = document.getElementById("myElement");  // 通过ID选择
let elements = document.getElementsByClassName("myClass");  // 通过类名选择
let allDivs = document.querySelectorAll("div");  // 通过CSS选择器选择

(2) 修改元素

element.innerHTML = "New Content";  // 修改内容
element.style.color = "blue";  // 修改样式

(3) 创建元素

let newDiv = document.createElement("div");
newDiv.textContent = "This is a new div!";
document.body.appendChild(newDiv);  // 将新元素添加到页面

8. ES6新特性

(1) 解构赋值

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

(2) 模块化

ES6支持模块化，可以使用export和import来导出和导入模块。

// math.js
export function add(x, y) {
    return x + y;
}

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