（转载）20个JavaScript重点知识点（1）基础语法

‌JavaScript是一种基于原型、函数先行的多范式编程语言‌，支持面向对象编程、命令式编程以及函数式编程。它是一种轻量级的解释型或即时编译型语言，主要用于网页开发，增强网页的交互性和动态性。JavaScript目前已经成为国内最流行的编程语言之一，虽然说现在各种各样的框架层出不穷，但是很多时候基础知识也是非常重要的，那么本文将和大家一起来复习一下JavaScript的基础语法 有句古话说得好 温故而知新！

变量与常量

 1. 声明方式对比

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

关键区别：

特性	var	let	const
作用域	函数级	块级	块级
重复声明	允许	禁止	禁止
变量提升	存在	TDZ暂存区	TDZ暂存区
全局属性绑定	是	否	否

2. 最佳实践

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

---

数据类型

1. 类型分类

原始类型（7种）：

• 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")     // 123String(true)      // "true"Boolean([])       // true
// 隐式转换（避免使用）"5" + 2           // "52""5" - 2           // 3[] == ![]         // true (抽象相等比较)null == undefined // true
// 安全比较建议NaN === NaN       // falseObject.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'      // falseNaN !== 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; // 0001const WRITE = 1 << 1; // 0010const EXECUTE = 1 << 2; // 0100
let permissions = READ | WRITE; // 0011if (permissions & READ) {  console.log('可读');}

---

流程控制

1. 条件语句

// if-elseif (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)}`;

---

最佳实践与常见问题

1. 编码规范

• 始终使用分号（避免ASI陷阱）

• 使用全等（===）比较

• 优先使用字面量创建对象/数组

• 避免全局变量污染

2. 常见陷阱

// 闭包循环问题（经典案例）for (var i = 0; i < 5; i++) {  setTimeout(() => console.log(i), 100); // 输出5次5}// 解决方案：使用let或闭包
// 浮点精度处理0.1 + 0.2 // 0.30000000000000004

3. 调试技巧

// 条件调试console.assert(condition, '提示信息');
// 性能测试console.time('timer');// 待测代码console.timeEnd('timer');

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;}