1. JavaScript基础语法入门指南
作为一名前端开发者，我经常被问到如何快速掌握JavaScript基础语法。今天我就用最直白的代码示例，带大家过一遍JS的核心语法要点。记住，学编程语言就像学说话，先掌握基本词汇和句型，再慢慢组织复杂表达。
JavaScript作为现代Web开发的基石，其基础语法包含了变量声明、数据类型、运算符、流程控制、函数等核心概念。下面我会用大量代码示例展示这些基础语法，每个示例都附带详细注释说明。
2. 变量与数据类型
2.1 变量声明
JavaScript中有三种变量声明方式：
// 1. var - 传统声明方式（存在变量提升问题） var name = "张三"; console.log(name); // 输出: 张三 // 2. let - 块级作用域变量 let age = 25; console.log(age); // 输出: 25 // 3. const - 块级作用域常量 const PI = 3.1415; console.log(PI); // 输出: 3.1415提示：现代JS开发中，优先使用const，其次是let，尽量避免使用var
2.2 基本数据类型
JavaScript有7种基本数据类型：
// 1. 字符串(String) let str = "Hello World"; console.log(typeof str); // "string" // 2. 数字(Number) let num = 123; console.log(typeof num); // "number" // 3. 布尔值(Boolean) let bool = true; console.log(typeof bool); // "boolean" // 4. 空值(Null) let empty = null; console.log(typeof empty); // "object" (这是JS的历史遗留问题) // 5. 未定义(Undefined) let notDefined; console.log(typeof notDefined); // "undefined" // 6. 符号(Symbol) - ES6新增 let sym = Symbol("desc"); console.log(typeof sym); // "symbol" // 7. 大整数(BigInt) - ES2020新增 let bigNum = 123n; console.log(typeof bigNum); // "bigint"3. 运算符与表达式
3.1 算术运算符
let a = 10, b = 3; console.log(a + b); // 13 (加法) console.log(a - b); // 7 (减法) console.log(a * b); // 30 (乘法) console.log(a / b); // 3.333... (除法) console.log(a % b); // 1 (取余) console.log(a ** b); // 1000 (指数)3.2 比较运算符
console.log(5 == "5"); // true (值相等) console.log(5 === "5"); // false (值和类型都相等) console.log(5 != "5"); // false console.log(5 !== "5"); // true console.log(5 > 3); // true console.log(5 <= 3); // false3.3 逻辑运算符
let x = true, y = false; console.log(x && y); // false (与) console.log(x || y); // true (或) console.log(!x); // false (非)4. 流程控制
4.1 条件语句
// if-else let score = 85; if (score >= 90) { console.log("优秀"); } else if (score >= 80) { console.log("良好"); // 输出这个 } else if (score >= 60) { console.log("及格"); } else { console.log("不及格"); } // switch-case let day = 3; let dayName; switch (day) { case 1: dayName = "周一"; break; case 2: dayName = "周二"; break; case 3: dayName = "周三"; // 输出这个 break; default: dayName = "未知"; } console.log(dayName);4.2 循环语句
// for循环 for (let i = 0; i < 5; i++) { console.log(i); // 输出0,1,2,3,4 } // while循环 let j = 0; while (j < 3) { console.log(j); // 输出0,1,2 j++; } // do-while循环 let k = 0; do { console.log(k); // 输出0 k++; } while (k < 1); // for...of循环 (ES6) let arr = [10, 20, 30]; for (let item of arr) { console.log(item); // 输出10,20,30 }5. 函数基础
5.1 函数声明与调用
// 函数声明 function greet(name) { return `Hello, ${name}!`; } // 函数调用 console.log(greet("李四")); // 输出: Hello, 李四! // 函数表达式 const square = function(x) { return x * x; }; console.log(square(5)); // 25 // 箭头函数 (ES6) const cube = x => x * x * x; console.log(cube(3)); // 275.2 函数参数
// 默认参数 function sayHello(name = "访客") { console.log(`你好, ${name}!`); } sayHello(); // 你好, 访客! sayHello("王五"); // 你好, 王五! // 剩余参数 function sum(...numbers) { return numbers.reduce((a, b) => a + b, 0); } console.log(sum(1, 2, 3)); // 66. 数组与对象
6.1 数组操作
let fruits = ["苹果", "香蕉"]; // 添加元素 fruits.push("橙子"); // 末尾添加 fruits.unshift("葡萄"); // 开头添加 // 删除元素 fruits.pop(); // 删除最后一个 fruits.shift(); // 删除第一个 // 遍历数组 fruits.forEach((fruit, index) => { console.log(`${index}: ${fruit}`); }); // 常用数组方法 let numbers = [1, 2, 3, 4, 5]; let doubled = numbers.map(n => n * 2); // [2,4,6,8,10] let evens = numbers.filter(n => n % 2 === 0); // [2,4] let total = numbers.reduce((sum, n) => sum + n, 0); // 156.2 对象操作
// 对象字面量 let person = { name: "赵六", age: 30, greet: function() { console.log(`我是${this.name}`); } }; // 访问属性 console.log(person.name); // "赵六" console.log(person["age"]); // 30 person.greet(); // "我是赵六" // 添加/修改属性 person.job = "工程师"; person.age = 31; // 删除属性 delete person.job; // 对象解构 (ES6) let { name, age } = person; console.log(name, age); // "赵六" 317. 常见问题与技巧
7.1 变量提升问题
console.log(a); // undefined (不会报错) var a = 10; // 等价于: var a; console.log(a); a = 10; // 使用let/const则不会提升 console.log(b); // ReferenceError let b = 20;7.2 严格相等与类型转换
console.log(0 == false); // true console.log(0 === false); // false console.log("" == false); // true console.log("" === false); // false // 最佳实践：总是使用 === 除非你明确需要类型转换7.3 闭包应用
function createCounter() { let count = 0; return function() { count++; return count; }; } const counter = createCounter(); console.log(counter()); // 1 console.log(counter()); // 2 console.log(counter()); // 37.4 数组去重技巧
let nums = [1, 2, 2, 3, 4, 4, 5]; // 方法1: Set let unique1 = [...new Set(nums)]; // 方法2: filter let unique2 = nums.filter((item, index) => nums.indexOf(item) === index); // 方法3: reduce let unique3 = nums.reduce((acc, cur) => { if (!acc.includes(cur)) acc.push(cur); return acc; }, []); console.log(unique1, unique2, unique3); // 都是[1,2,3,4,5]8. 现代JS特性
8.1 模板字符串
let product = "手机"; let price = 2999; // 传统方式 let desc1 = "这个" + product + "的价格是" + price + "元"; // 模板字符串 let desc2 = `这个${product}的价格是${price}元`; console.log(desc1 === desc2); // true8.2 展开运算符
// 数组展开 let arr1 = [1, 2]; let arr2 = [3, 4]; let combined = [...arr1, ...arr2]; // [1,2,3,4] // 对象展开 let obj1 = { a: 1, b: 2 }; let obj2 = { ...obj1, c: 3 }; // {a:1, b:2, c:3}8.3 可选链操作符
let user = { profile: { name: "钱七", address: { city: "北京" } } }; // 传统方式 let city1 = user && user.profile && user.profile.address && user.profile.address.city; // 可选链 let city2 = user?.profile?.address?.city; console.log(city1 === city2); // true9. 实战练习建议
为了巩固这些基础语法，我建议你尝试以下练习：
- 编写一个函数，接收一个数字数组，返回其中所有偶数的平方和
- 创建一个对象表示图书，包含标题、作者、价格等属性，并添加显示信息的方法
- 实现一个简单的计算器，支持加减乘除运算
- 编写代码找出两个数组的交集元素
- 使用闭包创建一个缓存函数，缓存计算结果提高性能
记住，学习编程最好的方式就是多写代码。刚开始可能会遇到各种错误，但每个错误都是学习的机会。我在刚开始学习JS时，经常因为忘记分号或者拼写错误而调试半天，这些都是必经之路。
