JS 基础复习指南：概念解析和实战案例

2023-09-10 06:27:17

在现代网络开发的广阔天地中，JavaScript（JS）作为一种备受欢迎且功能强大的编程语言，扮演着不可或缺的角色。对于初学者来说，牢固掌握 JS 基础至关重要，它能为未来的学习和实战项目奠定坚实根基。

本指南旨在为 JS 初学者提供全面的基础复习，以深入理解关键概念并通过实战案例加以巩固。我们将逐一探索函数传参、函数声明和函数表达式、原生 UI 交互和空值合并运算符等核心主题。

函数传参

函数是 JS 中强大的代码块，允许我们封装代码并根据需要重复使用。传参是将数据传递给函数的重要机制。

函数声明

函数声明使用 function ，后跟函数名和括号内的参数列表。例如：

function greet(name) {
  console.log(`Hello, ${name}!`);
}

函数表达式

函数表达式使用匿名函数，使用箭头函数（ES6）或函数声明（ES5）。

// 箭头函数
const greet = (name) => console.log(`Hello, ${name}!`);

// 函数声明（ES5）
var greet = function(name) {
  console.log(`Hello, ${name}!`);
};

原生 UI 交互

原生 UI 交互允许我们直接与 HTML 元素进行交互，无需使用第三方库。

空值合并运算符 (??)

空值合并运算符 ?? 用于返回第一个非空值。如果左侧操作数为非空，则返回左侧操作数；否则，返回右侧操作数。

const username = user?.name ?? 'Unknown';

实战案例

表单验证

function validateForm() {
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;

  if (!name) {
    alert('Please enter your name.');
    return false;
  }
  if (!email) {
    alert('Please enter your email address.');
    return false;
  }
  return true;
}

DOM 操作

const container = document.getElementById('container');
const button = document.createElement('button');
button.innerText = 'Click Me';
button.onclick = () => alert('You clicked me!');
container.appendChild(button);

通过 JS 访问外部 API

const fetchUser = async (id) => {
  const response = await fetch(`https://api.example.com/users/${id}`);
  const data = await response.json();
  return data;
};