前端技巧第四期JavaScript语法

变量与常量

1. 声明方式对比

// 传统方式 
var name = "张三";  // 函数作用域，存在变量提升
// 现代方式 
let age = 25;      // 块级作用域
const PI = 3.1415; // 块级作用域，必须初始化

2.关键区别

3.实用性

// 优先使用 const，必要时用 let
const MAX_SIZE = 100; 
// 对象常量（属性可变）
const user = {   name: 'Alice',  age: 28  };user.age = 29; // 允许
// 数组常量
const COLORS = ['red', 'green'];COLORS.push('blue'); // 允许

数据类型

1. 类型分类

原始类型

Undefined：未赋值的变量
Null：空值对象指针
Boolean：true/false
Number：双精度浮点数
String：UTF-16字符串
Symbol：唯一标识符（ES6+）
BigInt：大整数（ES2020+）

对象类型

Object
Array
Function
Date
其他内置对象

2. 类型检测

// 原始类型检测
typeof "hello"      // "string"
typeof 42n          // "bigint"
typeof Symbol()     // "symbol"
// 对象类型检测Array.isArray([])             // true
({}).toString.call(null)      // "[object Null]"
Object.prototype.toString.call([]) // "[object Array]"
// 安全检测
function isObject(val) {  
	return val !== null && (typeof val === 'object' || typeof val === 'function');
}

3.类型转换陷阱

// 显式转换
Number("123")     // 123
String(true)      // "true"
Boolean([])       // true
// 隐式转换（避免使用）
"5" + 2           // "52"
"5" - 2           // 3
[] == ![]         // true (抽象相等比较)
null == undefined // true
// 安全比较建议
NaN === NaN       // false
Object.is(NaN, NaN) // true

运算符

1. 算术运算符

// 基础运算
10 % 3          // 1 
2 ** 3          // 8（幂运算）
// 增量操作
let a = 1;
a++            // 返回1，a变为2
++a            // 返回3，a变为3
// 浮点精度问题
0.1 + 0.2 === 0.3 // false
// 解决方案：转为整数运算
Math.round((0.1 + 0.2) * 100) / 100 // 0.3

2.比较运算符

// 严格比较（推荐）
5 === '5'      // false
NaN !== NaN    // true
// 对象比较
{} === {}      // false（不同引用）
const obj = {};
obj === obj    // true

3. 逻辑运算符

// 短路运算
const name = user.name || '匿名';
const count = value && value.length;
// 空值合并（ES2020）
const width = options.width ?? 100;
// 可选链（ES2020）
const street = user?.address?.street;

4. 位运算符

// 权限系统示例
const READ = 1 << 0; // 0001
const WRITE = 1 << 1; // 0010
const EXECUTE = 1 << 2; // 0100
let permissions = READ | WRITE; // 0011
if (permissions & READ) {  
	console.log('可读');
}

流程控制

1. 条件语句

// if-else
if (score >= 90) {  
	grade = 'A';
} else if (score >= 60) {
	  grade = 'C';
} else {  
	grade = 'D';
}
// switch（严格比较）
switch(true) {  
	case score >= 90:    
		grade = 'A';    
	break;  
	default:    
		grade = 'D';
}

2. 循环结构

// for循环优化
for (let i = 0, len = arr.length; i < len; i++) {  
	// 缓存长度提升性能
}
// for...of（ES6+）
for (const item of iterable) { 
	console.log(item);
}
// 循环控制
while (condition) { 
	if (specialCase) continue;  
	if (exitCondition) break；
}

3. 错误处理

try {  
	JSON.parse('invalid json');
} catch (err) {  
	console.error('解析错误:', err.message);
	throw new Error('处理失败', { cause: err }); // ES2022
} 
finally {  cleanup();}

现代语法特性

1. 解构赋值

// 数组解构
	const [first, , third] = [1, 2, 3];
// 对象解构
	const { name: userName, age } = { name: 'Bob', age: 30 };
// 函数参数解构
	function print({ x, y = 0 }) {  
		console.log(`坐标: (${x}, ${y})`);
	}

2. 展开运算符

// 数组合并
	const newArr = [...arr1, ...arr2];
// 对象合并（浅拷贝）
	const merged = { ...defaults, ...options };
// 函数参数
	Math.max(...[1, 5, 3]); // 5

3. 模板字符串

const multiLine = `  第一行  第二行`;
const message = `您好${name}，您的余额是￥${balance.toFixed(2)}`;

4.实现深拷贝

function deepClone(obj) {  
	if (obj === null || typeof obj !== 'object') return obj;  
	if (obj instanceof Date) return new Date(obj);  
	if (obj instanceof RegExp) return new RegExp(obj);
  const clone = Array.isArray(obj) ? [] : {};  
  	for (const key in obj) {    
  		if (obj.hasOwnProperty(key)) {     
  			 clone[key] = deepClone(obj[key]);    
  			 }  
  		 }  
  		 return clone;
  }