JavaScript核心概念：ES6语法、DOM/BOM操作与异步请求详解

最新推荐文章于 2025-05-07 09:01:12 发布

程序员Bears

最新推荐文章于 2025-05-07 09:01:12 发布

阅读量438

点赞数 11

分类专栏： Java全栈成长笔记文章标签： javascript es6 开发语言

本文链接：https://blog.csdn.net/qq_57755194/article/details/147749950

版权

Java全栈成长笔记专栏收录该内容

16 篇文章

订阅专栏

前言

JavaScript作为现代Web开发的三大基石之一，已经从最初的简单脚本语言发展成为功能强大的全栈开发语言。本文将深入探讨JavaScript的几个核心概念：ES6新特性、DOM/BOM操作以及Ajax与Fetch API，帮助开发者掌握现代JavaScript开发的关键技能。

一、ES6语法革命

ECMAScript 2015（ES6）是JavaScript语言的一次重大更新，引入了许多新特性，极大地提升了开发效率和代码可读性。

1. let和const：变量声明的新方式

// var的问题：变量提升和函数作用域
console.log(a); // undefined，不会报错
var a = 10;

// let的块级作用域
if (true) {
  let b = 20;
  console.log(b); // 20
}
// console.log(b); // ReferenceError: b is not defined

// const定义常量
const PI = 3.1415;
// PI = 3.14; // TypeError: Assignment to constant variable

最佳实践：

默认使用const，只有需要重新赋值的变量才使用let
避免使用var，以减少变量提升带来的问题

2. 箭头函数：简洁的语法和词法this

// 传统函数
function sum(a, b) {
  return a + b;
}

// 箭头函数简化
const sum = (a, b) => a + b;

// 更复杂的例子
const numbers = [1, 2, 3, 4];
const squares = numbers.map(num => num * num);

// this绑定差异
const obj = {
  name: 'Object',
  traditionalFunc: function() {
    console.log(this.name); // 'Object'
  },
  arrowFunc: () => {
    console.log(this.name); // undefined (或window.name)
  }
};

箭头函数特点：

更简洁的语法（单行时可省略return和花括号）
没有自己的this，继承自外层函数
不能用作构造函数（不能使用new调用）
没有arguments对象，可使用剩余参数替代

二、DOM与BOM操作实战

1. DOM操作：现代Web应用的基石

// 查询元素
const header = document.querySelector('#header');
const allButtons = document.querySelectorAll('.btn');

// 创建和添加元素
const newDiv = document.createElement('div');
newDiv.textContent = 'Hello, World!';
newDiv.classList.add('box');
document.body.appendChild(newDiv);

// 事件处理
const btn = document.getElementById('myButton');
btn.addEventListener('click', function(e) {
  console.log('Button clicked!', e.target);
  
  // 事件委托示例
  if (e.target.matches('.item')) {
    console.log('Item clicked:', e.target.textContent);
  }
});

// 现代DOM操作：批量修改减少重绘
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const item = document.createElement('li');
  item.textContent = `Item ${i}`;
  fragment.appendChild(item);
}
document.getElementById('list').appendChild(fragment);

2. BOM操作：与浏览器交互

// 导航相关
console.log('当前URL:', window.location.href);
window.location.assign('https://example.com'); // 导航到新页面

// 浏览器信息
console.log('用户代理:', navigator.userAgent);
console.log('屏幕尺寸:', screen.width, 'x', screen.height);

// 存储数据
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');

// 定时器
const timerId = setTimeout(() => {
  console.log('Delayed message');
}, 1000);

// 清除定时器
clearTimeout(timerId);

三、Ajax与Fetch API：现代异步请求

1. 传统Ajax与XMLHttpRequest

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    const data = JSON.parse(xhr.responseText);
    console.log('Success:', data);
  } else {
    console.error('Error:', xhr.statusText);
  }
};

xhr.onerror = function() {
  console.error('Request failed');
};

xhr.send();

2. Fetch API：现代网络请求方式

// 基本GET请求
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log('Success:', data))
  .catch(error => console.error('Error:', error));

// POST请求示例
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123'
  },
  body: JSON.stringify({
    name: 'John',
    age: 30
  })
})
.then(/* 处理响应 */);

// 使用async/await简化
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log('Data:', data);
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

3. Fetch API高级特性

// 请求取消
const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Error:', err);
    }
  });

// 5秒后取消请求
setTimeout(() => controller.abort(), 5000);

// 并行请求
Promise.all([
  fetch('https://api.example.com/users'),
  fetch('https://api.example.com/posts')
])
.then(async ([usersRes, postsRes]) => {
  const users = await usersRes.json();
  const posts = await postsRes.json();
  return { users, posts };
})
.then(combinedData => {
  console.log('Combined data:', combinedData);
});

四、实战案例：构建一个现代JavaScript应用

让我们结合所学知识，构建一个简单的用户数据展示应用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>User Data Dashboard</title>
  <style>
    .user-card {
      border: 1px solid #ddd;
      padding: 15px;
      margin: 10px;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .loading {
      color: #666;
      font-style: italic;
    }
  </style>
</head>
<body>
  <h1>User Data Dashboard</h1>
  <button id="loadUsers">Load Users</button>
  <div id="userContainer"></div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const loadBtn = document.querySelector('#loadUsers');
      const userContainer = document.querySelector('#userContainer');
      
      loadBtn.addEventListener('click', async () => {
        try {
          userContainer.innerHTML = '<p class="loading">Loading users...</p>';
          
          const response = await fetch('https://jsonplaceholder.typicode.com/users');
          if (!response.ok) throw new Error('Failed to fetch users');
          
          const users = await response.json();
          renderUsers(users);
          
          // 存储到localStorage
          localStorage.setItem('lastFetchedUsers', JSON.stringify(users));
          localStorage.setItem('lastFetchTime', new Date().toISOString());
        } catch (error) {
          userContainer.innerHTML = `<p class="error">Error: ${error.message}</p>`;
          console.error('Fetch error:', error);
        }
      });
      
      function renderUsers(users) {
        userContainer.innerHTML = '';
        
        users.forEach(user => {
          const card = document.createElement('div');
          card.className = 'user-card';
          card.innerHTML = `
            <h3>${user.name}</h3>
            <p>Email: ${user.email}</p>
            <p>Company: ${user.company.name}</p>
          `;
          userContainer.appendChild(card);
        });
      }
      
      // 尝试从localStorage加载上次的数据
      const lastFetched = localStorage.getItem('lastFetchedUsers');
      if (lastFetched) {
        renderUsers(JSON.parse(lastFetched));
      }
    });
  </script>
</body>
</html>

五、总结与最佳实践

ES6+语法：
- 优先使用const和let代替var
- 合理使用箭头函数，特别是在需要保持this上下文的场景
- 探索更多ES6+特性如解构赋值、模板字符串、默认参数等
DOM/BOM操作：
- 使用事件委托提高性能
- 批量DOM操作使用DocumentFragment
- 合理使用Web Storage API存储数据
异步请求：
- 现代项目优先使用Fetch API
- 处理错误和异常情况
- 考虑使用AbortController实现请求取消
- 对于复杂应用，可以考虑使用axios等库
性能优化：
- 减少不必要的DOM操作
- 使用防抖和节流优化频繁事件
- 合理使用缓存策略