爱站网络科技有限公司长沙 网站设计 公司

一、变量特性

1.1 变量提升

console.log(temp); // undefined（变量提升但未初始化）
var temp = 'hello';

• 现象：var声明的变量会提升至作用域顶部，但赋值不提升

• 建议：改用 let/const 避免变量提升问题

1.2 变量泄露

for (var i = 0; i < 5; i++) { /*...*/ }
console.log(i); // 5（var无块级作用域）

• 问题：var在循环中泄露变量到外部作用域

• 解决方案：使用 let 声明循环变量

---

二、数据结构 - Map（ 核心特性）

const map = new Map();
map.set(Symbol(), '唯一键值'); // 支持任意类型键
map.forEach((v,k) => console.log(k, v)); // 迭代方法

• 优势：相比Object，支持对象/Symbol作为键、维护插入顺序、专用迭代方法

• 常用API：keys()/values()/entries()/size

---

三、对象特性

3.1 动态属性名

let dynamicKey = 'role';
let obj = {[dynamicKey]: 'Admin', // ES6计算属性名[Symbol('id')]: 123    // Symbol作为唯一键
};

3.2 Symbol特性

const sym1 = Symbol('desc');
const sym2 = Symbol('desc');
console.log(sym1 === sym2); // false（唯一性）

---

四、函数进阶

4.1 参数处理

// 默认参数（注意参数顺序）
function sum(x=0, y=x) { /*...*/ }// Rest参数（必须最后参数）
function log(...args) { args.forEach(arg => console.log(arg));
}

4.2 高阶函数

// 函数作为返回值（工厂模式）
function createMultiplier(n) {return (x) => x * n;
}
const triple = createMultiplier(3);

4.3 闭包实践

function counter() {let count = 0;return {inc: () => ++count,get: () => count};
}
const c = counter();
c.inc(); // 1（保持状态私有）

---

五、类与继承

  类基础：

class Animal {constructor(name) {this.name = name;}// 实例方法speak() {console.log(`${this.name} makes noise`);}// 静态方法static info() {return 'Animal Class';}
}class Dog extends Animal {constructor(name, breed) {super(name);this.breed = breed;}speak() {super.speak();console.log('Woof!');}
}

---

六、事件系统（Node.js）

const EventEmitter = require('events');
class MyEmitter extends EventEmitter {}const emitter = new MyEmitter();
emitter.on('event', (a, b) => {console.log(a + b); // 30
});
emitter.emit('event', 10, 20);

---

七、模板字符串高级用法

// 标签模板
function highlight(strings, ...values) {return strings.reduce((acc, str, i) => `${acc}${str}<mark>${values[i] || ''}</mark>`, '');
}const price = 99;
const html = highlight`Price: ${price} USD`;
// 输出：Price: <mark>99</mark> USD

---

八、常见陷阱与最佳实践

    变量声明：

• 始终使用 let/const

• 避免 var 的变量提升问题

1. 相等判断：

   
   0 == '0'   // true（隐式转换）
   0 === '0'  // false（严格判断）

2. 箭头函数特性：

   
   const obj = {value: 42,getValue: () => this.value // 箭头函数无自己的this
   };

3. 深拷贝方案：

   
   const deepCopy = JSON.parse(JSON.stringify(obj)); // 简易深拷贝

---

九、新特性展望（ES6+）

1. 可选链操作符：

   
   const street = user?.address?.street;

2. 空值合并：

   
   const input = null;
   const value = input ?? 'default';

3. Promise & async/await：

   
   async function fetchData() {try {const res = await fetch(url);return res.json();} catch (err) {console.error(err);}
   }