JavaScript 入门笔记：从基础语法到现代特性

JavaScript 是当今最流行的编程语言之一，广泛应用于网页开发、服务器端开发（Node.js）、移动应用开发（React Native）以及桌面应用（Electron）等领域。作为前端开发的核心技术之一，掌握 JavaScript 是每个现代程序员的必备技能。本文将带你从基础语法出发，逐步了解 JavaScript 的核心概念与现代特性。

一、变量声明与数据类型

在 JavaScript 中，变量用于存储数据。ES6（ECMAScript 2015）引入了新的变量声明方式：let 和 const，取代了传统的 var。

javascript 复制代码

let name = "张三"; // 可变变量
const age = 25; // 常量，不可重新赋值

JavaScript 有以下几种基本数据类型：
string：字符串
number：数字
boolean：布尔值（true/false）
null 和 undefined：表示"无值"
symbol（ES6 新增）
bigint（ES2020 新增）

复杂类型包括： object：对象、数组、函数等都属于对象类型

使用 typeof 可以查看变量的类型：

javascript 复制代码

console.log(typeof "hello"); // "string"
console.log(typeof {}); // "object"

二、字符串操作

字符串是程序中最常见的数据类型之一。JavaScript 提供了丰富的字符串操作方法。

字符串声明

你可以使用单引号或双引号声明字符串：

javascript 复制代码

let str1 = 'Hello';
let str2 = "World";

模板字符串（Template Strings）

ES6 引入了模板字符串，使用反引号（）包裹，支持多行文本和变量插入。

javascript 复制代码

let name = "小明";
let greeting = 你好，${name}！今天是 ${new Date().toLocaleDateString()}。;
console.log(greeting);
// 输出：你好，小明！今天是 2025年10月31日。

模板字符串的优势：支持换行，非常适合生成 HTML 片段使用 ${} 插入变量，避免繁琐的字符串拼接

示例：动态生成 HTML 列表

javascript 复制代码

const todos = [
{ id: 1, text: '学习 ES6' },
{ id: 2, text: '通读《你不知道的 JavaScript》' }
];

const html =
<ul>
${todos.map(todo => <li>${todo.text}</li>).join('')}
</ul>
;

document.getElementById('app').innerHTML = html;

字符串常用方法

javascript 复制代码

str.length：获取字符串长度
str.toUpperCase() / toLowerCase()：大小写转换
str.trim()：去除首尾空格
str.split(',')：按分隔符拆分为数组
str.includes('word')：判断是否包含某子串
str.replace('old', 'new')：替换内容

三、数组与 map 方法

数组是存储多个值的容器。JavaScript 数组是动态的，可以存放不同类型的数据。

javascript 复制代码

let fruits = ['苹果', '香蕉', '橙子'];

map() 方法详解

map() 是数组的一个重要 API，用于遍历数组并对每个元素执行操作，返回一个新数组。

javascript 复制代码

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8]

map() 的特点：不修改原数组必须有返回值，否则新数组对应位置为 undefined 非常适合数据转换、生成 DOM 元素等场景

结合箭头函数，代码更简洁：

javascript 复制代码

todos.map(todo => <li>${todo.text}</li>);

其他常用数组方法： filter()：筛选符合条件的元素 find()：查找第一个匹配项 forEach()：遍历执行操作（无返回值） reduce()：累计计算 join()：将数组元素连接成字符串

四、函数与箭头函数

函数是执行特定任务的代码块。传统函数

javascript 复制代码

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

箭头函数（Arrow Function）

ES6 新增的箭头函数语法更简洁，且没有自己的 this，避免了 this 指向问题。

javascript 复制代码

const greet = (name) => Hello, ${name};

箭头函数简写规则：单个参数可省略括号：name => ... 单条语句且为返回值时可省略 {} 和 return

javascript 复制代码

[1,2,3].map(x => x 2); // 简洁明了

五、对象与 DOM 操作

JavaScript 中几乎所有东西都是对象。对象是由键值对组成的集合。

javascript 复制代码

let person = {
name: "李四",
age: 30,
sayHi() {
console.log(我是${this.name});
}
};
person.sayHi(); // 我是李四

DOM 操作

JavaScript 可以操作网页的 DOM（文档对象模型），实现动态交互。

javascript 复制代码

// 获取元素
const el = document.getElementById('myDiv');

// 修改内容
el.innerHTML = '<p>新内容</p>';

// 添加事件
el.addEventListener('click', () => {
alert('被点击了！');
});

结合模板字符串，可以轻松生成复杂 HTML 结构，如前面的 todos 示例。

六、String 对象与原始类型

虽然我们通常使用字符串字面量（如 "hello"），但 JavaScript 也提供 String 构造函数来创建字符串对象：

javascript 复制代码

let str1 = "hello"; // 原始字符串
let str2 = new String("hello"); // 字符串对象

console.log(typeof str1); // "string"
console.log(typeof str2); // "object"
console.log(Object.prototype.toString.call(str2)); // "[object String]"
console.log(str2.valueOf()); // "hello"（返回原始值）

建议使用原始字符串类型，避免使用 new String()，因为它会创建对象，带来不必要的复杂性。

七、代码风格与最佳实践

保持一致性选择一种字符串定义方式（单引号或双引号），并在项目中统一使用。推荐使用 ESLint 工具规范代码风格。
使用模板字符串代替拼接

javascript 复制代码

// 不推荐
let msg = "Hello " + name + ", you are " + age + " years old.";

// 推荐
let msg = Hello ${name}, you are ${age} years old.;

遵循公司或团队的编码规范大型项目中，统一的代码风格能显著提升可读性和维护性。

八、总结

JavaScript 是一门灵活而强大的语言。通过本笔记，你应该掌握了以下核心知识：使用 let 和 const 声明变量理解基本数据类型与对象熟练使用模板字符串进行字符串操作掌握 map() 等数组方法进行数据处理使用箭头函数简化函数定义操作 DOM 实现动态页面避免使用 new String() 创建字符串对象

随着你不断实践，JavaScript 的魅力会逐渐展现。建议多写代码、阅读文档（如 MDN）、参与开源项目，不断提升技能。学习建议：多动手实践，尝试修改示例代码遇到问题善用 console.log()` 调试学习现代框架（如 React、Vue）前，先打好 JS 基础

JavaScript 的世界广阔而精彩，愿你在编程之旅中不断进步！

当前时间：2025年10月31日，星期五。祝你学习愉快，代码无 Bug！