深入了解JavaScript：从基础到高级应用

1. ES6+特性

ECMAScript 6（简称ES6）引入了许多新的特性，使JavaScript编程更加简洁和高效。以下是一些常用的ES6+特性：

let 和 const

let和const是用来声明变量的新关键字，取代了var。let用于声明可变变量，const用于声明不可变常量。

let age = 30;
const name = "Alice";

// `age` 可以重新赋值
age = 31;

// `name` 不能重新赋值
// name = "Bob"; // 会报错

箭头函数

箭头函数提供了一种更加简洁的函数定义语法，并且不会绑定自己的this。

const greet = (name) => `Hello, ${name}!`;
console.log(greet("Alice")); // 输出: Hello, Alice!

模板字符串

模板字符串使用反引号（``）包裹，允许在字符串中嵌入表达式。

const name = "Alice";
const greeting = `Hello, ${name}! Welcome to our website.`;
console.log(greeting); // 输出: Hello, Alice! Welcome to our website.

解构赋值

解构赋值允许从数组或对象中提取值，赋给变量。

const person = { firstName: "John", lastName: "Doe" };
const { firstName, lastName } = person;
console.log(firstName, lastName); // 输出: John Doe

2. 异步编程

JavaScript是一种单线程语言，但通过异步编程，可以在执行耗时操作时不阻塞主线程。常用的异步编程方式有回调函数、Promise和async/await。

Promise

Promise 是异步操作的封装，可以通过链式调用来处理成功和失败的情况。

const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched");
        }, 2000);
    });
};

fetchData()
    .then(data => console.log(data)) // 输出: Data fetched
    .catch(error => console.error(error));

async/await

async和await是ES8引入的特性，使异步代码看起来更像同步代码。

const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched");
        }, 2000);
    });
};

const fetchAsync = async () => {
    try {
        const data = await fetchData();
        console.log(data); // 输出: Data fetched
    } catch (error) {
        console.error(error);
    }
};

fetchAsync();

3. 模块化

模块化可以提高代码的可维护性和重用性。在ES6中，模块化通过export和import实现。

导出模块

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

导入模块

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

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

4. 实用编程技巧

使用三元运算符简化条件语句

const age = 20;
const canVote = age >= 18 ? "Yes" : "No";
console.log(canVote); // 输出: Yes

使用可选链操作符安全访问嵌套对象属性

const user = { profile: { name: "Alice" } };
const userName = user.profile?.name ?? "Guest";
console.log(userName); // 输出: Alice

使用空值合并操作符提供默认值

const input = undefined;
const value = input ?? "Default Value";
console.log(value); // 输出: Default Value