1. JavaScript基础语法与数据类型全面解析作为一名前端开发者掌握JavaScript的基础语法和数据类型是必备技能。今天我将系统梳理JavaScript的核心基础内容结合自己多年的开发经验分享一些教科书上不会讲的实用技巧和常见坑点。1.1 JavaScript的引入方式在HTML中使用JavaScript有两种主要方式内联脚本直接在HTML文件中使用script标签包裹JavaScript代码script console.log(这是内联JavaScript); /script外部脚本通过src属性引入外部.js文件script srcpath/to/your/script.js/script实际开发中强烈建议使用外部脚本方式这有利于代码维护和缓存优化。现代前端工程通常会把脚本放在body标签的底部或者使用async/defer属性控制加载行为。1.2 数据输出的三种方式JavaScript提供了多种数据输出方式各有适用场景console.log()- 开发者调试利器console.log(调试信息); // 输出到浏览器控制台 console.table([1,2,3]); // 以表格形式输出数组/对象document.write()- 直接写入HTML文档document.write(h1Hello World/h1);注意document.write()在页面加载完成后调用会覆盖整个文档实际开发中很少使用alert()- 弹出对话框alert(警告信息); // 阻塞式弹窗虽然简单但alert会阻塞页面交互现代前端开发更推荐使用自定义模态框或console调试2. JavaScript数据类型深度剖析JavaScript是弱类型语言理解其数据类型对避免类型相关bug至关重要。2.1 基本数据类型undefined- 未定义let a; console.log(a); // undefined常见误区undefined不是关键字而是一个全局属性可以被重写不建议null- 空值let b null; console.log(b); // nullnull表示无对象typeof null返回object是历史遗留bugBoolean- 布尔值let isTrue true; let isFalse false;Number- 数字类型let int 10; let float 3.14; let hex 0xFF; // 255JavaScript没有真正的整数所有数字都是64位浮点数String- 字符串let str1 单引号; let str2 双引号; let str3 模板字符串;模板字符串支持多行和插值Hello ${name}BigInt- 大整数const bigNum 9007199254740991n;解决Number类型无法精确表示大于2^53-1的整数问题Symbol- 唯一值const sym1 Symbol(); const sym2 Symbol(描述);每个Symbol都是唯一的常用作对象属性键2.2 引用数据类型Object- 对象let obj { name: John, age: 30 };Array- 数组let arr [1, 2, 3];Function- 函数function greet() { console.log(Hello); }3. 类型转换与比较3.1 全等与相等运算符JavaScript有两种相等比较方式5 5; // true类型转换后比较 5 5; // false严格比较类型和值实际开发中强烈建议使用避免隐式类型转换带来的意外结果3.2 Boolean类型转换规则以下值会被转换为falseBoolean(null); // false Boolean(undefined); // false Boolean(0); // false Boolean(); // false Boolean(NaN); // false其他所有值包括空对象和数组都会转换为trueBoolean({}); // true Boolean([]); // true Boolean(0); // true Boolean( ); // true3.3 字符串转换显示转换String(123); // 123 true.toString(); // true隐式转换常用技巧123 ; // 1233.4 Number类型转换Number()函数的转换规则Number(null); // 0 Number(undefined); // NaN Number(true); // 1 Number(false); // 0 Number(123); // 123 Number(123.45); // 123.45 Number(123abc); // NaN3.5 数值解析函数parseInt和parseFloat的区别parseInt(123.45); // 123 parseFloat(123.45); // 123.45 parseInt(10px); // 10 parseInt(010); // 10ES58ES3建议总是指定parseInt的基数parseInt(010, 10)4. 流程控制与函数4.1 条件语句if...else if...else结构if (score 90) { grade A; } else if (score 80) { grade B; } else { grade C; }switch语句switch(day) { case 0: dayName Sunday; break; case 1: dayName Monday; break; default: dayName Unknown; }忘记break会导致case穿透这是常见错误点4.2 循环结构for循环for (let i 0; i 10; i) { console.log(i); }while循环let i 0; while (i 10) { console.log(i); i; }for...in循环遍历对象属性const obj {a:1, b:2}; for (let key in obj) { console.log(key, obj[key]); }for...of循环遍历可迭代对象const arr [1, 2, 3]; for (let value of arr) { console.log(value); }for...in遍历键名for...of遍历值这是重要区别4.3 函数定义与使用函数声明function add(a, b) { return a b; }函数表达式const add function(a, b) { return a b; };箭头函数ES6const add (a, b) a b;4.4 异常处理try...catch...finally结构try { // 可能出错的代码 JSON.parse(invalid json); } catch (error) { console.error(解析出错:, error.message); } finally { console.log(无论成功失败都会执行); }抛出异常function divide(a, b) { if (b 0) { throw new Error(除数不能为零); } return a / b; }5. 实战经验与常见问题5.1 类型判断最佳实践typeof的局限性typeof null; // object历史遗留问题 typeof []; // object typeof new Date();// object更可靠的类型检查方法Array.isArray([]); // true Object.prototype.toString.call(null); // [object Null]5.2 浮点数精度问题JavaScript的浮点数计算存在精度问题0.1 0.2 0.3; // false解决方案// 使用toFixed限制小数位数 (0.1 0.2).toFixed(2); // 0.30 // 转换为整数计算 (0.1*10 0.2*10)/10; // 0.35.3 变量提升与暂时性死区var的变量提升console.log(a); // undefined var a 1;let/const的暂时性死区console.log(b); // ReferenceError let b 2;5.4 数组遍历的陷阱for...in遍历数组的问题Array.prototype.customMethod function() {}; const arr [1, 2, 3]; for (let index in arr) { console.log(index); // 会输出0,1,2,customMethod }遍历数组应该使用for循环、forEach或for...of5.5 函数参数默认值ES5实现方式function greet(name) { name name || Guest; console.log(Hello name); }ES6更优雅的方式function greet(name Guest) { console.log(Hello ${name}); }6. 现代JavaScript开发建议6.1 使用严格模式在脚本或函数顶部添加use strict;严格模式的好处消除静默错误防止意外创建全局变量禁止使用未来可能成为关键字的标识符6.2 优先使用const和let现代JavaScript开发建议默认使用const需要重新赋值时使用let避免使用var6.3 模板字符串的优势传统字符串拼接const greeting Hello name , today is day;模板字符串方式const greeting Hello ${name}, today is ${day};支持多行字符串和表达式插值6.4 解构赋值技巧数组解构const [first, second] [1, 2];对象解构const {name, age} {name: John, age: 30};函数参数解构function greet({name, age}) { console.log(Hello ${name}, you are ${age}); }6.5 展开运算符的应用数组合并const arr1 [1, 2]; const arr2 [3, 4]; const combined [...arr1, ...arr2];对象合并const obj1 {a: 1}; const obj2 {b: 2}; const merged {...obj1, ...obj2};函数参数传递const numbers [1, 2, 3]; Math.max(...numbers);掌握这些JavaScript基础知识是成为合格前端开发者的第一步。在实际项目中类型转换、循环遍历和函数使用是最容易出问题的地方需要特别注意。建议通过实际编码练习来巩固这些概念遇到问题时多查阅MDN文档。
1. JavaScript基础语法与数据类型全面解析作为一名前端开发者掌握JavaScript的基础语法和数据类型是必备技能。今天我将系统梳理JavaScript的核心基础内容结合自己多年的开发经验分享一些教科书上不会讲的实用技巧和常见坑点。1.1 JavaScript的引入方式在HTML中使用JavaScript有两种主要方式内联脚本直接在HTML文件中使用script标签包裹JavaScript代码script console.log(这是内联JavaScript); /script外部脚本通过src属性引入外部.js文件script srcpath/to/your/script.js/script实际开发中强烈建议使用外部脚本方式这有利于代码维护和缓存优化。现代前端工程通常会把脚本放在body标签的底部或者使用async/defer属性控制加载行为。1.2 数据输出的三种方式JavaScript提供了多种数据输出方式各有适用场景console.log()- 开发者调试利器console.log(调试信息); // 输出到浏览器控制台 console.table([1,2,3]); // 以表格形式输出数组/对象document.write()- 直接写入HTML文档document.write(h1Hello World/h1);注意document.write()在页面加载完成后调用会覆盖整个文档实际开发中很少使用alert()- 弹出对话框alert(警告信息); // 阻塞式弹窗虽然简单但alert会阻塞页面交互现代前端开发更推荐使用自定义模态框或console调试2. JavaScript数据类型深度剖析JavaScript是弱类型语言理解其数据类型对避免类型相关bug至关重要。2.1 基本数据类型undefined- 未定义let a; console.log(a); // undefined常见误区undefined不是关键字而是一个全局属性可以被重写不建议null- 空值let b null; console.log(b); // nullnull表示无对象typeof null返回object是历史遗留bugBoolean- 布尔值let isTrue true; let isFalse false;Number- 数字类型let int 10; let float 3.14; let hex 0xFF; // 255JavaScript没有真正的整数所有数字都是64位浮点数String- 字符串let str1 单引号; let str2 双引号; let str3 模板字符串;模板字符串支持多行和插值Hello ${name}BigInt- 大整数const bigNum 9007199254740991n;解决Number类型无法精确表示大于2^53-1的整数问题Symbol- 唯一值const sym1 Symbol(); const sym2 Symbol(描述);每个Symbol都是唯一的常用作对象属性键2.2 引用数据类型Object- 对象let obj { name: John, age: 30 };Array- 数组let arr [1, 2, 3];Function- 函数function greet() { console.log(Hello); }3. 类型转换与比较3.1 全等与相等运算符JavaScript有两种相等比较方式5 5; // true类型转换后比较 5 5; // false严格比较类型和值实际开发中强烈建议使用避免隐式类型转换带来的意外结果3.2 Boolean类型转换规则以下值会被转换为falseBoolean(null); // false Boolean(undefined); // false Boolean(0); // false Boolean(); // false Boolean(NaN); // false其他所有值包括空对象和数组都会转换为trueBoolean({}); // true Boolean([]); // true Boolean(0); // true Boolean( ); // true3.3 字符串转换显示转换String(123); // 123 true.toString(); // true隐式转换常用技巧123 ; // 1233.4 Number类型转换Number()函数的转换规则Number(null); // 0 Number(undefined); // NaN Number(true); // 1 Number(false); // 0 Number(123); // 123 Number(123.45); // 123.45 Number(123abc); // NaN3.5 数值解析函数parseInt和parseFloat的区别parseInt(123.45); // 123 parseFloat(123.45); // 123.45 parseInt(10px); // 10 parseInt(010); // 10ES58ES3建议总是指定parseInt的基数parseInt(010, 10)4. 流程控制与函数4.1 条件语句if...else if...else结构if (score 90) { grade A; } else if (score 80) { grade B; } else { grade C; }switch语句switch(day) { case 0: dayName Sunday; break; case 1: dayName Monday; break; default: dayName Unknown; }忘记break会导致case穿透这是常见错误点4.2 循环结构for循环for (let i 0; i 10; i) { console.log(i); }while循环let i 0; while (i 10) { console.log(i); i; }for...in循环遍历对象属性const obj {a:1, b:2}; for (let key in obj) { console.log(key, obj[key]); }for...of循环遍历可迭代对象const arr [1, 2, 3]; for (let value of arr) { console.log(value); }for...in遍历键名for...of遍历值这是重要区别4.3 函数定义与使用函数声明function add(a, b) { return a b; }函数表达式const add function(a, b) { return a b; };箭头函数ES6const add (a, b) a b;4.4 异常处理try...catch...finally结构try { // 可能出错的代码 JSON.parse(invalid json); } catch (error) { console.error(解析出错:, error.message); } finally { console.log(无论成功失败都会执行); }抛出异常function divide(a, b) { if (b 0) { throw new Error(除数不能为零); } return a / b; }5. 实战经验与常见问题5.1 类型判断最佳实践typeof的局限性typeof null; // object历史遗留问题 typeof []; // object typeof new Date();// object更可靠的类型检查方法Array.isArray([]); // true Object.prototype.toString.call(null); // [object Null]5.2 浮点数精度问题JavaScript的浮点数计算存在精度问题0.1 0.2 0.3; // false解决方案// 使用toFixed限制小数位数 (0.1 0.2).toFixed(2); // 0.30 // 转换为整数计算 (0.1*10 0.2*10)/10; // 0.35.3 变量提升与暂时性死区var的变量提升console.log(a); // undefined var a 1;let/const的暂时性死区console.log(b); // ReferenceError let b 2;5.4 数组遍历的陷阱for...in遍历数组的问题Array.prototype.customMethod function() {}; const arr [1, 2, 3]; for (let index in arr) { console.log(index); // 会输出0,1,2,customMethod }遍历数组应该使用for循环、forEach或for...of5.5 函数参数默认值ES5实现方式function greet(name) { name name || Guest; console.log(Hello name); }ES6更优雅的方式function greet(name Guest) { console.log(Hello ${name}); }6. 现代JavaScript开发建议6.1 使用严格模式在脚本或函数顶部添加use strict;严格模式的好处消除静默错误防止意外创建全局变量禁止使用未来可能成为关键字的标识符6.2 优先使用const和let现代JavaScript开发建议默认使用const需要重新赋值时使用let避免使用var6.3 模板字符串的优势传统字符串拼接const greeting Hello name , today is day;模板字符串方式const greeting Hello ${name}, today is ${day};支持多行字符串和表达式插值6.4 解构赋值技巧数组解构const [first, second] [1, 2];对象解构const {name, age} {name: John, age: 30};函数参数解构function greet({name, age}) { console.log(Hello ${name}, you are ${age}); }6.5 展开运算符的应用数组合并const arr1 [1, 2]; const arr2 [3, 4]; const combined [...arr1, ...arr2];对象合并const obj1 {a: 1}; const obj2 {b: 2}; const merged {...obj1, ...obj2};函数参数传递const numbers [1, 2, 3]; Math.max(...numbers);掌握这些JavaScript基础知识是成为合格前端开发者的第一步。在实际项目中类型转换、循环遍历和函数使用是最容易出问题的地方需要特别注意。建议通过实际编码练习来巩固这些概念遇到问题时多查阅MDN文档。
